1. Responsive Design
for the mobile web
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
○ 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
4. Why responsive web design?
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
…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. 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
8. Responsive web design shouldn't...
Hide content on some devices
Ignore device conventions
Serve same experience to all users
10. Design process changes
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
11. Mobile First
"... an experience
focused on the key
tasks users want to
detours and general
interface debris that
litter many of today’s
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
Adapted from Wrobleski
If these trends continue...
14. Navigation: global nav
G. Hagedorn - CC by-sa 3.0 http://commons.wikimedia.
15. Navigation: global nav options
● Anchor link to
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
○ Possible with CSS, but with caveats
○ How will this image look on a small screen?
○ Possible with CSS when using HTML5 <video>
○ Embedded video (iframes)
● Fluid isn't enough
● Consider single column forms
● Placement of labels
● Placement of examples, guides, error
22. Traditional Wireframing
23. Responsive Prototyping
● Front-end frameworks for creating
● Usually include responsive grid, breakpoints,
● Many examples, Twitter Bootstrap and Zurb
Foundation among the most popular
● Sass (Syntactically Awesome StyleSheets)
● HTML pages
● lets you view your content in a responsive
● many features already implemented - great
for new ideas
28. Problems with Prototyping
● Easy to get pulled back into desktop first
● Everyone wants to see the desktop version
● 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?
○ 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
36. The New, Responsive UTL Catalogue
37. New Catalogue on multiple devices
39. New UTL
tab index for accessibility
mobile on focus popup
for search options
additional search button
hide desktop / tablet navigation
and replace with standard menu
wrap with <a href="#footer"></a>
include a back button
off canvas layout
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, 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
"Responsive Navigation Patterns" by Brad Frost, February 24, 2012
"Which Responsive Images Solution Should You Use?" by
Chris Coyier May 11, 2012 http://css-tricks.com/which-responsive-imagessolution-should-you-use/ .