Your SlideShare is downloading. ×
0
Responsive Design
for the mobile web
Gordon Belray
Bilal Khalid
Sian Meikle
Dillon Moore
OLA Superconference 2013
What is responsive web design and
why do we like it?
○ For the user
○ For the developer
Two takes on responsive web design...
What is responsive web design?
Responsive web design
(RWD) is an approach to web
design in which a site is crafted
to prov...
Why responsive web design?

Source: http://www.psdtowordpress.eu/blog/responsive-design

Output

Input
From the User’s Point of View
Standard URLs regardless of device
Hazards of browser detection and redirection
Device conte...
"Mobile sites should be minimal,
functional with everything designed to
help the user complete a task and then
go"
…not a ...
From the Developer’s Point of View
Most efficient content development strategy
Alternative to fragmenting content
Not silv...
Responsive web design shouldn't...
Bloat pages
Hide content on some devices
Ignore device conventions
Serve same experienc...
Responsive Design basics
● Flexible grids
● Flexible images
● Media queries
Design process changes
● Content
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
new...
Mobile First
"... an experience
focused on the key
tasks users want to
accomplish without
the extraneous
detours and gener...
Mobile First
1. Prepare for the growth of the mobile web
2. Space limitations force you to focus on only
the essential fea...
Objections?
If these trends continue...
Navigation: global nav

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

● Anchor link to
footer
Navigation: global nav options
● Select list

● Left slide
Navigation: global nav options
● Toggle button
Navigation: local nav
● So many tabs...
Flexible Media
● Images
○ Possible with CSS, but with caveats
○ Javascript options, such as adaptive images
○ How will thi...
Tables

● Fluid isn't enough
Forms
● Consider single column forms
● Placement of labels
● Placement of examples, guides, error
messages
Traditional Wireframing
Responsive Prototyping
● Front-end frameworks for creating
responsive prototypes
● Usually include responsive grid, breakp...
Foundation
foundation.zurb.com
Foundation
● Sass (Syntactically Awesome StyleSheets)
grids
● HTML pages
● lets you view your content in a responsive
desi...
Foundation
Foundation
Problems with Prototyping
● Easy to get pulled back into desktop first
● Everyone wants to see the desktop version
anyway
...
Responsive with Drupal
● Many major starter themes are responsive,
including Omega and Zen
● Projects are underway to crea...
The UTL Experience
Why not Mobile First?
● Context
○ Research on a phone?

● Workflow Challenges
● Compatibility First
○ IE Woes

● Is it the...
Catalogue design challenges
Current UTL Catalogue
Current catalogue on multiple devices
Current
catalogue
mobile
The New, Responsive UTL Catalogue

Demo
New Catalogue on multiple devices
demo
New UTL
catalogue
mobile
Search
tab index for accessibility
mobile on focus popup
for search options
additional search button
mobile
Navigation
hide desktop / tablet navigation
and replace with standard menu
icon
wrap with <a href="#footer"></a>
<footer>
...
Facets
off canvas layout
javascript to
reposition absolute
elements

facet icon
More facets
Other Considerations
● Performance
○ Resource limitations

● Reducing Payload
○ Selective Loading, Polyfills

● Server-sid...
Find out more
Ethan Marcotte, “Responsive Web Design”,
A List Apart, May 25, 2010
http://www.alistapart.com/articles/respo...
Find out more (cont'd)
"Mobile First Design: Why It’s Great and Why It Sucks"
by Joshua Johnson on March 13, 2012
http://d...
Thank You!
(Questions?)
Responsive Design For The Mobile Web
Responsive Design For The Mobile Web
Upcoming SlideShare
Loading in...5
×

Responsive Design For The Mobile Web

458

Published on

OLA SuperConference 2012

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
458
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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 http://alistapart.com/d/responsive-web-design/
  4. 4. Why responsive web design? Source: http://www.psdtowordpress.eu/blog/responsive-design 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 http://mobile.smashingmagazine.com/2012/04/19/why-we-shouldnt-make-separate-mobile-websites/
  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 foundation.zurb.com
  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 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. 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. 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.

×