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

17.
But It’s Not Magic

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

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 only
The Web, which we view in different
ways. There is also no Desktop Web. Or
Tablet Web.”
– Stephen Hay
@stephenhay

31.
Why It Matters

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

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

34.
40%
have a cell phone that’s
not a smartphone
http://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 because
of browser, device or configuration.”
– Brad Frost
@brad_frost

47.
2. Content First

48.
Design Process

49.
Design Develop

50.
Design
Develop

51.
Responsive Prototyping

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

53.
Design for
Small Screen First

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

55.
Make it easy for everyone.

56.
Context of Use

57.
Put the important stuff first
but 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.
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/

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

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

86.
Find me online:
clarissapeterson.com
@clarissa