Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Responsive Design Heaven & Hell* Clarissa Peterson clarissapeterson.com ...
UX & Mobile Creatives Meetup September 25, 2012
"So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my f...
Mobile
It’s Not About MobileIt’s About the Web
Responsive Web Design
Responsive Web Design
Responsive Web Design A collection of techniques that allowyour website to respond to the device that it is being vie...
Options
1. Design for the Desktop2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design
Advantages ofResponsive Design
Consistent experience
Content parity
No zooming
Single code base
Device agnostic
URL management
Disadvantages ofResponsive Design
Context of use
Speed/bandwidth
Advertising
Workflow
We aren’t good at it yet.
"Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." ...
How do you choose?
Content sites vs. transactional sites
Context of use
Resources
Your CMS might decide for you
Don’t do a native app justbecause your boss wants one.
Things to Consider when Doing Responsive Design
Device/browser support
Test on real devices
Brief promo: Device Lab DCdevicelabdc.com @devicelabdc
Speed/bandwidth
Small-screen first
Let content determine design
Let design determine breakpoints
Consider user experience & business goals first
Communicate with your clients
Responsive workflow
Questions
Resources
A Few Examples of Responsive Design Boston Globe http://www.bostonglobe.com Smashing Magazine ...
BooksEthan Marcotte - Responsive Web Design (2011)http://www.abookapart.com/products/responsive-web-design/ Luke Wrobl...
Articles Responsive Web Design - Ethan Marcotte (May 2010) http://www.alistapart.com/article...
Upcoming SlideShare
Loading in …5
×

Responsive Design Heaven & Hell

7,385 views

Published on

Pros and cons of responsive design, choosing between responsive design and other options, things to consider when designing a responsive site.

Published in: Business, Technology
no profile picture user
  • Hello there! Get Your Professional Job-Winning Resume Here! http://bit.ly/topresum
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Insanely great!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Responsive Design Heaven & Hell

  1. Responsive Design Heaven & Hell* Clarissa Peterson clarissapeterson.com @clarissa*Someone else chose the title, not me.... I’m not quite so dramatic.
  2. UX & Mobile Creatives Meetup September 25, 2012
  3. "So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck." - my friend whos not a web designer
  4. Mobile
  5. It’s Not About MobileIt’s About the Web
  6. Responsive Web Design
  7. Responsive Web Design
  8. 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 experiencewithout creating separate sites for different devices.
  9. Options
  10. 1. Design for the Desktop2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design
  11. Advantages ofResponsive Design
  12. Consistent experience
  13. Content parity
  14. No zooming
  15. Single code base
  16. Device agnostic
  17. URL management
  18. Disadvantages ofResponsive Design
  19. Context of use
  20. Speed/bandwidth
  21. Advertising
  22. Workflow
  23. We aren’t good at it yet.
  24. "Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress." - Dan Willis @uxcrank
  25. How do you choose?
  26. Content sites vs. transactional sites
  27. Context of use
  28. Resources
  29. Your CMS might decide for you
  30. Don’t do a native app justbecause your boss wants one.
  31. Things to Consider when Doing Responsive Design
  32. Device/browser support
  33. Test on real devices
  34. Brief promo: Device Lab DCdevicelabdc.com @devicelabdc
  35. Speed/bandwidth
  36. Small-screen first
  37. Let content determine design
  38. Let design determine breakpoints
  39. Consider user experience & business goals first
  40. Communicate with your clients
  41. Responsive workflow
  42. Questions
  43. Resources
  44. 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.govWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
  45. BooksEthan 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 Friendly http://futurefriend.ly/ Brad Frost http://bradfrostweb.com/blog/
  46. 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 Magazines 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/

×