1.
Content Strategyfor Responsive WebsitesWeb Content MavensJanuary 8, 2013 – Washington, DC Clarissa Peterson @clarissa

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

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

17.
But It’s Not Magic

18.
“Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress.” – Dan Willis @uxcrank

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

20.
http://www.nytimes.com

21.
http://www.nytimes.com

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

23.
http://m.usa.gov

24.
http://www.usa.gov

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

26.
Context?

27.
Stop making assumptions.

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

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

30.
“There is no Mobile Web. There is onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web.” – Stephen Hay @stephenhay

31.
Why It Matters

32.
85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

33.
45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

34.
40% have a cell phone that’snot a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

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

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

37.
Fluid boundaries between devices.

38.
1. Everything for Everybody

39.
Content Parity

40.
http://www.consumerreports.org

41.
http://m.consumerreports.org

42.
http://m.consumerreports.org

43.
http://m.consumerreports.org

44.
Access

45.
http://www.unheap.com/

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

47.
2. Content First

48.
Design Process

49.
Design Develop

50.
DesignDevelop

51.
Responsive Prototyping

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

53.
Design forSmall Screen First

54.
“Mobile use case: I just transferredmoney at my desk using my phonebecause logging into my banking apprequires fewer steps.” – Stephanie Rieger @stephanierieger

55.
Make it easy for everyone.

56.
Context of Use

57.
Put the important stuff firstbut don’t get rid of the rest of it.

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

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

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

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

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

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

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

65.
Mobile Devices

66.
http://waterlife.nfb.ca/

67.
http://waterlife.nfb.ca/

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

69.
3. Independent Content

70.
It can go anywhere

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

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

73.
via Instapaper

74.
via Instapaper

75.
Content Strategy

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

77.
Some responsive websites:

78.
http://worldwildlife.org/

79.
http://emerilsrestaurants.com/

80.
http://www.wm.edu/

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

82.
Resources

83.
BooksContent Strategy for MobileKaren McGrane (2012)http://www.abookapart.com/products/content-strategy-for-mobileResponsive Web DesignEthan 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/

84.
ArticlesResponsive 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/

85.
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.comWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/

86.
Find me online:clarissapeterson.com @clarissa