responsive design heaven & hell
DESCRIPTION
Pros and cons of responsive design, choosing between responsive design and other options, things to consider when designing a responsive site.TRANSCRIPT
![Page 1: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/1.jpg)
Responsive DesignHeaven & Hell*
Clarissa Petersonclarissapeterson.com
@clarissa
*Someone else chose the title, not me.... I’m not quite so dramatic.
![Page 2: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/2.jpg)
UX & Mobile Creatives Meetup
September 25, 2012
![Page 3: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/3.jpg)
"So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck."
- my friend who's not a web designer
![Page 4: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/4.jpg)
Mobile
![Page 5: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/5.jpg)
It’s Not AboutMobile
It’s About the Web
![Page 6: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/6.jpg)
Responsive Web Design
![Page 7: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/7.jpg)
Responsive Web Design
![Page 8: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/8.jpg)
Responsive Web Design
A collection of techniques that allowyour website to respond to the device
that it is being viewed on.
This allows all users to have an optimal experience without creating separate sites for different devices.
![Page 9: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/9.jpg)
Options
![Page 10: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/10.jpg)
1. Design for the Desktop
2. Separate Mobile Site
3. Native Mobile App
4. Responsive Design
![Page 11: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/11.jpg)
Advantages of Responsive Design
![Page 12: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/12.jpg)
Consistent experience
![Page 13: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/13.jpg)
Content parity
![Page 14: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/14.jpg)
No zooming
![Page 15: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/15.jpg)
Single code base
![Page 16: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/16.jpg)
Device agnostic
![Page 17: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/17.jpg)
URL management
![Page 18: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/18.jpg)
Disadvantages ofResponsive Design
![Page 19: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/19.jpg)
Context of use
![Page 20: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/20.jpg)
Speed/bandwidth
![Page 21: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/21.jpg)
Advertising
![Page 22: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/22.jpg)
Workflow
![Page 23: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/23.jpg)
We aren’t good at it yet.
![Page 24: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/24.jpg)
"It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress."
- Dan Willis@uxcrank
![Page 25: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/25.jpg)
How do you choose?
![Page 26: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/26.jpg)
Content sites vs. transactional sites
![Page 27: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/27.jpg)
Context of use
![Page 28: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/28.jpg)
Resources
![Page 29: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/29.jpg)
Your CMS might decide for you
![Page 30: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/30.jpg)
Don’t do a native app justbecause your boss wants one.
![Page 31: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/31.jpg)
Things to Consider when Doing Responsive Design
![Page 32: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/32.jpg)
Device/browser support
![Page 33: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/33.jpg)
Test on real devices
![Page 34: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/34.jpg)
Brief promo:Device Lab DC
devicelabdc.com@devicelabdc
![Page 35: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/35.jpg)
Speed/bandwidth
![Page 36: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/36.jpg)
Small-screen first
![Page 37: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/37.jpg)
Let content determine design
![Page 38: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/38.jpg)
Let design determine breakpoints
![Page 39: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/39.jpg)
Consider user experience & business goals first
![Page 40: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/40.jpg)
Communicate with your clients
![Page 41: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/41.jpg)
Responsive workflow
![Page 42: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/42.jpg)
Questions
![Page 43: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/43.jpg)
Resources
![Page 44: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/44.jpg)
A Few Examples of Responsive Design
Boston Globe http://www.bostonglobe.com
Smashing Magazine http://www.smashingmagazine.com
People (mobile site) http://m.people.com
United Pixelworkers http://www.unitedpixelworkers.com/
World Wildlife Fund http://worldwildlife.org/
Stuff & Nonsense http://www.stuffandnonsense.co.uk/
Emeril’s Restaurants http://www.emerilsrestaurants.com/
Andersson-Wise Architects http://www.anderssonwise.com
AIDS.gov (HHS) http://aids.gov
WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
![Page 45: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/45.jpg)
Books
Ethan Marcotte - Responsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/
Luke Wroblewski - Mobile First (2011)http://www.abookapart.com/products/mobile-first
Websites
@RWD (Ethan Marcotte)https://twitter.com/RWD
Future Friendlyhttp://futurefriend.ly/
Brad Frosthttp://bradfrostweb.com/blog/
![Page 46: Responsive Design Heaven & Hell](https://reader036.vdocuments.mx/reader036/viewer/2022082310/54c7494e4a795999598b4571/html5/thumbnails/46.jpg)
Articles
Responsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/
How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Design Process In The Responsive Age - Drew Clemens (May 2012)http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Making of: People Magazine's Responsive Mobile Website (July 2012)http://globalmoxie.com/blog/making-of-people-mobile.shtml
Presidential Smackdown Edition: Separate Mobile Website Vs.Responsive Website - Brad Frost (Aug. 2012)
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-smackdown/