Responsive Design Heaven & Hell
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Responsive Design Heaven & Hell

on

  • 3,427 views

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

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

Statistics

Views

Total Views
3,427
Views on SlideShare
3,353
Embed Views
74

Actions

Likes
4
Downloads
46
Comments
1

10 Embeds 74

http://womentalkdesign.com 30
http://www.womentalkdesign.com 17
https://twitter.com 9
http://presentationdocs.playableitems.demobo.com 5
http://localhost 4
https://si0.twimg.com 3
http://tweetedtimes.com 2
http://lanyrd.com 2
https://twimg0-a.akamaihd.net 1
http://womentalkdesign.zippysites.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Insanely great!
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Responsive Design Heaven & Hell Presentation Transcript

  • 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/