Responsive Design For The Mobile Web


Published on

OLA SuperConference 2012

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design For The Mobile Web

  1. 1. Responsive Design for the mobile web Gordon Belray Bilal Khalid Sian Meikle Dillon Moore OLA Superconference 2013
  2. 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. 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
  4. 4. Why responsive web design? Source: Output Input
  5. 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. 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
  7. 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. 8. Responsive web design shouldn't... Bloat pages Hide content on some devices Ignore device conventions Serve same experience to all users
  9. 9. Responsive Design basics ● Flexible grids ● Flexible images ● Media queries
  10. 10. Design process changes ● Content ● Reconsider assumptions about users ● Don't ignore restrictions and possibilities of new devices
  11. 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. 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. 13. Objections? If these trends continue...
  14. 14. Navigation: global nav G. Hagedorn - CC by-sa 3.0 http://commons.wikimedia. org/wiki/File:Smartphone_icon.svg
  15. 15. Navigation: global nav options ● Accordion ● Anchor link to footer
  16. 16. Navigation: global nav options ● Select list ● Left slide
  17. 17. Navigation: global nav options ● Toggle button
  18. 18. Navigation: local nav ● So many tabs...
  19. 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. 20. Tables ● Fluid isn't enough
  21. 21. Forms ● Consider single column forms ● Placement of labels ● Placement of examples, guides, error messages
  22. 22. Traditional Wireframing
  23. 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. 24. Foundation
  25. 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. 26. Foundation
  27. 27. Foundation
  28. 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. 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. 30. The UTL Experience
  31. 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. 32. Catalogue design challenges
  33. 33. Current UTL Catalogue
  34. 34. Current catalogue on multiple devices
  35. 35. Current catalogue mobile
  36. 36. The New, Responsive UTL Catalogue Demo
  37. 37. New Catalogue on multiple devices
  38. 38. demo
  39. 39. New UTL catalogue mobile
  40. 40. Search tab index for accessibility mobile on focus popup for search options additional search button mobile
  41. 41. 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
  42. 42. Facets off canvas layout javascript to reposition absolute elements facet icon
  43. 43. More facets
  44. 44. Other Considerations ● Performance ○ Resource limitations ● Reducing Payload ○ Selective Loading, Polyfills ● Server-side Device detection ○ WURFL, Device Atlas ● Hybrid RWD
  45. 45. Find out more Ethan Marcotte, “Responsive Web Design”, A List Apart, May 25, 2010 "HRWD - Hybrid Responsive Web Design" Brett Jankord Designer / Developer Blog, Feb 29, 2012 ...anything from Beyond the Mobile Web, Stephanie Rieger's blog,
  46. 46. Find out more (cont'd) "Mobile First Design: Why It’s Great and Why It Sucks" by Joshua Johnson on March 13, 2012 "Media Queries" "Responsive Navigation Patterns" by Brad Frost, February 24, 2012 "Which Responsive Images Solution Should You Use?" by Chris Coyier May 11, 2012 .
  47. 47. Thank You! (Questions?)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.