responsive content strategy
DESCRIPTION
Content Strategy for Responsive Websites: By Clarissa Peterson gives a presentation about the differences in understanding the concept of responsive websites…TRANSCRIPT
![Page 1: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/1.jpg)
Content Strategy for Responsive WebsitesWeb Content MavensJanuary 8, 2013 – Washington, DC
Clarissa Peterson@clarissa
![Page 2: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/2.jpg)
“So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck.”
– my friend who's not a web designer
![Page 3: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/3.jpg)
Mobile Strategy?
![Page 4: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/4.jpg)
Mobile strategy is the same thing as web strategy, but without ignoring mobile.
![Page 5: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/5.jpg)
What is Responsive Design?
![Page 6: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/6.jpg)
Flexible
![Page 10: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/10.jpg)
Adjustable
![Page 11: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/11.jpg)
http://www.unitedpixelworkers.com/
![Page 12: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/12.jpg)
http://www.unitedpixelworkers.com/
![Page 13: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/13.jpg)
http://www.unitedpixelworkers.com/
![Page 14: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/14.jpg)
http://www.unitedpixelworkers.com/
![Page 15: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/15.jpg)
http://www.unitedpixelworkers.com/
![Page 16: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/16.jpg)
Flexible & Adjustable
![Page 17: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/17.jpg)
![Page 18: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/18.jpg)
![Page 19: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/19.jpg)
![Page 20: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/20.jpg)
![Page 21: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/21.jpg)
![Page 22: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/22.jpg)
But It’s Not Magic
![Page 23: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/23.jpg)
“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
![Page 24: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/24.jpg)
Fixed-Width(just doesn’t work)
![Page 27: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/27.jpg)
Separate Mobile Site(where’s all the content?)
![Page 30: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/30.jpg)
Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
![Page 31: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/31.jpg)
Context?
![Page 32: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/32.jpg)
Stop making assumptions.
![Page 33: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/33.jpg)
Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
![Page 34: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/34.jpg)
Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
![Page 35: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/35.jpg)
“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
![Page 36: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/36.jpg)
Why It Matters
![Page 37: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/37.jpg)
85% of American adults
own a cell phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
![Page 38: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/38.jpg)
45% of American adults
own a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
![Page 39: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/39.jpg)
40%have a cell phone that’s
not a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
![Page 40: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/40.jpg)
17%do most of their online browsing
on their phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
![Page 41: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/41.jpg)
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
But most of them also havea desktop or laptop.
![Page 42: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/42.jpg)
Fluid boundaries between devices.
![Page 43: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/43.jpg)
1. Everything for Everybody
![Page 44: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/44.jpg)
Content Parity
![Page 49: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/49.jpg)
Access
![Page 51: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/51.jpg)
“The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration.”
– Brad Frost@brad_frost
![Page 52: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/52.jpg)
2. Content First
![Page 53: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/53.jpg)
Design Process
![Page 54: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/54.jpg)
Design Develop
![Page 55: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/55.jpg)
Design
Develop
![Page 56: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/56.jpg)
Responsive Prototyping
![Page 57: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/57.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 58: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/58.jpg)
Design for Small Screen First
![Page 59: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/59.jpg)
![Page 60: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/60.jpg)
![Page 61: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/61.jpg)
![Page 62: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/62.jpg)
“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
![Page 63: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/63.jpg)
Make it easy for everyone.
![Page 64: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/64.jpg)
Context of Use
![Page 65: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/65.jpg)
Put the important stuff first
but don’t get rid of the rest of it.
![Page 73: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/73.jpg)
Mobile Devices
![Page 76: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/76.jpg)
If you can’t make it responsive,at least make sure it works.
![Page 77: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/77.jpg)
3. Independent Content
![Page 78: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/78.jpg)
It can go anywhere
![Page 79: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/79.jpg)
http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/
![Page 80: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/80.jpg)
http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/
![Page 81: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/81.jpg)
via Instapaper
![Page 82: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/82.jpg)
via Instapaper
![Page 83: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/83.jpg)
Content Strategy
![Page 84: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/84.jpg)
1. Everything for Everybody
2. Content First
3. Independent Content
![Page 85: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/85.jpg)
Some responsive websites:
![Page 90: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/90.jpg)
Resources
![Page 91: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/91.jpg)
Books
Content Strategy for MobileKaren McGrane (2012)http://www.abookapart.com/products/content-strategy-for-mobile
Responsive 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/
![Page 92: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/92.jpg)
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/
![Page 93: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/93.jpg)
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/
![Page 94: Responsive Content Strategy](https://reader034.vdocuments.mx/reader034/viewer/2022052507/55910e6b1a28ab2e148b4662/html5/thumbnails/94.jpg)
Find me online:clarissapeterson.com
@clarissa