Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Content Strategy for Responsive Websites

12,871

Published on

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
1 Comment
44 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,871
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
200
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

×