Uploaded on

OLA SuperConference 2012

OLA SuperConference 2012

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
318
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 33. Current UTL Catalogue
  • 34. Current catalogue on multiple devices
  • 35. Current catalogue mobile
  • 36. The New, Responsive UTL Catalogue Demo
  • 37. New Catalogue on multiple devices
  • 38. demo
  • 39. New UTL catalogue mobile
  • 40. Search tab index for accessibility mobile on focus popup for search options additional search button mobile
  • 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. Facets off canvas layout javascript to reposition absolute elements facet icon
  • 43. More facets
  • 44. Other Considerations ● Performance ○ Resource limitations ● Reducing Payload ○ Selective Loading, Polyfills ● Server-side Device detection ○ WURFL, Device Atlas ● Hybrid RWD
  • 45. 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/
  • 46. 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/ .
  • 47. Thank You! (Questions?)