![Page 1: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/1.jpg)
Developing for Responsive DesignFrederic WelterlinSenior Presentation Layer Architect
San Francisco
![Page 2: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/2.jpg)
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
![Page 3: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/3.jpg)
How did we get here?What is Responsive Design?
![Page 4: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/4.jpg)
“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)
![Page 5: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/5.jpg)
“…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)
![Page 6: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/6.jpg)
So the question is…
![Page 7: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/7.jpg)
San Francisco MUNIFriday, June 8, 2012
![Page 8: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/8.jpg)
The Players
![Page 9: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/9.jpg)
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 Knighthttp://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
![Page 10: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/10.jpg)
Why should we care?
![Page 11: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/11.jpg)
![Page 12: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/12.jpg)
Crafting a Responsive User Experience
![Page 13: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/13.jpg)
The Birth of Responsive Design
Responsive Web DesignEthan Marcotte
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:
![Page 14: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/14.jpg)
The Flexible Grid
![Page 15: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/15.jpg)
The Flexible Grid
![Page 16: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/16.jpg)
The Flexible Grid
Gridpackhttp://gridpak.com/
FRAMELESShttp://framelessgrid.com/
960 Grid Systemhttp://960.gs/
There are so many…..http://www.awwwards.com/grid-based-web-design-resources.html
![Page 17: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/17.jpg)
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
![Page 18: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/18.jpg)
Examples “borrowed” directly from SASS web siteVariables Nesting$blue: #3bbfce;$margin: 16px;.content-navigation { border-color: $blue; color: darken($blue, 9%);}.border { margin: $margin / 2; border-color: $blue; }
.content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { margin: 8px; border-color: #3bbfce;}
table.foo { margin: 2em; td.bar { text-align: right; }}
table.foo { margin: 2em;}
table.foo td.bar { text-align: right;}
![Page 19: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/19.jpg)
Flexible Media
img, embed, object, video {max-width:100%;
}
![Page 20: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/20.jpg)
Media Queries
@media screen and (max-width: 480px) {.foo {
float: left;}.bar {
margin: 0;border: 4px solid #666;
}}
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.
![Page 21: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/21.jpg)
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 :-)
![Page 22: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/22.jpg)
Media Queries
So… who is this guy??
![Page 23: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/23.jpg)
Media Queries
http://www.thismanslife.co.uk/projects/lab/responsiveillustration/James Mellers
![Page 24: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/24.jpg)
When is Responsive Design Warranted?
![Page 25: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/25.jpg)
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
![Page 26: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/26.jpg)
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
![Page 27: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/27.jpg)
Ford - Support Site (http://support.ford.com/)
![Page 28: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/28.jpg)
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
![Page 29: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/29.jpg)
Device: DesktopGoal: Research Trip to NCTask: Find/Review Flight
www.united.com
Dates, Options, Connections
![Page 30: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/30.jpg)
Device: DesktopGoal: Research Trip to NCTask: Get Mileage Balance
www.united.com
Review Status Upgrade
![Page 31: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/31.jpg)
Device: DesktopGoal: Research Trip to NCTask: Sign-Up for Credit Card?
www.united.com
![Page 32: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/32.jpg)
Device: DesktopGoal: Research Trip to NCTask: Review Deals and
www.united.com
Vacation Packages
![Page 33: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/33.jpg)
Device: SmartPhoneGoal: Travel to New York CityTask: Go to Mobile Site
mobile.united.com
![Page 34: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/34.jpg)
Device: SmartPhoneGoal: Travel to New York CityTask: Get Flight Status
mobile.united.com
![Page 35: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/35.jpg)
Device: SmartPhoneGoal: Travel to New York CityTask: Check In, get Mobile Boarding
mobile.united.com
Pass
![Page 36: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/36.jpg)
Device: SmartPhoneGoal: Travel to New York CityTask: Review Itinerary
mobile.united.com
![Page 37: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/37.jpg)
Yeah… but Fred, isn’t what you just showed an example of being “responsive?”
![Page 38: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/38.jpg)
Conclusions
![Page 39: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/39.jpg)
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?
![Page 40: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/40.jpg)
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
![Page 41: Developing for Responsive Design - Frederic Welterlin](https://reader033.vdocument.in/reader033/viewer/2022061110/54529bc2af7959ed5f8b4ad8/html5/thumbnails/41.jpg)
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)