Your SlideShare is downloading. ×
  • Like
Content Strategy for Responsive Websites
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Content Strategy for Responsive Websites

  • 12,145 views
Published

Presentation to: …

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
12,145
On SlideShare
0
From Embeds
0
Number of Embeds
14

Actions

Shares
Downloads
191
Comments
1
Likes
44

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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