The document discusses the importance of a content strategy for responsive web design, emphasizing that mobile strategy should not ignore the overall web strategy. Key principles include ensuring content is accessible for all users, prioritizing content during design, and allowing content to be independent across devices. It highlights the significance of mobile devices in web usage and provides resources for further exploration of responsive design and content strategy.

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