Content Strategy for Responsive Websites
48 likes10,455 views
The document discusses the importance of content strategy for responsive websites, emphasizing that mobile strategy is integral to overall web strategy. It highlights the need for content parity, a content-first design process, and the independence of content to adapt across various devices. Additionally, it provides resources and examples of responsive design to guide the implementation of an effective digital presence.
Content Strategy for Responsive Websites
- 1. Content Strategy for Responsive Websites Web Content Mavens January 8, 2013 – Washington, DC Clarissa Peterson @clarissa
- 2. “So you’re going to make websites work better on mobile phones? Because right now they mostly all suck.” – my friend who's not a web designer
- 4. Mobile strategy is the same thing as web strategy, but without ignoring mobile.
- 5. What is Responsive Design?
- 6. Flexible
- 10. Adjustable
- 22. But It’s Not Magic
- 23. “It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.” – Dan Willis @uxcrank
- 27. Separate Mobile Site (where’s all the content?)
- 30. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7
- 31. Context?
- 33. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv
- 34. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P
- 35. “There is no Mobile Web. There is only The Web, which we view in different ways. There is also no Desktop Web. Or Tablet Web.” – Stephen Hay @stephenhay
- 36. Why It Matters
- 37. 85% of American adults own a cell phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
- 38. 45% of American adults own a smartphone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
- 39. 40% have a cell phone that’s not a smartphone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
- 40. 17% do most of their online browsing on their phone http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
- 41. But most of them also have a desktop or laptop. http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx
- 42. Fluid boundaries between devices.
- 43. 1. Everything for Everybody
- 44. Content Parity
- 49. Access
- 51. “The beauty of the web is its openness. Don’t arbitrarily lock people out because of browser, device or configuration.” – Brad Frost @brad_frost
- 52. 2. Content First
- 53. Design Process
- 54. Design Develop
- 55. Design Develop
- 58. Design for Small Screen First
- 62. “Mobile use case: I just transferred money at my desk using my phone because logging into my banking app requires fewer steps.” – Stephanie Rieger @stephanierieger
- 63. Make it easy for everyone.
- 64. Context of Use
- 65. Put the important stuff first but don’t get rid of the rest of it.
- 73. Mobile Devices
- 76. If you can’t make it responsive, at least make sure it works.
- 78. It can go anywhere
- 81. via Instapaper
- 82. via Instapaper
- 83. Content Strategy
- 84. 1. Everything for Everybody 2. Content First 3. Independent Content
- 90. Resources
- 91. Books Content Strategy for Mobile Karen McGrane (2012) http://www.abookapart.com/products/content-strategy-for-mobile Responsive Web Design Ethan 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/
- 92. Articles Responsive 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/
- 93. 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.com WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/
- 94. Find me online: clarissapeterson.com @clarissa