Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Creating and Planning Content for Responsive Web Designs

2,542 views

Published on

Delivered at the 2012 Penn State Web Conference.

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

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 http://www.flickr.com/photos/rbowen/2446689941/
  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. http://www.comscore.com/Press_Events/ 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. http://pewinternet.org/Reports/2012/Smartphone- 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 http://www.emarketer.com/Article.aspx? R=1009014&ecid=a6506033675d47f881651943c21c5ed4 7
  12. 12. #psuweb12 @radiofreegeorgyGoing 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_Scho ol_Students.php 8
  13. 13. #psuweb12 @radiofreegeorgyGoing mobile State of the News Media 2012 Pew Research Centers Project for Excellence in Journalism http://stateofthemedia.org/ 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. http://www.comscore.com/Press_Events/ 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 http://www.flickr.com/photos/32615508@N02/3047982712/
  21. 21. #psuweb12 @radiofreegeorgy ...or this? The mobile use case 17http://www.flickr.com/photos/carbonnyc/5140154965/
  22. 22. Where arehttp://www.flickr.com/photos/albertoalerigi/2886121661/ we going?
  23. 23. Let’s build oursites for our users,wherever they are,however they arefinding us. http://www.flickr.com/photos/gsfc/6760135001/ 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. http://www.knightdigitalmediacenter.org/leadership_blog/comments/ 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 / http://instagr.am/p/ne9Tq/ 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 http://www.flickr.com/photos/the4mahers/5425731313/
  32. 32. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ ...the most exciting thing to happen to content strategy since the Excel spreadsheet. - Karen McGrane http://karenmcgrane.com/2011/12/14/mobile-content-strategy/ 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 http://karenmcgrane.com/2011/12/14/mobile-content-strategy/ 30
  35. 35. #psuweb12 @radiofreegeorgyIntroducing responsive web design “ Start with the content, not the device. - Jeremy Keith http://adactio.com/journal/4523/ 31
  36. 36. #psuweb12 @radiofreegeorgyIntroducing responsive web design Content should be consistent across devices. Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/ 32
  37. 37. #psuweb12 @radiofreegeorgyIntroducing responsive web design Content is unpredictable, but it shouldn’t be random. Steve Garfield via Instagram / http://instagr.am/p/ne9Tq/ 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. http://woychickdesign.wordpress.com/2012/01/30/adaptation/ 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, 2012http://www.flickr.com/photos/tabor-roeder/4308200246/ http://www.alistapart.com/articles/future-ready-content/
  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. http://bradfrostweb.com/blog/web/for-a-future-friendly-web/ 38
  43. 43. ] How do we make our content a “fluid thing”? 39 http://www.flickr.com/photos/gfrphoto/1695650382/
  44. 44. How do we prepare our content for the future? 40 http://www.flickr.com/photos/brunoderegge/4974522829/
  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 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.) 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 http://www.flickr.com/photos/dollarside/5326443055/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 54
  59. 59. #psuweb12 @radiofreegeorgyPlanning content: WritingHire better writers.“When content doesn’t workwell on responsive sites, it’sglaringly obvious.” - Sara Wachter-Boettcher http://www.flickr.com/photos/dollarside/5326443055/http://collegewebeditor.com/blog/index.php/archives/2012/05/01/why-do-highered-responsive-websites-need-more-responsible-content/ 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 http://www.flickr.com/photos/cambodia4kidsorg/260004685/ 59
  64. 64. #psuweb12 @radiofreegeorgyPlanning content: Structured content Nimble Rachel Lovinger, Razorfish 2010 nimble.razorfish.com 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” 61http://www.flickr.com/photos/feeferlump/5982260735/
  66. 66. What is nimble content? • Well-structured • Well-defined • Well-described Rachel Lovinger, “Nimble” 62http://www.flickr.com/photos/feeferlump/5982260735/
  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 http://www.flickr.com/photos/pkg/6792738213/
  70. 70. #psuweb12 @radiofreegeorgyPlanning content: Structured content Dress your content in layers so it’s ready for any weather (or device) it may encounter. http://www.flickr.com/photos/qole/405915600/ 66
  71. 71. #psuweb12 @radiofreegeorgyPlanning content: Structured content The role of the CMS http://www.flickr.com/photos/zigazou76/3665789236/ 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">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 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 http://www.flickr.com/photos/jbhthescots/6858612077/
  78. 78. #psuweb12 @radiofreegeorgyPlanning content: Hierarchy or Via http://trentwalton.com/2011/07/14/content-choreography/ 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. http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/ 75
  80. 80. #psuweb12 @radiofreegeorgy “Known unknowns”Known unknowns 76 http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872
  81. 81. #psuweb12 @radiofreegeorgyPlanning content: “Known unknowns”• Search engine optimization (SEO) and analytics Via Jason Grigsby, Cloud Four http://cloudfour.com/responsive-web-design-business-challenges/ and 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/ 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 http://www.alistapart.com/articles/future-ready-content/ 79
  84. 84. Thank you! Questions?www.takethecrosstown.comTwitter: #psuweb12 @radiofreegeorgy

×