content strategy for responsive websites
Post on 17-Aug-2014
11.948 views
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.TRANSCRIPT
- 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