This document discusses responsive design and how it has evolved from Tim Berners-Lee's original vision of a universal linked information system. It defines responsive design as a web development approach where design and development respond to the user's behavior, environment, screen size, platform and orientation. The presenter discusses crafting responsive user experiences using flexible grids, flexible media, and media queries. He provides examples of when responsive design is and isn't warranted, using sites like Ford and United Airlines as examples. The presenter concludes by noting responsive design is still evolving and different solutions may be needed based on user needs and business tasks.

1. Developing for Responsive Design
Frederic Welterlin
Senior Presentation Layer Architect
San Francisco

2. Agenda
• What is Responsive Design?
– How did we get here?
– Why should we care?
• Crafting a Responsive User Experience
– The Flexible Grid
– Flexible Media
– Media Queries
• When is Responsive Design Warranted?
– Yes! and… Not Really
– Ford Motor Company Example
– Airline Industry Example
• Conclusions
– Some Thoughts
– What is Responsive Design?
– Thanks

3. What is Responsive Design?
How did we get here?

4. “We should work toward a universal
linked information system, in which
generality and portability are more
important than fancy graphics
techniques and complex
extra facilities.”
Tim Berners-Lee original WWW proposal.
(http://www.w3.org/History/1989/proposal.html)

5. “…balancing the needs of designers
for a sophisticated set of presentation
and interactive features against the
desire to make the Web accessible to
the largest possible number of
browsers (and other client
devices) and environments.”
© 1998-2001 Web Standards Project
(http://archive.webstandards.org/mission.html)

6. So the question is…

7. San Francisco MUNI
Friday, June 8, 2012

8. The Players

9. RESPONSIVE DESIGN
“is a web development approach that
suggests that design and development
should respond to the user’s behavior
and environment based on screen size,
platform and orientation.”
- Kayla Knight
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-
web-design/

10. Why should we care?

12. Crafting a Responsive User Experience

13. The Birth of Responsive Design
The term “Responsive Design” was first introduced in Ethan’s
A List Apart article:
http://www.alistapart.com/articles/responsive-web-design/
Subsequently, he wrote:
Responsive Web Design
Ethan Marcotte

14. The Flexible Grid

15. The Flexible Grid

16. The Flexible Grid
Gridpack
http://gridpak.com/
FRAMELESS
http://framelessgrid.com/
960 Grid System
http://960.gs/
There are so many…..
http://www.awwwards.com/grid-based-web-design-resources.html

17. Other Tools, like CSS Preprocessors (LESS, SASS, Stylus)
SASS (syntactically awesome style sheets)
Sass is a meta-language on top of CSS that’s used to describe the style of a document
cleanly and structurally, with more power than flat CSS allows.
http://sass-lang.com/
Extends CSS with dynamic behavior…
- Variables
- Nesting
- Mixins
- Operations
- Selector Inheritance
- Etc

18. Examples “borrowed” directly from SASS web site
Variables Nesting
$blue: #3bbfce; table.foo {
$margin: 16px; margin: 2em;
.content-navigation { td.bar {
border-color: $blue; text-align: right;
color: darken($blue, 9%); }
} }
.border {
margin: $margin / 2;
border-color: $blue;
}
.content-navigation { table.foo {
border-color: #3bbfce; margin: 2em;
color: #2b9eab; }
}
.border { table.foo td.bar {
margin: 8px; text-align: right;
border-color: #3bbfce; }
}

19. Flexible Media
img, embed, object, video {
max-width:100%;
}

20. Media Queries
CSS3 Media Queries expands on the role of the traditional CSS2
“media” attribute with specific parameters that control how your
styles are applied for various devices.
@media screen and (max-width: 480px) {
.foo {
float: left;
}
.bar {
margin: 0;
border: 4px solid #666;
}
}

21. Media Queries
@media screen and (min-width: 320px) { insert CSS for SmartPhone portrait… }
@media screen and (min-width: 480px) { insert CSS for SmartPhone landscape… }
@media screen and (min-width: 768px) { insert CSS for iPad portrait… }
@media screen and (min-width: 1024px) { insert CSS for iPad landscape… }
@media screen and (min-width: 1200px) { insert CSS for desktop… }
(disclaimer: these measurements are simplified for illustrative purposes :-)

22. Media Queries
So… who is this guy??

23. Media Queries
http://www.thismanslife.co.uk/
projects/lab/responsiveillustration/
James Mellers

24. When is Responsive Design Warranted?

25. When is Responsive Design Warranted?
• YES!
– Content focused sites: information travels in one
direction, from source to user…
»Newspapers
»Magazines
• Not Really…
–Transactional sites: complex applications that utilize
workflows and user input…
»Banking Applications
»Airline Ticketing

26. Yes!
The business advantages of using Responsive
Design…
• One code base (less maintenance, saves money)
• Device agnostic
• Improved SEO
• Possibility of using “mobile first” approach

27. Ford - Support Site (http://support.ford.com/)

28. Not really…
The business disadvantages of using
Responsive Design…
• Does not address differing user needs between
device usage
• Performance (un-needed markup is still being
sent)
• Pixel perfect expectations are shattered
• Need to support legacy (non HTML5/CSS3)
devices

29. www.united.com
Device: Desktop
Goal: Research Trip to NC
Task: Find/Review Flight
Dates, Options,
Connections

30. www.united.com
Device: Desktop
Goal: Research Trip to NC
Task: Get Mileage Balance
Review Status Upgrade

31. www.united.com
Device: Desktop
Goal: Research Trip to NC
Task: Sign-Up for Credit Card?

32. www.united.com
Device: Desktop
Goal: Research Trip to NC
Task: Review Deals and
Vacation Packages

33. mobile.united.com
Device: SmartPhone
Goal: Travel to New York City
Task: Go to Mobile Site

34. mobile.united.com
Device: SmartPhone
Goal: Travel to New York City
Task: Get Flight Status

35. mobile.united.com
Device: SmartPhone
Goal: Travel to New York City
Task: Check In, get Mobile Boarding
Pass

36. mobile.united.com
Device: SmartPhone
Goal: Travel to New York City
Task: Review Itinerary

37. Yeah… but Fred, isn’t what
you just showed an example
of being “responsive?”

38. Conclusions

39. Some Thoughts…
• “Responsive design” is a marketing term, and should be
used with caution.
• Razorfish tailors technology solutions around user
experience and business needs (and not the other way
around).
• Responsive design is still in its infancy. Future visionaries
and architects will continue to iterate on the “one code
base” concept. Responsive architecture?

40. RESPONSIVE DESIGN
is a web development approach that
suggests that design and development
should respond to the user’s business or
task oriented needs, in conjunction with
device usage.
- Fred Welterlin

41. Thank You
• Thanks and respect to the following individuals…
– James Walton and Michael Calfee (Razorfish, Austin, TX)
– Ralph Brandi (Razorfish, New York, NY)
– Ethan Marcotte (author, “Responsive Design”)
– Ray Velez/Chris Stetson (Razorfish executive sponsors of this presentation)