Computers in Libraries 2013

1. Mobilizing the
User Experience:
Mobile First and
Responsive
Design
Nina McHale
Computers in Libraries 2013

3. 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!

4. 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

5. 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

6. 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.

7. 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!

8. 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.

9. 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

10. 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!!!

11. 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

12. ninermac.net: Desktop

13. ninermac.net: iPad, horizontal

14. ninermac.net: tablet, portrait

15. ninermac.net: iPhone
Nav closed: Nav open!

16. Questions? Comments?
Nina McHale
Arapahoe Library District
@ninermac
ninermac.net