Creating and Planning Content for Responsive Web Design


Published on

One of the biggest buzz phrases of 2011 has been “responsive web design,” an emerging practice centered around creating designs that “anticipate and respond to users’ needs.” With the surge in mobile and tablet devices, this approach has a lot of value. But what about the substance that those designs support: the content. This prompts two questions: one, what adjustments should we make for our content in a responsive design world, and two, what does (or should) “responsive content” mean? In this presentation, delivered from the point of view of a content professional and not a web designer or programmer, I will discuss some of the answers to these questions, including structured content, content goals and hierarchies, organizational efficiency and planning for multiple device and channel contexts.

Webinar delivered June 19, 2012

Published in: Education, Technology, Design
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating and Planning Content for Responsive Web Design

  1. 1. #meetcontentCreating and PlanningContent for ResponsiveWeb DesignsGeorgy Cohen@radiofreegeorgy
  2. 2. #meetcontentAbout me 2
  3. 3. #meetcontentGoing mobile “ These are weird times for publishing. Erin Kissane Confab May 9, 2011 3
  4. 4. #meetcontentGoing mobile“ Digital Today, half of the total Omnivores How Tablets, U.S. mobile population Smartphones and uses mobile media. ... Connected Devices The growth in mobile are Changing U.S. Digital Media media use is driven by Consumption Habits the increase in October 2011 smartphone adoption. Presentations_Whitepapers/2011/Digital_Omnivores 4
  5. 5. #meetcontentGoing mobile • 46 percent of Smartphone American adults own a smartphone Adoption and Usage • 25 percent of February 2012 smartphone owners use it as their primary internet device * * = as of July 2011, when 35 percent of Update-2012/Findings.aspx U.S. adults reported owning a smartphone 5
  6. 6. #meetcontentGoing mobile The Smartphone Class Connected Consumers Transform US Commerce and Culture, May 2012 R=1009014&ecid=a6506033675d47f881651943c21c5ed4 6
  7. 7. #meetcontentGoing mobile The Mobile Browsing Behaviors and Expectations of College-Bound High School Students February 2012 Mobile_Browsing_Behaviors_and_Expectations_of_College_Bound_High_Sc hool_Students.php 7
  8. 8. #meetcontentGoing mobile State of the News Media 2012 Pew Research Centers Project for Excellence in Journalism 8
  9. 9. #meetcontentGoing mobile“ Digital Devices influence the way Omnivores people consume content How Tablets, and it is important to Smartphones and remember that they do not Connected Devices are Changing exist in isolation of one U.S. Digital Media another, but have a Consumption Habits complementary relationship October 2011 in consumers’ lives. Presentations_Whitepapers/2011/Digital_Omnivores 9
  10. 10. #meetcontentGoing mobileSame site, different devices - different content! 10
  11. 11. #meetcontentGoing mobileSame site, different devices - different content! 11
  12. 12. #meetcontentGoing mobileSame site, different devices - different content! 12
  13. 13. #meetcontentGoing mobileSame site, different devices - different content! 13
  14. 14. It’s time to revisit ourassumptions aboutthe mobile use case.
  15. 15. #meetcontentThe mobile use caseIs it this... 15
  16. 16. #meetcontent ...or this? The mobile use case 16
  17. 17. Where are we going?
  18. 18. Let’s build our sites forour users, whereverthey are, however theyare finding us.
  19. 19. #meetcontentIntroducing responsive web design 19
  20. 20. #meetcontentIntroducing responsive web design“ Rather than quarantining our content into disparate, device-specific experiences, we can use [technology] to progressively enhance our work within different viewing contexts. 20
  21. 21. #meetcontent 21
  22. 22. #meetcontentIntroducing responsive web design“ Focus and prioritize your digital offerings by embracing the constraints inherent in mobile design. ... Set a baseline mobile experience first, then progressively enhance or adapt your layout as device capabilities change. 20111220_luke_wroblewski_on_how_news_organizations_can_go_mobile_first/ 22
  23. 23. #meetcontentIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 23
  24. 24. #meetcontent#meetcontent 24
  25. 25. #meetcontent 25
  26. 26. #meetcontentIt’s everywhere! What about us? (You know, the content people.) 26
  27. 27. “ [Responsive web design is] the most exciting thing to happen to content strategy since the Excel spreadsheet. Karen McGrane
  28. 28. #meetcontentWhat about us? (You know, thecontent people.) 28
  29. 29. #meetcontent“ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane 29
  30. 30. “ Start with the content, not the device. Jeremy Keith
  31. 31. #meetcontentIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 31
  32. 32. Content isunpredictable, but itshouldn’t be random.
  33. 33. #meetcontentIntroducing responsive web designSame site, different devices - different content! 33
  34. 34. “ Responsive websites use new technologies and better browser support to rearrange, resize, add or subtract content to fit the device. Additionally, it forces the web team – designers, writers and developers – to rethink how that content is edited, organized and delivered. Dan Woychick
  35. 35. “ Future-ready content [is] about seeing structures through the lens of meaning and storytelling, and building relationships across disciplines so that our databases reflect this richness and complexity. - Sara Wachter-Boettcher Feb. 28, 2012
  36. 36. “ Think of your core content as a fluid thing that gets poured into a huge number of containers. Get your content ready to go anywhere because it’s going to go everywhere. Brad Frost
  37. 37. ] How do we make our content a “fluid thing”? 37
  38. 38. How do we prepare our content for the future? 38
  39. 39. Content goals are moreimportant than ever.
  40. 40. #meetcontentResponsive web design, content and higher ed A look at• Content goals are more responsive design important than ever. They will and web content inform how we shape content in higher education in a responsive context.• There is no page, no single container, no single grid, no single answer.• Content and design are BFFs. (They like to party with technology.) 40
  41. 41. John M. RogersonOur current "responsive" iteration isfocused on providing content first,navigation second. We build out"mobile first" (for want of a better term).
  42. 42. Anthony Bosio... [We] make decisions about the best order forthe content in that form and rely on CSS topresent the content as needed for various screenwidths. This practice pre-dates responsive designin our shop because content order was always animportant consideration for accessibility.
  43. 43. Brett Pollak[The campus web steering committee]understood that this was a new thing. ...We cited emerging best practices anditerated through that process.
  44. 44. Erik RunyonOn subpages, the content is primarilyidentical for all devices as we didnt wantto make assumptions about the intent ofthe user based on device.
  45. 45. Jessica M. SparksI would say until you layoutwireframes in a side-by-side way youreally cant comprehend how differentthe content will look and feel.
  46. 46. Graphic courtesy of the Wright State University Web Team
  47. 47. Graphic courtesy of the Wright State University Web Team
  48. 48. “ My developer and I realized in five minutes of looking at our wireframes that the order of content had to change.Graphic courtesy of the Wright State University Web Team
  49. 49. Sarah ClaytonBased on objectives for the Regent Collegewebsite, our web agency developedindividualized content plans for eachsection/page, that included purpose ofpage, key messaging, and content hierarchy.
  50. 50. #meetcontent Note: Notrehigher edResponsive web design, content and Dame’s Erik Runyon keeps a• Content goals are more list of higher ed RWD important than ever. Theysites at will inform how we shape content in a responsive context. weedygarden• There is no page, no single container, no single grid, no single answer.• Content and design are BFFs. (They like to party with technology.) 50
  51. 51. #meetcontentPlanning content: WritingLet go of pixelperfection. 51
  52. 52. “ The real value of writers is to use their creativity to craft content that software and computing devices can deliver in meaningful ways to those who need it. Scott Abel Experiences-Require-Writers-to-Think-Differently-81707.htm?
  53. 53. “ When content doesn’t work well on responsive sites, it’s glaringly obvious. Sara Wachter-Boettcher websites-need-more-responsible-content/53
  54. 54. #meetcontentPlanning content: Writing 54
  55. 55. #meetcontentPlanning content: Writing vs. 55
  56. 56. #meetcontentPlanning content: Writing 56
  57. 57. #meetcontentPlanning content for responsive web designsStructuredcontent 57
  58. 58. #meetcontentPlanning content: Structured content Nimble Rachel Lovinger, Razorfish 2010 58
  59. 59. “ Simply put, digital content needs to be free – to go where and when people want it most. ... The more structure you put into content the freer it will become. Rachel Lovinger Author, Nimble nimble.razorfish.com59
  60. 60. What is nimble content? • Well-structured • Well-defined • Well-described Rachel Lovinger, “Nimble” 60
  61. 61. #meetcontentPlanning content: Structured content Jason Scott, Sept. 28, 2011 Photo by Erin Kissane 61
  62. 62. #meetcontentPlanning content: Structured content 62
  63. 63. #meetcontentMaking content responsive: Structured content vs. 63
  64. 64. Dress your content inlayers so it’s ready forany weather (or device)it may encounter.
  65. 65. #meetcontentPlanning content: Structured content The role of the CMS 65
  66. 66. #meetcontentPlanning content: Structured content Create Once, Publish Everywhere Learn how to COPE 66
  67. 67. #meetcontentPlanning content: Structured content<station  id="305">    <callLetters>WAMU</callLetters>    <band>FM</band>    <name>WAMU-­‐FM</name> The magic of APIs    <frequency>88.5</frequency>    <marketCity>Washington</marketCity>    <signal  relative="5">strong</signal>    <url  typeId="1"  type="Organization  Home  Page"  title="WAMU  88.5  Homepage"></url>    <url  typeId="2"  type="Program  Schedule"  title="Program  Schedule"></url>    <url  typeId="4"  type="Pledge  Page"  title="Support  WAMU"></url>    <url  typeId="7"  type="Audio  Stream"  title="Listen  to  WAMU  88.5"></url>    <url  typeId="9"  type="Podcast"  title="WAMU:  Metro  Connection"></url>    <url  typeId="9"  type="Podcast"  title="The  Diane  Rehm  Show:  Friday  News  Roundup"></url>    <url  typeId="9"  type="Podcast"  title="WAMU:  The  Kojo  Nnamdi  Show"></url>    <url  typeId="9"  type="Podcast"  title="WAMU:  The  Politics  Hour"></url>    <image  type="logo"></image>    <tagline>Your  NPR  News  Station  In  the  Nations  Capital</tagline></station> 67
  68. 68. #meetcontentPlanning content: Structured content 68
  69. 69. #meetcontentPlanning content: Hierarchy Making decisions, influencing meaning. 69
  70. 70. #meetcontentPlanning content: Hierarchy 70
  71. 71. #meetcontentMaking content responsive: Hierarchy 71
  72. 72. #meetcontentPlanning content: Hierarchy or Via 72
  73. 73. “ Most news sites ... have a single presentation that rarely deviates. ... We always thought it should be the other way around. The layout should change to reflect the content. So we designed several flexible approaches that anticipate news situations. Tito Bottitta Upstatement
  74. 74. #meetcontent “Known unknowns”Known unknowns 74
  75. 75. #meetcontentPlanning content: “Known unknowns”• Search engine optimization (SEO) and analytics recommendations-for-building-smartphone.html• Responsive images Via Mat Marquis 75
  76. 76. Test your content inmultiple contexts, seehow it behaves andadjust accordingly.
  77. 77. “ Technology will change. Standards will evolve. But the need for understanding our content—its purpose, meaning, structure, relationships, and value—will remain. When we can embrace this thinking, we will unshackle our content—confident it will live on, heart intact, as it travels into the great future unknown. Sara Wachter-Boettcher
  78. 78. @meetcontent
  79. 79. #meetcontent Mark your calendar! Reimagine Content in Higher Education Rick Allen • July 17, 2012 Cost: FREE Sign-up: