1. Content Strategy
for Responsive Websites
Web Content Mavens
January 8, 2013 – Washington, DC
Clarissa Peterson
@clarissa

2. “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

3. Mobile Strategy?

4. Mobile strategy is the same thing as web
strategy, but without ignoring mobile.

5. What is Responsive Design?

6. Flexible

7. http://www.bostonglobe.com/

8. http://www.bostonglobe.com/

9. http://www.jsonline.com/

10. Adjustable

11. http://www.unitedpixelworkers.com/

12. http://www.unitedpixelworkers.com/

13. http://www.unitedpixelworkers.com/

14. http://www.unitedpixelworkers.com/

15. http://www.unitedpixelworkers.com/

16. Flexible & Adjustable

22. But It’s Not Magic

23. “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

24. Fixed-Width
(just doesn’t work)

25. http://www.nytimes.com

26. http://www.nytimes.com

27. Separate Mobile Site
(where’s all the content?)

28. http://m.usa.gov

29. http://www.usa.gov

30. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

31. Context?

32. Stop making assumptions.

33. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv

34. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P

35. “There is no Mobile Web. There is only
The Web, which we view in different
ways. There is also no Desktop Web. Or
Tablet Web.”
– Stephen Hay
@stephenhay

36. Why It Matters

37. 85%
of American adults
own a cell phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

38. 45%
of American adults
own a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

39. 40%
have a cell phone that’s
not a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

40. 17%
do most of their online browsing
on their phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

41. But most of them also have
a desktop or laptop.
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

42. Fluid boundaries between devices.

43. 1. Everything for Everybody

44. Content Parity

45. http://www.consumerreports.org

46. http://m.consumerreports.org

47. http://m.consumerreports.org

48. http://m.consumerreports.org

49. Access

50. http://www.unheap.com/

51. “The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.”
– Brad Frost
@brad_frost

52. 2. Content First

53. Design Process

54. Design Develop

55. Design
Develop

56. Responsive Prototyping

57. http://foundation.zurb.com/prototype-example2.php

58. Design for
Small Screen First

62. “Mobile use case: I just transferred
money at my desk using my phone
because logging into my banking app
requires fewer steps.”
– Stephanie Rieger
@stephanierieger

63. Make it easy for everyone.

64. Context of Use

65. Put the important stuff first
but don’t get rid of the rest of it.

66. http://www.kiwibank.co.nz/

67. http://www.kiwibank.co.nz/

68. http://www.kiwibank.co.nz/

69. http://www.kiwibank.co.nz/

70. http://www.kiwibank.co.nz/

71. http://www.kiwibank.co.nz/

72. http://www.kiwibank.co.nz/

73. Mobile Devices

74. http://waterlife.nfb.ca/

75. http://waterlife.nfb.ca/

76. If you can’t make it responsive,
at least make sure it works.

77. 3. Independent Content

78. It can go anywhere

79. http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/

80. http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/

81. via Instapaper

82. via Instapaper

83. Content Strategy

84. 1. Everything for Everybody
2. Content First
3. Independent Content

85. Some responsive websites:

86. http://worldwildlife.org/

87. http://emerilsrestaurants.com/

88. http://www.wm.edu/

89. http://www.hsgac.senate.gov

90. Resources

91. Books
Content Strategy for Mobile
Karen McGrane (2012)
http://www.abookapart.com/products/content-strategy-for-mobile
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
Content Strategy for the Web, 2nd Ed.
Kristina Halvorson & Melissa Rach (2012)
http://contentstrategy.com/

92. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
Responsive-Ready Content - Sara Wachter-Boettcher (March 2012)
http://sarawb.com/2012/03/07/content-strategy-responsive-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 Clemons (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Dive into Responsive Prototyping with Foundation - Jonathan Smiley (April 2012)
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/

93. A Few More Examples of Responsive Design
Boston Globe http://www.bostonglobe.com
Smashing Magazine http://www.smashingmagazine.com
People (mobile site) http://m.people.com
Disney http://disney.com/
Mashable (beta) http://beta.mashable.com/
Stuff & Nonsense http://www.stuffandnonsense.co.uk/
Google Nexus http://www.google.com/nexus/
Hotellweb http://www.hotellweb.no/?lang=en_US
Andersson-Wise Architects http://www.anderssonwise.com
WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/

94. Find me online:
clarissapeterson.com
@clarissa