This document discusses responsive web design for libraries. It begins with an overview of responsive design and why it benefits both users and developers. It then discusses two university library case studies of implementing responsive designs. The rest of the document delves into various aspects of responsive design such as navigation, images, tables, forms and more. It provides examples of using frameworks like Foundation to create responsive prototypes. Overall, the document serves as a guide for libraries to understand responsive design principles and challenges in implementing them.

1. Responsive Design
for the mobile web
Gordon Belray
Bilal Khalid
Sian Meikle
Dillon Moore
OLA Superconference 2013

2. What is responsive web design and
why do we like it?
○ For the user
○ For the developer
Two takes on responsive web design in
libraries:
○ Wilfrid Laurier University
○ University of Toronto

3. What is responsive web design?
Responsive web design
(RWD) is an approach to web
design in which a site is crafted
to provide an optimal viewing
experience - easy reading and
navigation with a minimum of
resizing, panning, and scrolling
- across a wide range of
devices (from desktop
computer monitors to mobile
phones).
Wikipedia
http://alistapart.com/d/responsive-web-design/

4. Why responsive web design?
Source: http://www.psdtowordpress.eu/blog/responsive-design
Output
Input

5. From the User’s Point of View
Standard URLs regardless of device
Hazards of browser detection and redirection
Device context ≠ user intent
What is the mobile use case?
The Tesco story

6. "Mobile sites should be minimal,
functional with everything designed to
help the user complete a task and then
go"
…not a bad goal for any web site
Bruce Lawson, "Why we shouldn't make separate mobile web sites",
Smashing Magazine, April 19 2012
http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/

7. From the Developer’s Point of View
Most efficient content development strategy
Alternative to fragmenting content
Not silver bullet, or one-size-fits-all solution
Content auditing
“Future-proofing”

8. Responsive web design shouldn't...
Bloat pages
Hide content on some devices
Ignore device conventions
Serve same experience to all users

9. Responsive Design basics
● Flexible grids
● Flexible images
● Media queries

10. Design process changes
● Content
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
new devices

11. Mobile First
"... an experience
focused on the key
tasks users want to
accomplish without
the extraneous
detours and general
interface debris that
litter many of today’s
websites."
-p.22

12. Mobile First
1. Prepare for the growth of the mobile web
2. Space limitations force you to focus on only
the essential features
3. Opens up the new possibilities of mobile
technology
Adapted from Wrobleski

13. Objections?
If these trends continue...

14. Navigation: global nav
G. Hagedorn - CC by-sa 3.0 http://commons.wikimedia.
org/wiki/File:Smartphone_icon.svg

15. Navigation: global nav options
● Accordion
● Anchor link to
footer

16. Navigation: global nav options
● Select list
● Left slide

17. Navigation: global nav options
● Toggle button

18. Navigation: local nav
● So many tabs...

19. Flexible Media
● Images
○ Possible with CSS, but with caveats
○ Javascript options, such as adaptive images
○ How will this image look on a small screen?
● Videos
○ Possible with CSS when using HTML5 <video>
○ Embedded video (iframes)
○ Again, consider javascript options, such as fitvid.js

20. Tables
● Fluid isn't enough

21. Forms
● Consider single column forms
● Placement of labels
● Placement of examples, guides, error
messages

22. Traditional Wireframing

23. Responsive Prototyping
● Front-end frameworks for creating
responsive prototypes
● Usually include responsive grid, breakpoints,
javascript plug-ins, styled features
● Many examples, Twitter Bootstrap and Zurb
Foundation among the most popular

24. Foundation
foundation.zurb.com

25. Foundation
● Sass (Syntactically Awesome StyleSheets)
grids
● HTML pages
● lets you view your content in a responsive
design
● many features already implemented - great
for new ideas

26. Foundation

27. Foundation

28. Problems with Prototyping
● Easy to get pulled back into desktop first
● Everyone wants to see the desktop version
anyway
● Now how do we make it work with Drupal?

29. Responsive with Drupal
● Many major starter themes are responsive,
including Omega and Zen
● Projects are underway to create themes for
Foundation and Bootstrap
● Consider trade-offs (e.g., commitment to
accessibility, availability of support)

30. The UTL Experience

31. Why not Mobile First?
● Context
○ Research on a phone?
● Workflow Challenges
● Compatibility First
○ IE Woes
● Is it the Final Frontier?
○ Google Glass? iWatch?

32. Catalogue design challenges

35. Current UTL Catalogue

36. Current catalogue on multiple devices

37. Current
catalogue
mobile

38. The New, Responsive UTL Catalogue
Demo

39. New Catalogue on multiple devices

40. demo

41. New UTL
catalogue
mobile

42. Search
tab index for accessibility
mobile on focus popup
for search options
additional search button
mobile

43. Navigation
hide desktop / tablet navigation
and replace with standard menu
icon
wrap with <a href="#footer"></a>
<footer>
<a name="footer"></a>
include a back button

44. Facets
off canvas layout
javascript to
reposition absolute
elements
facet icon

45. More facets

46. Other Considerations
● Performance
○ Resource limitations
● Reducing Payload
○ Selective Loading, Polyfills
● Server-side Device detection
○ WURFL, Device Atlas
● Hybrid RWD

47. Find out more
Ethan Marcotte, “Responsive Web Design”,
A List Apart, May 25, 2010
http://www.alistapart.com/articles/responsive-web-design/
"HRWD - Hybrid Responsive Web Design"
Brett Jankord Designer / Developer Blog, Feb 29, 2012
http://www.brettjankord.com/2012/02/29/hrwd-hybrid-responsive-web-design/
...anything from Beyond the Mobile Web,
Stephanie Rieger's blog, http://stephanierieger.com/

48. Find out more (cont'd)
"Mobile First Design: Why It’s Great and Why It Sucks"
by Joshua Johnson on March 13, 2012
http://designshack.net/articles/css/mobilefirst/
"Media Queries"
http://mediaqueri.es/
"Responsive Navigation Patterns" by Brad Frost, February 24, 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
"Which Responsive Images Solution Should You Use?" by
Chris Coyier May 11, 2012 http://css-tricks.com/which-responsive-imagessolution-should-you-use/ .

49. Thank You!
(Questions?)