Creating and Planning Content for Responsive Web Designs


Published on

Delivered at the 2012 Penn State Web Conference.

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

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • our jobs are getting harder (or maybe, actually, they’re getting easier)\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • so if I am a sports fan and I go to a lot, I may go on my laptop at work, my phone from my couch, and my iPad from bed. Different devices, but I have the same content needs. \n
  • there was a decision made here - “you only want this content” but what if i want more?\nImpact on brand, messaging consistency\n\nHow many times do you click on a webpage and it says that content can’t be viewed on mobile? Brad Frost advocates for content parity on the web. -\n
  • \n
  • Girls Under Trees\n
  • It goes both ways - more is not necessarily better. Maybe the contnet strategy need is greater for the main site\n
  • \n
  • \n
  • \n
  • - What’s driving our decisions around content? \nAre we really taking users’ needs and behaviors into account?\n- Mobile and device proliferation doesn’t mean losing control, but we are acquiring the responsibility to plan better, really KNOW and understand our audience, their goals and behaviors. more important than broad assumptions based on device data.\n\n\n\nAre we creating separate websites and apps for separate contexts and devices that not only waste our time and money but do our users a disservice?\n\n
  • We need to think of our users. We can’t make content decisions for them.\n We must understand that the future is mobile.\n\n
  • May 2010 - article on A List Apart - book came out June 2011 \n
  • \n
  • \n
  • What Luke said in interview with Knight Digital media Center on news orgs going “mobile first”\nThink back to Berkeley example\n\n
  • Launched Sept. 2011\n
  • \n
  • \n
  • \n
  • Unpredictable but not random- Content strategy\n
  • \n
  • \n
  • This frees us up to focus attention where it belongs - on the content.\nlet’s not worry about android versus iphone versus ipad v ersus kindle fire\n
  • this is what we are striving for. when I look at or, no matter where I am, i should have consistent access to content.\n
  • this is what we are striving for. when I look at or, no matter where I am, i should have consistent access to content.\n
  • - It may seem daunting to have all of these devices to worry about, but don’t think about it in terms of devices, just think about it as making the right decisions and assigning correct priorities to your content, trusting content strategy to help you prepare for the unpredictable. \n- know what you want your content to do and empower it to do so \n- goals, relationships, priorities\n
  • requires us to think harder around planning content - but we can’t do it alone\n
  • It takes a holistic approach to make this work- Successful web publications will reflect a close partnership between content, technical and design professionals. A responsive approach naturally fits this mold.\n
  • A List Apart article on “Future Ready Content”\nLet meaning and intent lead the way, and prepare your content to support that intent in any context\n
  • FF: 1. Acknowledge and embrace unpredictability 2. Think and behave in a future-friendly way 3. Help others do the same.” We can’t make assumptions about what our users want, or what device they’ll be using today, tomorrow or a year from now. We need to plan for any eventuality.\n
  • so this prompts a couple of important questions\n
  • \n
  • Here are some new truths we need to embrace to answer those questions- Content goals will inform our decision-making and planning for contentin a responsive web design.\n - We need to make decisions about content at multiple levels now.\n
  • \n
  • I'd argue the biggest factor that allows us to be responsive is that we use a CMS that doesn't determine the markup you use and lends itself extremely well to "content modeling"\n
  • - It is the same architecture with the same content we had before. There is no content visibility differences, except for a prominent multi-tab window on our home page.\n-Though I sometimes wish we had more time to consider screen size implications to content, I am less concerned b/c we keep site content focused on needs of target users and b/c small screen does not nec. indicate mobile context\n
  • CWSC weighed in on idea on how things would shape up in terms of break points.\nthat we hadn’t really been done much in higher ed so a lot of it was trial and error.C\n
  • \n
  • \n
  • \n
  • \n
  • (navigation high, side bar content lowest on the page, and body content in the middle, images/banners removed).\n
  • Our key to content success was content strategy planning.\nFrom there, the designers were somewhat free to interpret those elements into a responsive design. \n
  • \n
  • from the folks at the Boston Globe\nYou will get the occasional widow. It’s okay. Let the headline serve the story, not the space.\ncomment yesterday re  \n
  • \n
  • (Because content takes priority) Higher ed has always produced a lot of content, typically by many different people—and, in many institutions, those people’s skill sets often vary widely, This has always caused some challenges, but I think the advent of responsive design in higher ed is going to make those challenges more apparent,\n
  • again, it comes down to content authors. support them.\n
  • Blob vs. Chunk\nkaren mc grane\n
  • wysiwyg goes byebye\nWhat about what dmolsen is saying\n
  • markup for content - inform where it goes and what it meansmeaningful structure can inform visualization and thus better interpretation/presentation of information - convey meaning more effectivelyContent needs to be structured in order to be free - content as dataThis includes Instapaper, Readability, Longform\n
  • travel freely - socially enabled, mobile friendly, on demand\nretain context and meaning - source, usage, relationships \nnew products - reusable, engaging, profitable, time to market (apps)\n
  • Kissane and McGrane at Confab-- the page is over, we are preparing packages of ideas → freer\n
  • \n
  • meaning and intent, purpose and wheels\n
  • Here’s one way to think about it. Here’s a bear eating a sandwich in a funny hat.\n
  • Now here’s a bear. From context, we can tell he’s Paddington Bear. He has tags that say “Please look after this bear, thank you” and “Wanted on Voyage” So we have more information about this content now. That information shapes the story and our understanding of the content\n
  • - equipping content with metadata and markup helps mobilize it to be prioritized in a responsive context. metadata + human judgment = smart content- make your content able to do anything, go anywhere\n
  • Yes - CMS can help us avoid duplicate content acorss different web experiences and support effective multichannel publishing. But the CMS has to be structured and manage appropriately, and that’s not jsut a technical thing. That also comes back to supporting contnet authors.\n
  • can’t let CMS guide contnet decisions - content is too important (esp. if IT is organizationally in the lead of web)\nCleve Gibbons quote - CMS is people, process, content and technology, but it is often only thought of (and funded as) the latter.\n
  • API, or Application Programming Interface: a way for two computer applications to talk to each other in a common language that they both understand. As Notre Dame’s web developers call it, “any interface that allows for easy manipulation of data”\nNPR's API is a content API, which essentially provides a structured way for other computer applications to get NPR stories in a predictable, flexible and powerful way.\nComputers don’t understand you going, “Well, it’s a story about this guy, and he’s really cool...” they need data.\nThe Station Finder API can be used to identify local NPR member stations based on zip code, city/state, unique ID, call letters or longitude/latitude.\n\n
  • The right CMS is the solution to creating adaptive contnet via metadata\n
  • Content may get shifted down, or bundled into a dropdown. This affects priorities and messaging and can impact meaning, how a user processes the information on the page. These are not decisions that a designer or developer should be in charge of making. They should be made together.We have to be more thoughtful in deciding what content is on the page in any given context. Makes us prioritize and establish hierachy with user at top of mind.\n\n
  • Spot the differences\nThink through the hierarchy of content elements\nWhen do you need a short description or a thumbnail image? When are they less necessary? \n
  • content choreography - web designer trent walton - interdigitation\n\n
  • content choreography - web designer trent walton - interdigitation\n\n
  • The folks at the Boston Globe say, Pay attention to page flow and reordering.-interrelationships between different content types, sections, structures -we’re the ones thinking about the brand and the goals and the purpose and the audience. That all needs to inform how our content performs in a responsive design.\n\n\n
  • \n
  • SEO - Google’s bots favor separate mobile sites, not RWD sites\nAnalytics - Sites using RWD will need to choose between more accurate data about the total mobile traffic (server-side tracking code) or deeper info about a small set of visitors (JavaScript tracking code).\nResponsive images - no graceful solution currently for images - on Globe redesign, went Mobile First, challenge is how to recognize multiple source files and serve appropriate fallback content if necessayr - problem with detecting both screen resolution AND bandwidth - W3C group convened\nResponsive text - an interesting wrinkle - Serve different text options depending on context\n
  • \n
  • \n
  • \n
  • Creating and Planning Content for Responsive Web Designs

    1. 1. Creating and Planning Contentfor Responsive Web DesignsGeorgy Cohen@radiofreegeorgy / @crosstowncommJune 12, 2012#psuweb12
    2. 2. #psuweb12 @radiofreegeorgyAbout me 2
    3. 3. #psuweb12 @radiofreegeorgyAbout me 2
    4. 4. #psuweb12 @radiofreegeorgyAbout me 2
    5. 5. #psuweb12 @radiofreegeorgyAbout me 2
    6. 6. #psuweb12 @radiofreegeorgyAbout me 2
    7. 7. #psuweb12 @radiofreegeorgyAbout me 3
    8. 8. #psuweb12 @radiofreegeorgyGoing mobile “ These are weird times for publishing. – Erin Kissane, Confab May 9, 2011 4
    9. 9. #psuweb12 @radiofreegeorgyGoing mobile“ Digital Today, half of the total Omnivores U.S. mobile population How Tablets, uses mobile media. ... Smartphones and Connected Devices The growth in mobile are Changing media use is driven by U.S. Digital Media the increase in Consumption Habits October 2011 smartphone adoption. Presentations_Whitepapers/2011/Digital_Omnivores 5
    10. 10. #psuweb12 @radiofreegeorgyGoing mobile • 46 percent of American adults own a Smartphone 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 U.S. Update-2012/Findings.aspx adults reported owning a smartphone 6
    11. 11. #psuweb12 @radiofreegeorgyGoing mobile The Smartphone Class Connected Consumers Transform US Commerce and Culture May 2012 R=1009014&ecid=a6506033675d47f881651943c21c5ed4 7
    12. 12. #psuweb12 @radiofreegeorgyGoing mobile The Mobile Browsing Behaviors and Expectations of College-Bound High School Students February 2012 Mobile_Browsing_Behaviors_and_Expectations_of_College_Bound_High_Scho ol_Students.php 8
    13. 13. #psuweb12 @radiofreegeorgyGoing mobile State of the News Media 2012 Pew Research Centers Project for Excellence in Journalism 9
    14. 14. #psuweb12 @radiofreegeorgyGoing 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 exist in isolation of one are Changing another, but have a U.S. Digital Media Consumption Habits complementary relationship October 2011 in consumers’ lives. Presentations_Whitepapers/2011/Digital_Omnivores 10
    15. 15. #psuweb12 @radiofreegeorgyGoing mobileSame site, different devices - different content! 11
    16. 16. #psuweb12 @radiofreegeorgyGoing mobileSame site, different devices - different content! 12
    17. 17. #psuweb12 @radiofreegeorgyGoing mobileSame site, different devices - different content! 13
    18. 18. #psuweb12 @radiofreegeorgyGoing mobileSame site, different devices - different content! 14
    19. 19. It’s time to revisit our assumptions aboutthe mobile use case. 15
    20. 20. #psuweb12 @radiofreegeorgyThe mobile use caseIs it this... 16
    21. 21. #psuweb12 @radiofreegeorgy ...or this? The mobile use case 17
    22. 22. Where are we going?
    23. 23. Let’s build oursites for our users,wherever they are,however they arefinding us. 19
    24. 24. #psuweb12 @radiofreegeorgyIntroducing responsive web design 20
    25. 25. #psuweb12 @radiofreegeorgyIntroducing 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. 21
    26. 26. #psuweb12 @radiofreegeorgy 22
    27. 27. #psuweb12 @radiofreegeorgyIntroducing 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/ 23
    28. 28. #psuweb12 @radiofreegeorgyIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 24
    29. 29. #psuweb12 @radiofreegeorgy 25
    30. 30. #psuweb12 @radiofreegeorgy 26
    31. 31. #psuweb12 @radiofreegeorgyIt’s everywhere! What about us? (You know, the content people.) 27
    32. 32. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane 28
    33. 33. #psuweb12 @radiofreegeorgyIt’s everywhere! What about us? (You know, the content people.) 29
    34. 34. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane 30
    35. 35. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ Start with the content, not the device. - Jeremy Keith 31
    36. 36. #psuweb12 @radiofreegeorgyIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / 32
    37. 37. #psuweb12 @radiofreegeorgyIntroducing responsive web design Content is unpredictable, but it shouldn’t be random. Steve Garfield via Instagram / 33
    38. 38. #psuweb12 @radiofreegeorgyIntroducing responsive web designSame site, different devices -- different content! 34
    39. 39. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ 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. 35
    40. 40. #psuweb12 @radiofreegeorgyIntroducing responsive web design This is a job for Voltron! 36
    41. 41. “ 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
    42. 42. #psuweb12 @radiofreegeorgyIntroducing responsive web design“ 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. 38
    43. 43. ] How do we make our content a “fluid thing”? 39
    44. 44. How do we prepare our content for the future? 40
    45. 45. #psuweb12 @radiofreegeorgyPlanning content for responsive web designs• Content goals are more important than ever.• There is no page, no single container, no single grid, no single answer. 41
    46. 46. #psuweb12 @radiofreegeorgyResponsive 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.) 42
    47. 47. John M. Rogerson“ Our current "responsive" iteration is focused on providing content first, navigation second. We build out "mobile first" (for want of a better term).
    48. 48. Anthony Bosio ... [We] make decisions about the best order for“ the content in that form and rely on CSS to present the content as needed for various screen widths. This practice pre-dates responsive design in our shop because content order was always an important consideration for accessibility.
    49. 49. Brett Pollak“ [The campus web steering committee] understood that this was a new thing. ... We cited emerging best practices and iterated through that process.
    50. 50. Erik Runyon“ On subpages, the content is primarily identical for all devices as we didnt want to make assumptions about the intent of the user based on device.
    51. 51. Jessica M. SparksI would say until you layoutwireframes in a side-by-side way youreally cant comprehend how differentthe content will look and feel.
    52. 52. Graphic courtesy of the Wright State University Web Team
    53. 53. Graphic courtesy of the Wright State University Web Team
    54. 54. “ 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
    55. 55. Sarah Clayton“ Based on objectives for the Regent College website, our web agency developed individualized content plans for each section/ page, that included purpose of page, key messaging, and content hierarchy.
    56. 56. #psuweb12 @radiofreegeorgyResponsive web design, content and higher ed Note: Notre Dame’s Erik• Content goals are more Runyon keeps a list of important than ever. Theyhigher ed RWD sites 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.) 52
    57. 57. #psuweb12 @radiofreegeorgyPlanning content: Writing Let go of pixel perfection. 53
    58. 58. #psuweb12 @radiofreegeorgyPlanning content: WritingHire better writers.“The real value of writers isto use their creativity to craftcontent that software andcomputing devices candeliver in meaningful ways tothose who need it.” - Scott Abel 54
    59. 59. #psuweb12 @radiofreegeorgyPlanning content: WritingHire better writers.“When content doesn’t workwell on responsive sites, it’sglaringly obvious.” - Sara Wachter-Boettcher 55
    60. 60. #psuweb12 @radiofreegeorgyPlanning content: Writing 56
    61. 61. #psuweb12 @radiofreegeorgyPlanning content: Writing vs. 57
    62. 62. #psuweb12 @radiofreegeorgyPlanning content: Writing 58
    63. 63. #psuweb12 @radiofreegeorgyPlanning content for responsive web designs Structured content 59
    64. 64. #psuweb12 @radiofreegeorgyPlanning content: Structured content Nimble Rachel Lovinger, Razorfish 2010 60
    65. 65. “ 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, “Nimble” 61
    66. 66. What is nimble content? • Well-structured • Well-defined • Well-described Rachel Lovinger, “Nimble” 62
    67. 67. #psuweb12 @radiofreegeorgyPlanning content: Structured content Structured content has a lot to do with standards- compliant metadata that reinforces the separation of information from design. Jason Scott, Sept. 28, 2011 Photo by Erin Kissane 63
    68. 68. #psuweb12 @radiofreegeorgyPlanning content: Structured content 64
    69. 69. #psuweb12 @radiofreegeorgyMaking content responsive: Structured content vs. 65
    70. 70. #psuweb12 @radiofreegeorgyPlanning content: Structured content Dress your content in layers so it’s ready for any weather (or device) it may encounter. 66
    71. 71. #psuweb12 @radiofreegeorgyPlanning content: Structured content The role of the CMS 67
    72. 72. #psuweb12 @radiofreegeorgyPlanning content: Structured content Create Once, Publish Everywhere Learn how to COPE 68
    73. 73. #psuweb12 @radiofreegeorgyPlanning content: Structured content<station id="305"> The magic of APIs <callLetters>WAMU</callLetters> <band>FM</band> <name>WAMU-FM</name> <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> 69
    74. 74. #psuweb12 @radiofreegeorgyPlanning content: Structured content 70
    75. 75. #psuweb12 @radiofreegeorgyPlanning content: Hierarchy Making decisions, influencing meaning. 71
    76. 76. #psuweb12 @radiofreegeorgyPlanning content: Hierarchy 72
    77. 77. #psuweb12 @radiofreegeorgyMaking content responsive: Hierarchy 73
    78. 78. #psuweb12 @radiofreegeorgyPlanning content: Hierarchy or Via 74
    79. 79. #psuweb12 @radiofreegeorgyPlanning content: Hierarchy“ 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. 75
    80. 80. #psuweb12 @radiofreegeorgy “Known unknowns”Known unknowns 76
    81. 81. #psuweb12 @radiofreegeorgyPlanning content: “Known unknowns”• Search engine optimization (SEO) and analytics Via Jason Grigsby, Cloud Four and recommendations-for-building-smartphone.html• Responsive images Via Mat Marquis 77
    82. 82. Knowing is half the battleTest your content in multiplecontexts, see how it behavesand adjust accordingly. 78
    83. 83. #psuweb12 @radiofreegeorgyPlanning content: Our chargeTechnology will change.Standards will evolve.But the need forunderstanding ourcontent—its purpose,meaning, structure, relationships, and value—willremain. When we can embrace this thinking, we willunshackle our content—confident it will live on, heartintact, as it travels into the great future unknown. - Sara Wachter-Boettcher Feb. 28, 2012 79
    84. 84. Thank you! Questions?www.takethecrosstown.comTwitter: #psuweb12 @radiofreegeorgy