Content Strategy for Responsive Websites

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

description

Presentation to: Madison Web Design & Development Meetup - February 11, 2013. Web Content Mavens, Washington, DC - January 8, 2013. NYC Web Design Meetup -January 24, 2013.

Transcript of Content Strategy for Responsive Websites

Page 1: Content Strategy for Responsive Websites

Content Strategy for Responsive WebsitesWeb Content MavensJanuary 8, 2013 – Washington, DC

Clarissa Peterson@clarissa

Page 2: Content Strategy for Responsive Websites

“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: Content Strategy for Responsive Websites

Mobile Strategy?

Page 4: Content Strategy for Responsive Websites

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

Page 5: Content Strategy for Responsive Websites

What is Responsive Design?

Page 6: Content Strategy for Responsive Websites

Flexible

Page 7: Content Strategy for Responsive Websites

http://www.bostonglobe.com/

Page 8: Content Strategy for Responsive Websites

http://www.bostonglobe.com/

Page 9: Content Strategy for Responsive Websites

http://www.jsonline.com/

Page 10: Content Strategy for Responsive Websites

Adjustable

Page 11: Content Strategy for Responsive Websites

http://www.unitedpixelworkers.com/

Page 12: Content Strategy for Responsive Websites

http://www.unitedpixelworkers.com/

Page 13: Content Strategy for Responsive Websites

http://www.unitedpixelworkers.com/

Page 14: Content Strategy for Responsive Websites

http://www.unitedpixelworkers.com/

Page 15: Content Strategy for Responsive Websites

http://www.unitedpixelworkers.com/

Page 16: Content Strategy for Responsive Websites

Flexible & Adjustable

Page 17: Content Strategy for Responsive Websites
Page 18: Content Strategy for Responsive Websites
Page 19: Content Strategy for Responsive Websites
Page 20: Content Strategy for Responsive Websites
Page 21: Content Strategy for Responsive Websites
Page 22: Content Strategy for Responsive Websites

But It’s Not Magic

Page 23: Content Strategy for Responsive Websites

“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: Content Strategy for Responsive Websites

Fixed-Width(just doesn’t work)

Page 25: Content Strategy for Responsive Websites

http://www.nytimes.com

Page 26: Content Strategy for Responsive Websites

http://www.nytimes.com

Page 27: Content Strategy for Responsive Websites

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

Page 28: Content Strategy for Responsive Websites

http://m.usa.gov

Page 29: Content Strategy for Responsive Websites

http://www.usa.gov

Page 30: Content Strategy for Responsive Websites

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

Page 31: Content Strategy for Responsive Websites

Context?

Page 32: Content Strategy for Responsive Websites

Stop making assumptions.

Page 33: Content Strategy for Responsive Websites

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

Page 34: Content Strategy for Responsive Websites

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

Page 35: Content Strategy for Responsive Websites

“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: Content Strategy for Responsive Websites

Why It Matters

Page 37: Content Strategy for Responsive Websites

85% of American adults

own a cell phone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

Page 38: Content Strategy for Responsive Websites

45% of American adults

own a smartphone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

Page 39: Content Strategy for Responsive Websites

40%have a cell phone that’s

not a smartphone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

Page 40: Content Strategy for Responsive Websites

17%do most of their online browsing

on their phone

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

Page 41: Content Strategy for Responsive Websites

http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

But most of them also havea desktop or laptop.

Page 42: Content Strategy for Responsive Websites

Fluid boundaries between devices.

Page 43: Content Strategy for Responsive Websites

1. Everything for Everybody

Page 44: Content Strategy for Responsive Websites

Content Parity

Page 45: Content Strategy for Responsive Websites

http://www.consumerreports.org

Page 46: Content Strategy for Responsive Websites

http://m.consumerreports.org

Page 47: Content Strategy for Responsive Websites

http://m.consumerreports.org

Page 48: Content Strategy for Responsive Websites

http://m.consumerreports.org

Page 49: Content Strategy for Responsive Websites

Access

Page 50: Content Strategy for Responsive Websites

http://www.unheap.com/

Page 51: Content Strategy for Responsive Websites

“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: Content Strategy for Responsive Websites

2. Content First

Page 53: Content Strategy for Responsive Websites

Design Process

Page 54: Content Strategy for Responsive Websites

Design Develop

Page 55: Content Strategy for Responsive Websites

Design

Develop

Page 56: Content Strategy for Responsive Websites

Responsive Prototyping

Page 58: Content Strategy for Responsive Websites

Design for Small Screen First

Page 59: Content Strategy for Responsive Websites
Page 60: Content Strategy for Responsive Websites
Page 61: Content Strategy for Responsive Websites
Page 62: Content Strategy for Responsive Websites

“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: Content Strategy for Responsive Websites

Make it easy for everyone.

Page 64: Content Strategy for Responsive Websites

Context of Use

Page 65: Content Strategy for Responsive Websites

Put the important stuff first

but don’t get rid of the rest of it.

Page 66: Content Strategy for Responsive Websites

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

Page 67: Content Strategy for Responsive Websites

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

Page 68: Content Strategy for Responsive Websites

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

Page 69: Content Strategy for Responsive Websites

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

Page 70: Content Strategy for Responsive Websites

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

Page 71: Content Strategy for Responsive Websites

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

Page 72: Content Strategy for Responsive Websites

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

Page 73: Content Strategy for Responsive Websites

Mobile Devices

Page 74: Content Strategy for Responsive Websites

http://waterlife.nfb.ca/

Page 75: Content Strategy for Responsive Websites

http://waterlife.nfb.ca/

Page 76: Content Strategy for Responsive Websites

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

Page 77: Content Strategy for Responsive Websites

3. Independent Content

Page 78: Content Strategy for Responsive Websites

It can go anywhere

Page 81: Content Strategy for Responsive Websites

via Instapaper

Page 82: Content Strategy for Responsive Websites

via Instapaper

Page 83: Content Strategy for Responsive Websites

Content Strategy

Page 84: Content Strategy for Responsive Websites

1. Everything for Everybody

2. Content First

3. Independent Content

Page 85: Content Strategy for Responsive Websites

Some responsive websites:

Page 86: Content Strategy for Responsive Websites

http://worldwildlife.org/

Page 87: Content Strategy for Responsive Websites

http://emerilsrestaurants.com/

Page 88: Content Strategy for Responsive Websites

http://www.wm.edu/

Page 89: Content Strategy for Responsive Websites

http://www.hsgac.senate.gov

Page 90: Content Strategy for Responsive Websites

Resources

Page 91: Content Strategy for Responsive Websites

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: Content Strategy for Responsive Websites

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: Content Strategy for Responsive Websites

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/