Click here to load reader

Content Strategy for Responsive Websites

  • View
    11.953

  • 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/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 withFoundation - 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.comWordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
  • Find me online:clarissapeterson.com @clarissa