Upload
nina-mchale
View
1.084
Download
2
Embed Size (px)
DESCRIPTION
Computers in Libraries 2013
Citation preview
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