Mobilizing the User Experience:Mobile First and Responsive DesignNina McHaleComputers in Libraries 2013

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!

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

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

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.

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!

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.

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

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

Responsive Web Design:Tips and Pointers Start small, 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

ninermac.net: Desktop

ninermac.net: iPad, horizontal

ninermac.net: tablet, portrait

ninermac.net: iPhoneNav closed: Nav open!

Questions? Comments?Nina McHale

Arapahoe Library District@ninermac

ninermac.net