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
Mobilizing theUser Experience:Mobile First andResponsiveDesignNina 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 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