Creating and Planning Content for Responsive Web Design

Uploaded 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 …

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

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. #meetcontentCreating and PlanningContent for ResponsiveWeb DesignsGeorgy Cohen@radiofreegeorgy
  • 2. #meetcontentAbout me 2
  • 3. #meetcontentGoing mobile “ These are weird times for publishing. Erin Kissane Confab May 9, 2011 3
  • 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. #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. #meetcontentGoing mobile The Smartphone Class Connected Consumers Transform US Commerce and Culture, May 2012 R=1009014&ecid=a6506033675d47f881651943c21c5ed4 6
  • 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. #meetcontentGoing mobile State of the News Media 2012 Pew Research Centers Project for Excellence in Journalism 8
  • 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. #meetcontentGoing mobileSame site, different devices - different content! 10
  • 11. #meetcontentGoing mobileSame site, different devices - different content! 11
  • 12. #meetcontentGoing mobileSame site, different devices - different content! 12
  • 13. #meetcontentGoing mobileSame site, different devices - different content! 13
  • 14. It’s time to revisit ourassumptions aboutthe mobile use case.
  • 15. #meetcontentThe mobile use caseIs it this... 15
  • 16. #meetcontent ...or this? The mobile use case 16
  • 17. Where are we going?
  • 18. Let’s build our sites forour users, whereverthey are, however theyare finding us.
  • 19. #meetcontentIntroducing responsive web design 19
  • 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. #meetcontent 21
  • 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. #meetcontentIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 23
  • 24. #meetcontent#meetcontent 24
  • 25. #meetcontent 25
  • 26. #meetcontentIt’s everywhere! What about us? (You know, the content people.) 26
  • 27. “ [Responsive web design is] the most exciting thing to happen to content strategy since the Excel spreadsheet. Karen McGrane
  • 28. #meetcontentWhat about us? (You know, thecontent people.) 28
  • 29. #meetcontent“ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane 29
  • 30. “ Start with the content, not the device. Jeremy Keith
  • 31. #meetcontentIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 31
  • 32. Content isunpredictable, but itshouldn’t be random.
  • 33. #meetcontentIntroducing responsive web designSame site, different devices - different content! 33
  • 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. “ 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. “ 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. ] How do we make our content a “fluid thing”? 37
  • 38. How do we prepare our content for the future? 38
  • 39. Content goals are moreimportant than ever.
  • 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. 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. 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. Brett Pollak[The campus web steering committee]understood that this was a new thing. ...We cited emerging best practices anditerated through that process.
  • 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. 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. Graphic courtesy of the Wright State University Web Team
  • 47. Graphic courtesy of the Wright State University Web Team
  • 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. 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. #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. #meetcontentPlanning content: WritingLet go of pixelperfection. 51
  • 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. “ When content doesn’t work well on responsive sites, it’s glaringly obvious. Sara Wachter-Boettcher websites-need-more-responsible-content/53
  • 54. #meetcontentPlanning content: Writing 54
  • 55. #meetcontentPlanning content: Writing vs. 55
  • 56. #meetcontentPlanning content: Writing 56
  • 57. #meetcontentPlanning content for responsive web designsStructuredcontent 57
  • 58. #meetcontentPlanning content: Structured content Nimble Rachel Lovinger, Razorfish 2010 58
  • 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. What is nimble content? • Well-structured • Well-defined • Well-described Rachel Lovinger, “Nimble” 60
  • 61. #meetcontentPlanning content: Structured content Jason Scott, Sept. 28, 2011 Photo by Erin Kissane 61
  • 62. #meetcontentPlanning content: Structured content 62
  • 63. #meetcontentMaking content responsive: Structured content vs. 63
  • 64. Dress your content inlayers so it’s ready forany weather (or device)it may encounter.
  • 65. #meetcontentPlanning content: Structured content The role of the CMS 65
  • 66. #meetcontentPlanning content: Structured content Create Once, Publish Everywhere Learn how to COPE 66
  • 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. #meetcontentPlanning content: Structured content 68
  • 69. #meetcontentPlanning content: Hierarchy Making decisions, influencing meaning. 69
  • 70. #meetcontentPlanning content: Hierarchy 70
  • 71. #meetcontentMaking content responsive: Hierarchy 71
  • 72. #meetcontentPlanning content: Hierarchy or Via 72
  • 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. #meetcontent “Known unknowns”Known unknowns 74
  • 75. #meetcontentPlanning content: “Known unknowns”• Search engine optimization (SEO) and analytics recommendations-for-building-smartphone.html• Responsive images Via Mat Marquis 75
  • 76. Test your content inmultiple contexts, seehow it behaves andadjust accordingly.
  • 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. @meetcontent
  • 79. #meetcontent Mark your calendar! Reimagine Content in Higher Education Rick Allen • July 17, 2012 Cost: FREE Sign-up: