Creating and Planning Content for Responsive Web Design

1. #meetcontent Creating and Planning Content for Responsive Web Designs Georgy Cohen @radiofreegeorgy

2. #meetcontent About me 2 http://www.ﬂickr.com/photos/rbowen/2446689941/

3. #meetcontent Going mobile “ These are weird times for publishing. Erin Kissane Confab May 9, 2011 3

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. #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. #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. #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. #meetcontent Going mobile State of the News Media 2012 Pew Research Center's Project for Excellence in Journalism http://stateofthemedia.org/ 8

9. #meetcontent Going mobile “ Digital Devices inﬂuence 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. #meetcontent Going mobile Same site, different devices - different content! 10

14. It’s time to revisit our assumptions about the mobile use case.

15. #meetcontent The mobile use case Is it this... 15 http://www.ﬂickr.com/photos/32615508@N02/3047982712/

16. #meetcontent ...or this? The mobile use case 16 http://www.ﬂickr.com/photos/carbonnyc/5140154965/

17. Where are http://www.ﬂickr.com/photos/albertoalerigi/2886121661/ we going?

18. Let’s build our sites for our users, wherever they are, however they are ﬁnding us.

19. #meetcontent Introducing responsive web design 19

20. #meetcontent Introducing responsive web design “ Rather than quarantining our content into disparate, device-speciﬁc experiences, we can use [technology] to progressively enhance our work within different viewing contexts. 20

21. #meetcontent 21

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 ﬁrst, 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_ﬁrst/ 22

23. #meetcontent Introducing responsive web design Content should be consistent across devices. Steve Garﬁeld via Instagram / http://instagr.am/p/ne9Tq/ 23

24. #meetcontent #meetcontent 24

25. #meetcontent 25

26. #meetcontent It’s everywhere! What about us? (You know, the content people.) 26 http://www.ﬂickr.com/photos/the4mahers/5425731313/

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. #meetcontent What about us? (You know, the content people.) 28

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. “ Start with the content, not the device. Jeremy Keith http://adactio.com/journal/4523/ 30

31. #meetcontent Introducing responsive web design Content should be consistent across devices. Steve Garﬁeld via Instagram / http://instagr.am/p/ne9Tq/ 31

32. Content is unpredictable, but it shouldn’t be random.

33. #meetcontent Introducing responsive web design Same site, different devices - different content! 33

34. “ Responsive websites use new technologies and better browser support to rearrange, resize, add or subtract content to ﬁt 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. “ Future-ready content [is] about seeing structures through the lens of meaning and storytelling, and building relationships across disciplines so that our databases reﬂect this richness and complexity. - Sara Wachter-Boettcher Feb. 28, 2012 http://www.ﬂickr.com/photos/tabor-roeder/4308200246/ http://www.alistapart.com/articles/future-ready-content/

36. “ Think of your core content as a ﬂuid 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. ] How do we make our content a “ﬂuid thing”? 37 http://www.ﬂickr.com/photos/gfrphoto/1695650382/

38. How do we prepare our content for the future? 38 http://www.ﬂickr.com/photos/brunoderegge/4974522829/

39. Content goals are more important than ever.

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. John M. Rogerson Our current "responsive" iteration is focused on providing content ﬁrst, navigation second. We build out "mobile ﬁrst" (for want of a better term).

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. 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. 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. 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. 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 ﬁve 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 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. #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. #meetcontent Planning content: Writing Let go of pixel perfection. 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 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. “ 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. #meetcontent Planning content: Writing 54

55. #meetcontent Planning content: Writing vs. 55

56. #meetcontent Planning content: Writing 56

57. #meetcontent Planning content for responsive web designs Structured content http://www.ﬂickr.com/photos/cambodia4kidsorg/260004685/ 57

58. #meetcontent Planning content: Structured content Nimble Rachel Lovinger, Razorﬁsh 2010 nimble.razorﬁsh.com 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.razorﬁsh.com 59

60. What is nimble content? • Well-structured • Well-deﬁned • Well-described Rachel Lovinger, “Nimble” 60 http://www.ﬂickr.com/photos/feeferlump/5982260735/

61. #meetcontent Planning content: Structured content Jason Scott, Sept. 28, 2011 Photo by Erin Kissane 61

62. #meetcontent Planning content: Structured content 62

63. #meetcontent Making content responsive: Structured content vs. 63 http://www.ﬂickr.com/photos/pkg/6792738213/

64. Dress your content in layers so it’s ready for any weather (or device) it may encounter.

65. #meetcontent Planning content: Structured content The role of the CMS http://www.ﬂickr.com/photos/zigazou76/3665789236/ 65

66. #meetcontent Planning content: Structured content Create Once, Publish Everywhere Learn how to COPE 66

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. #meetcontent Planning content: Structured content 68

69. #meetcontent Planning content: Hierarchy Making decisions, inﬂuencing meaning. 69

70. #meetcontent Planning content: Hierarchy 70

71. #meetcontent Making content responsive: Hierarchy 71 http://www.ﬂickr.com/photos/jbhthescots/6858612077/

72. #meetcontent Planning content: Hierarchy or Via http://trentwalton.com/2011/07/14/content-choreography/ 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 http://upstatement.com/blog/2012/01/finding-the-look-feel-of-bostonglobe-com/ 73

74. #meetcontent “Known unknowns” Known unknowns 74 http://www.defense.gov/photos/newsphoto.aspx?newsphotoid=4872

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. Test your content in multiple contexts, see how it behaves and adjust 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—conﬁdent 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. #meetcontent meetcontent.com @meetcontent

79. #meetcontent Mark your calendar! Reimagine Content in Higher Education Rick Allen • July 17, 2012 Cost: FREE Sign-up: http://mcont.co/071712webinar 79

Creating and Planning Content for Responsive Web Design

You are reading a preview.

Check these out next

Creating and Planning Content for Responsive Web Design

More Related Content

Slideshows for you (20)

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

More from meetcontent (10)

Recently uploaded (20)