Your SlideShare is downloading. ×
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,560
views

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,560
On Slideshare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
199
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

×