Mobilizing the User Experience


Published on

Computers in Libraries 2013

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Introduction to both conceptsHighlight library use casesLessons learned/pitfallsHow to get started when you get back to workDemo sites (time permitting)Questions, comments, wrap-up
  • A List Apart blog
  • Mobile first is a development philosophy that transforms the challenges of mobile development into opportunities.
  • Mobilizing the User Experience

    1. 1. Mobilizing theUser Experience:Mobile First andResponsiveDesignNina McHaleComputers in Libraries 2013
    2. 2. Mobile First:Basic Concepts, 1/2 Consider the context of the mobile user: one eye and one thumb Focus on what we may initially perceive as device limitations… …and view these constraints as new opportunities for web development!
    3. 3. Mobile First:Basic Concepts, 2/2 …prepares us for explosive mobile growth-all predictions are being exceeded! …forces an extremely close focus on what the most important things on your site are, which makes for a better desktop experience, too …provides opportunities for innovation
    4. 4. Mobile First:Mobile Behaviors in a Library Look up  Library hours/location(s)  Search the catalog Explore  Check out programs, events, reviews Check in  ILS account functionality Edit/create  Write reviews, create reading lists, post pictures
    5. 5. Mobile First:Make it Happen! Web analytics: what content do your mobile users access? UX Studies: talk to mobile users; what do they currently do and what they WANT to do? Let this data drive your priorities for your site (re)design.
    6. 6. Responsive Web Design:Basic Concepts Web designers and developers used to pick the most popular desktop resolution and just fill the canvas Arapahoe Library District: 1009 resolutions!  1280 x 800: 14%  1366 x 768: 11%  1920 x 1080: 10%  …and 1006 more!
    7. 7. Responsive Web Design:The Technical Stuff… HTML 5 + CSS 3:  Fluid grids: allow a web site to fully fill the “container,” no matter what size;  Flexible images: images are sized by percentages rather than fixed dimensions;  Media queries: used to determine “break points” at which site will resize.
    8. 8. Responsive Web Design:Make it Happen! With a web programmer proficient in writing HTML 5 and CSS 3, OR, With a robust content management system (CMS)  WordPress  Of note: “Responsive” theme  Drupal  Of note: “Omega” theme
    9. 9. Responsive Web Design:But what about… …integration with other non-responsive resources?  Is your catalog responsive?  How important are databases?  What are those connections gonna look like?! Talk to your vendors!!!
    10. 10. Responsive Web Design:Tips and Pointers Startsmall, with a secondary site or project (i.e., kids’ web site) Conduct a through content inventory/review Makes designs, not just wireframes, for all screen sizes Work with your users, especially the mobile ones, to see what they want/need
    11. 11. Desktop
    12. 12. iPad, horizontal
    13. 13. tablet, portrait
    14. 14. iPhone Nav closed: Nav open!
    15. 15. Questions? Comments? Nina McHale Arapahoe Library District @ninermac