Successfully reported this slideshow.
Your SlideShare is downloading. ×

Creating and Planning Content for Responsive Web Design

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 79 Ad

Creating and Planning Content for Responsive Web Design

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Similar to Creating and Planning Content for Responsive Web Design (20)

Advertisement

Recently uploaded (20)

Advertisement

Creating and Planning Content for Responsive Web Design

  1. 1. #meetcontent Creating and Planning Content for Responsive Web Designs Georgy Cohen @radiofreegeorgy
  2. 2. #meetcontent About me 2 http://www.flickr.com/photos/rbowen/2446689941/
  3. 3. #meetcontent Going mobile “ These are weird times for publishing. Erin Kissane Confab May 9, 2011 3
  4. 4. #meetcontent Going 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. http://www.comscore.com/Press_Events/ Presentations_Whitepapers/2011/Digital_Omnivores 4
  5. 5. #meetcontent Going 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 http://pewinternet.org/Reports/2012/Smartphone- Update-2012/Findings.aspx U.S. adults reported owning a smartphone 5
  6. 6. #meetcontent Going mobile The Smartphone Class Connected Consumers Transform US Commerce and Culture, May 2012 http://www.emarketer.com/Article.aspx? R=1009014&ecid=a6506033675d47f881651943c21c5ed4 6
  7. 7. #meetcontent Going mobile The Mobile Browsing Behaviors and Expectations of College-Bound High School Students February 2012 http://omniupdate.com/assets/whitepapers/ Mobile_Browsing_Behaviors_and_Expectations_of_College_Bound_High_Sc hool_Students.php 7
  8. 8. #meetcontent Going mobile State of the News Media 2012 Pew Research Center's Project for Excellence in Journalism http://stateofthemedia.org/ 8
  9. 9. #meetcontent Going 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. http://www.comscore.com/Press_Events/ Presentations_Whitepapers/2011/Digital_Omnivores 9
  10. 10. #meetcontent Going mobile Same site, different devices - different content! 10
  11. 11. #meetcontent Going mobile Same site, different devices - different content! 11
  12. 12. #meetcontent Going mobile Same site, different devices - different content! 12
  13. 13. #meetcontent Going mobile Same site, different devices - different content! 13
  14. 14. It’s time to revisit our assumptions about the mobile use case.
  15. 15. #meetcontent The mobile use case Is it this... 15 http://www.flickr.com/photos/32615508@N02/3047982712/
  16. 16. #meetcontent ...or this? The mobile use case 16 http://www.flickr.com/photos/carbonnyc/5140154965/
  17. 17. Where are http://www.flickr.com/photos/albertoalerigi/2886121661/ we going?
  18. 18. Let’s build our sites for our users, wherever they are, however they are finding us.
  19. 19. #meetcontent Introducing responsive web design 19
  20. 20. #meetcontent Introducing 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. #meetcontent Introducing 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. http://www.knightdigitalmediacenter.org/leadership_blog/comments/ 20111220_luke_wroblewski_on_how_news_organizations_can_go_mobile_first/ 22
  23. 23. #meetcontent Introducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/ 23
  24. 24. #meetcontent #meetcontent 24
  25. 25. #meetcontent 25
  26. 26. #meetcontent It’s everywhere! What about us? (You know, the content people.) 26 http://www.flickr.com/photos/the4mahers/5425731313/
  27. 27. “ [Responsive web design is] the most exciting thing to happen to content strategy since the Excel spreadsheet. Karen McGrane http://karenmcgrane.com/2011/12/14/mobile-content-strategy/ 27
  28. 28. #meetcontent What about us? (You know, the content people.) 28
  29. 29. #meetcontent “ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane http://karenmcgrane.com/2011/12/14/mobile-content-strategy/ 29
  30. 30. “ Start with the content, not the device. Jeremy Keith http://adactio.com/journal/4523/ 30
  31. 31. #meetcontent Introducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/ 31
  32. 32. Content is unpredictable, but it shouldn’t be random.
  33. 33. #meetcontent Introducing responsive web design Same 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 http://woychickdesign.wordpress.com/2012/01/30/adaptation/ 34
  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 http://www.flickr.com/photos/tabor-roeder/4308200246/ http://www.alistapart.com/articles/future-ready-content/
  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 http://bradfrostweb.com/blog/web/for-a-future-friendly-web/ 36
  37. 37. ] How do we make our content a “fluid thing”? 37 http://www.flickr.com/photos/gfrphoto/1695650382/
  38. 38. How do we prepare our content for the future? 38 http://www.flickr.com/photos/brunoderegge/4974522829/
  39. 39. Content goals are more important than ever.
  40. 40. #meetcontent Responsive 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. Rogerson Our current "responsive" iteration is focused 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 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.
  43. 43. Brett Pollak [The campus web steering committee] understood that this was a new thing. ... We cited emerging best practices and iterated through that process.
  44. 44. Erik Runyon On subpages, the content is primarily identical for all devices as we didn't want to make assumptions about the intent of the user based on device.
  45. 45. Jessica M. Sparks I would say until you layout wireframes in a side-by-side way you really can't comprehend how different the 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 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.
  50. 50. #meetcontent Note: Notrehigher ed Responsive 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 http://mcont.co/ 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. #meetcontent Planning content: Writing Let go of pixel perfection. 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 http://www.econtentmag.com/Articles/Column/Flexing-Your-Content/Spectacular-Content- Experiences-Require-Writers-to-Think-Differently-81707.htm?utm_source=dlvr.it&utm_medium=twitter 52
  53. 53. “ When content doesn’t work well on responsive sites, it’s glaringly obvious. Sara Wachter-Boettcher http://collegewebeditor.com/blog/index.php/archives/2012/05/01/why-do-highered-responsive- websites-need-more-responsible-content/ 53
  54. 54. #meetcontent Planning content: Writing 54
  55. 55. #meetcontent Planning content: Writing vs. 55
  56. 56. #meetcontent Planning content: Writing 56
  57. 57. #meetcontent Planning content for responsive web designs Structured content http://www.flickr.com/photos/cambodia4kidsorg/260004685/ 57
  58. 58. #meetcontent Planning content: Structured content Nimble Rachel Lovinger, Razorfish 2010 nimble.razorfish.com 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.com 59
  60. 60. What is nimble content? • Well-structured • Well-defined • Well-described Rachel Lovinger, “Nimble” 60 http://www.flickr.com/photos/feeferlump/5982260735/
  61. 61. #meetcontent Planning content: Structured content Jason Scott, Sept. 28, 2011 Photo by Erin Kissane 61
  62. 62. #meetcontent Planning content: Structured content 62
  63. 63. #meetcontent Making content responsive: Structured content vs. 63 http://www.flickr.com/photos/pkg/6792738213/
  64. 64. Dress your content in layers so it’s ready for any weather (or device) it may encounter.
  65. 65. #meetcontent Planning content: Structured content The role of the CMS http://www.flickr.com/photos/zigazou76/3665789236/ 65
  66. 66. #meetcontent Planning content: Structured content Create Once, Publish Everywhere Learn how to COPE 66
  67. 67. #meetcontent Planning 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">http://wamu.org</url>    <url  typeId="2"  type="Program  Schedule"  title="Program  Schedule">http://wamu.org/programs/schedule/</ url>    <url  typeId="4"  type="Pledge  Page"  title="Support  WAMU">http://www.wamu.org/support/membership/campaign/ </url>    <url  typeId="7"  type="Audio  Stream"  title="Listen  to  WAMU  88.5">http://wamu.org/listen/</url>    <url  typeId="9"  type="Podcast"  title="WAMU:  Metro  Connection">http://www.npr.org/templates/rss/ podcast.php?id=510081</url>    <url  typeId="9"  type="Podcast"  title="The  Diane  Rehm  Show:  Friday  News  Roundup">http://www.npr.org/ templates/rss/podcast.php?id=510024</url>    <url  typeId="9"  type="Podcast"  title="WAMU:  The  Kojo  Nnamdi  Show">http://www.npr.org/templates/rss/ podcast.php?id=510206</url>    <url  typeId="9"  type="Podcast"  title="WAMU:  The  Politics  Hour">http://www.npr.org/templates/rss/ podcast.php?id=510207</url>    <image  type="logo">http://media.npr.org/images/stations/logos/wamu_fm.gif</image>    <tagline>Your  NPR  News  Station  In  the  Nation's  Capital</tagline> </station> 67
  68. 68. #meetcontent Planning content: Structured content 68
  69. 69. #meetcontent Planning content: Hierarchy Making decisions, influencing meaning. 69
  70. 70. #meetcontent Planning content: Hierarchy 70
  71. 71. #meetcontent Making content responsive: Hierarchy 71 http://www.flickr.com/photos/jbhthescots/6858612077/
  72. 72. #meetcontent Planning content: Hierarchy or Via http://trentwalton.com/2011/07/14/content-choreography/ 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 http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/ 73
  74. 74. #meetcontent “Known unknowns” Known unknowns 74 http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872
  75. 75. #meetcontent Planning content: “Known unknowns” • Search engine optimization (SEO) and analytics http://googlewebmastercentral.blogspot.com/2012/06/ recommendations-for-building-smartphone.html • Responsive images http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872 Via Mat Marquis http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/ 75
  76. 76. Test your content in multiple contexts, see how it behaves and adjust 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 http://www.alistapart.com/articles/future-ready-content/ 77
  78. 78. #meetcontent meetcontent.com @meetcontent
  79. 79. #meetcontent Mark your calendar! Reimagine Content in Higher Education Rick Allen • July 17, 2012 Cost: FREE Sign-up: http://mcont.co/071712webinar 79

×