The document discusses responsive web design as a technique that allows websites to adapt to different devices for optimal user experience without needing separate sites. While it offers advantages such as content parity and consistent experience, challenges include context of use and design considerations. It also provides resources and examples of responsive designs from various websites.

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/