View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
for the mobile web
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 in
○ Wilfrid Laurier University
○ University of Toronto
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
Why responsive web design?
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
"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
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
Responsive web design shouldn't...
Hide content on some devices
Ignore device conventions
Serve same experience to all users
Design process changes
● Reconsider assumptions about users
● Don't ignore restrictions and possibilities of
"... an experience
focused on the key
tasks users want to
detours and general
interface debris that
litter many of today’s
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
○ 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)
● Front-end frameworks for creating
● Usually include responsive grid, breakpoints,
● Many examples, Twitter Bootstrap and Zurb
Foundation among the most popular
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?
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)
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/
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/ .