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

Clarissa Peterson@clarissa

“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

Mobile Strategy?

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

What is Responsive Design?

Flexible

http://www.bostonglobe.com/

http://www.bostonglobe.com/

http://www.jsonline.com/

Adjustable

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

http://www.unitedpixelworkers.com/

Flexible & Adjustable

But It’s Not Magic

“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

Fixed-Width(just doesn’t work)

http://www.nytimes.com

http://www.nytimes.com

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

http://m.usa.gov

http://www.usa.gov

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

Context?

Stop making assumptions.

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

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

“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

Why It Matters

85% of American adults

own a cell phone

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

45% of American adults

own a smartphone

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

40%have a cell phone that’s

not a smartphone

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

17%do most of their online browsing

on their phone

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

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

But most of them also havea desktop or laptop.

Fluid boundaries between devices.

1. Everything for Everybody

Content Parity

http://www.consumerreports.org

http://m.consumerreports.org

http://m.consumerreports.org

http://m.consumerreports.org

Access

http://www.unheap.com/

“The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration.”

– Brad Frost@brad_frost

2. Content First

Design Process

Design Develop

Design

Develop

Responsive Prototyping

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

Design for Small Screen First

“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

Make it easy for everyone.

Context of Use

Put the important stuff first

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

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

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

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

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

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

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

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

Mobile Devices

http://waterlife.nfb.ca/

http://waterlife.nfb.ca/

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

3. Independent Content

It can go anywhere

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

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

via Instapaper

via Instapaper

Content Strategy

1. Everything for Everybody

2. Content First

3. Independent Content

Some responsive websites:

http://worldwildlife.org/

http://emerilsrestaurants.com/

http://www.wm.edu/

http://www.hsgac.senate.gov

Resources

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/

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/

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/

Find me online:clarissapeterson.com

@clarissa