Your SlideShare is downloading. ×
0
Content Strategyfor Responsive WebsitesWeb Content MavensJanuary 8, 2013 – Washington, DC                             Clar...
“So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck.”             – my fr...
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
“Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress.”       ...
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 onlyThe Web, which we view in differentways. There is also no Desktop Web. OrTablet Web....
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 that’snot 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.Don’t arbitrarily lock people out becauseof browser, device or configuration.”      ...
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...
Make it easy for everyone.
Context of Use
Put the important stuff firstbut 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
BooksContent Strategy for MobileKaren McGrane (2012)http://www.abookapart.com/products/content-strategy-for-mobileResponsi...
ArticlesResponsive Web Design - Ethan Marcotte (May 2010)http://www.alistapart.com/articles/responsive-web-design/Responsi...
A Few More Examples of Responsive Design              Boston Globe      http://www.bostonglobe.com        Smashing Magazin...
Find me online:clarissapeterson.com       @clarissa
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Content Strategy for Responsive Websites
Upcoming SlideShare
Loading in...5
×

Content Strategy for Responsive Websites

12,920

Published on

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.

Published in: Design
1 Comment
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,920
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
200
Comments
1
Likes
44
Embeds 0
No embeds

No notes for slide

Transcript of "Content Strategy for Responsive Websites"

  1. 1. Content Strategyfor Responsive WebsitesWeb Content MavensJanuary 8, 2013 – Washington, DC Clarissa Peterson @clarissa
  2. 2. “So you’re going to make websiteswork better on mobile phones?Because right now they mostly all suck.” – my friend whos not a web designer
  3. 3. Mobile Strategy?
  4. 4. Mobile strategy is the same thing as web strategy, but without ignoring mobile.
  5. 5. What is Responsive Design?
  6. 6. Flexible
  7. 7. http://www.bostonglobe.com/
  8. 8. http://www.bostonglobe.com/
  9. 9. http://www.jsonline.com/
  10. 10. Adjustable
  11. 11. http://www.unitedpixelworkers.com/
  12. 12. http://www.unitedpixelworkers.com/
  13. 13. http://www.unitedpixelworkers.com/
  14. 14. http://www.unitedpixelworkers.com/
  15. 15. http://www.unitedpixelworkers.com/
  16. 16. Flexible & Adjustable
  17. 17. But It’s Not Magic
  18. 18. “Its not like our industry nailed webdesign before we started doingresponsive design. Its still a work inprogress.” – Dan Willis @uxcrank
  19. 19. Fixed-Width(just doesn’t work)
  20. 20. http://www.nytimes.com
  21. 21. http://www.nytimes.com
  22. 22. Separate Mobile Site (where’s all the content?)
  23. 23. http://m.usa.gov
  24. 24. http://www.usa.gov
  25. 25. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
  26. 26. Context?
  27. 27. Stop making assumptions.
  28. 28. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
  29. 29. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
  30. 30. “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
  31. 31. Why It Matters
  32. 32. 85% of American adultsown a cell phonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  33. 33. 45% of American adultsown a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  34. 34. 40% have a cell phone that’snot a smartphonehttp://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  35. 35. 17%do most of their online browsing on their phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  36. 36. But most of them also have a desktop or laptop.http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
  37. 37. Fluid boundaries between devices.
  38. 38. 1. Everything for Everybody
  39. 39. Content Parity
  40. 40. http://www.consumerreports.org
  41. 41. http://m.consumerreports.org
  42. 42. http://m.consumerreports.org
  43. 43. http://m.consumerreports.org
  44. 44. Access
  45. 45. http://www.unheap.com/
  46. 46. “The beauty of the web is its openness.Don’t arbitrarily lock people out becauseof browser, device or configuration.” – Brad Frost @brad_frost
  47. 47. 2. Content First
  48. 48. Design Process
  49. 49. Design Develop
  50. 50. DesignDevelop
  51. 51. Responsive Prototyping
  52. 52. http://foundation.zurb.com/prototype-example2.php
  53. 53. Design forSmall Screen First
  54. 54. “Mobile use case: I just transferredmoney at my desk using my phonebecause logging into my banking apprequires fewer steps.” – Stephanie Rieger @stephanierieger
  55. 55. Make it easy for everyone.
  56. 56. Context of Use
  57. 57. Put the important stuff firstbut don’t get rid of the rest of it.
  58. 58. http://www.kiwibank.co.nz/
  59. 59. http://www.kiwibank.co.nz/
  60. 60. http://www.kiwibank.co.nz/
  61. 61. http://www.kiwibank.co.nz/
  62. 62. http://www.kiwibank.co.nz/
  63. 63. http://www.kiwibank.co.nz/
  64. 64. http://www.kiwibank.co.nz/
  65. 65. Mobile Devices
  66. 66. http://waterlife.nfb.ca/
  67. 67. http://waterlife.nfb.ca/
  68. 68. If you can’t make it responsive, at least make sure it works.
  69. 69. 3. Independent Content
  70. 70. It can go anywhere
  71. 71. http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/
  72. 72. http://www.forbes.com/sites/ericsavitz/2012/12/27/the-future-of-the-web-the-case-for-responsive-design/
  73. 73. via Instapaper
  74. 74. via Instapaper
  75. 75. Content Strategy
  76. 76. 1. Everything for Everybody 2. Content First 3. Independent Content
  77. 77. Some responsive websites:
  78. 78. http://worldwildlife.org/
  79. 79. http://emerilsrestaurants.com/
  80. 80. http://www.wm.edu/
  81. 81. http://www.hsgac.senate.gov
  82. 82. Resources
  83. 83. 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/
  84. 84. 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 with Foundation - Jonathan Smiley (April 2012)http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
  85. 85. 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/
  86. 86. Find me online:clarissapeterson.com @clarissa
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×