Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobilizing the User Experience


Published on

Computers in Libraries 2013

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

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