Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Responsive Design Heaven & Hell

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
UX & Responsive Design
UX & Responsive Design
Wird geladen in …3
×

Hier ansehen

1 von 46 Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

Andere mochten auch (20)

Anzeige

Ähnlich wie Responsive Design Heaven & Hell (20)

Aktuellste (20)

Anzeige

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 websites work better on mobile phones? Because right now they mostly all suck." - my friend who's not a web designer
  4. Mobile
  5. It’s Not About Mobile It’s About the Web
  6. Responsive Web Design
  7. Responsive Web Design
  8. Responsive Web Design A collection of techniques that allow your 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.
  9. Options
  10. 1. Design for the Desktop 2. Separate Mobile Site 3. Native Mobile App 4. Responsive Design
  11. Advantages of Responsive Design
  12. Consistent experience
  13. Content parity
  14. No zooming
  15. Single code base
  16. Device agnostic
  17. URL management
  18. Disadvantages of Responsive Design
  19. Context of use
  20. Speed/bandwidth
  21. Advertising
  22. Workflow
  23. We aren’t good at it yet.
  24. "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
  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 just because 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 DC devicelabdc.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.gov WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
  45. 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 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 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/

×