Developing for Responsive Design - Frederic Welterlin
Download as PPTX, PDF3 likes1,005 views
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.
Developing for Responsive Design - Frederic Welterlin
- 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
- 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??
- 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)