Content Strategy for Responsive Websites

  • View
    11.940

  • Download
    2

Embed Size (px)

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.

Text of Content Strategy for Responsive Websites

  • Content Strategyfor Responsive WebsitesWeb Content MavensJanuary 8, 2013 Washington, DC Clarissa Peterson @clarissa
  • So youre going to make websiteswork better on mobile phones?Because right now they mostly all suck. my friend whos 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 Its Not Magic
  • Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress. Dan Willis @uxcrank
  • Fixed-Width(just doesnt work)
  • http://www.nytimes.com
  • http://www.nytimes.com
  • Separate Mobile Site (wheres all the content?)
  • http://m.usa.gov
  • http://www.usa.gov
  • Photo credit: Brad Frost via Creative Commons http://ic.kr/p/cfQwL7
  • Context?
  • Stop making assumptions.
  • Photo credit: Kai Chan Vong via Creative Commons http://ic.kr/p/5c4Sfv
  • Photo credit: Carlos Smith via Creative Commons http://ic.kr/p/8tLb4P
  • 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
  • Why It Matters
  • 85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 40% have a cell phone thatsnot a smartphonehttp://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
  • But most of them also have a desktop or laptop.http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  • 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.Dont arbitrarily lock people out becauseof browser, device or conguration. Brad Frost @brad_frost
  • 2. Content First
  • Design Process
  • Design Develop
  • DesignDevelop
  • Responsive Prototyping
  • http://foundation.zurb.com/prototype-example2.php
  • Design forSmall Screen First
  • Mobile use case: I just transferredmoney at my desk using my phonebecause logging into my banking apprequires fewer steps. Stephanie Rieger @stephanierieger
  • Make it easy for everyone.
  • Context of Use
  • Put the important stuff rstbut dont 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 cant 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
  • 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/
  • ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design