Responsive Design Heaven & Hell

3,678
-1

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
1 Comment
4 Likes
Statistics
Notes
  • Insanely great!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
3,678
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
55
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

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/

×