Getting Flexible: Working Content into Responsive Design—MIMA Summit

  • 33,280 views
Uploaded on

Responsive design is about more than can­vases and code. It’s about adopt­ing a flex­i­ble mindset—and that means rethink­ing our con­tent work­flow, too. To create sites that keep mean­ing intact as …

Responsive design is about more than can­vases and code. It’s about adopt­ing a flex­i­ble mindset—and that means rethink­ing our con­tent work­flow, too. To create sites that keep mean­ing intact as they shift and reshape to fit smart­phones and tablets, you need to know which mes­sages are crit­i­cal to meet­ing both busi­ness goals and users’ needs and how con­tent ele­ments should work together to com­mu­ni­cate them. Content strat­egy can answer these questions—if you incor­po­rate it into your project at the right time and place.

(Presented in the Digital Workflow track at the 2012 Minneapolis Interactive Marketing Association Summit)

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
33,280
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
0
Comments
3
Likes
96

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Think about Boston Globe. Guess what they had? \n\n
  • \n
  • \n
  • Working in CS\n Big project, big content-rich state site \n YAY mess to clean up\n Wasn’t so simple\n
  • Working in CS\n Big project, big content-rich state site \n YAY mess to clean up\n Wasn’t so simple\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Transcript

  • 1. GETTING FLEXIBLE working content into responsive design Sara Wachter-Boettcher 2012 MIMA Summitwww.flickr.com/photos/highlimitstudio/2601712041/
  • 2. It started last summer.
  • 3. 2012 MIMA Summit @sara_ann_marie
  • 4. I was hooked. 2012 MIMA Summit @sara_ann_marie
  • 5. It caught on fast.
  • 6. 2012 MIMA Summit @sara_ann_marie
  • 7. Now it’s changingworkflows. 2012 MIMA Summit @sara_ann_marie
  • 8. 2012 MIMA Summit @sara_ann_marie
  • 9. Design in thebrowser. PROTOTYPE! Make it modular.What about wireframes?MOBILE FIRST!Style tiles, not comps.LESS Ditch Photoshop!& SASS 2012 MIMA Summit @sara_ann_marie
  • 10. What does RWD meanfor content? 2012 MIMA Summit @sara_ann_marie
  • 11. ‘‘In order to embrace designing nativelayouts for the web—whatever the device—we need to shed the notion that wecreate layouts from a canvas in.We need to flip it on its head, and createlayouts from the content out. Mark Boulton, “A Richer Canvas” 2012 MIMA Summit @sara_ann_marie
  • 12. This is manageable when things are small.www.flickr.com/photos/subharnab/5548506834
  • 13. Event Event basics basicsTheme Theme OverviewOverview KeynoteKeynote SpeakersSpeakers
  • 14. Big brands aregetting there.
  • 15. But you can’t reach scale overnight.
  • 16. ‘‘The Microsoft.com team built tools,guidelines, and processes to help localizeeverything from responsive images toresponsive content into approximately100 different markets... They adaptedtheir CMS to allow Content Strategists toprogram content on the site. Nishant Kothary, “The Story of the New Microsoft.com” 2012 MIMA Summit @sara_ann_marie
  • 17. Yet, we knowscale can be done.
  • 18. So how’d Boston Globedo it? 2012 MIMA Summit @sara_ann_marie
  • 19. They had editors. Writers.Content people. 2012 MIMA Summit @sara_ann_marie
  • 20. Those people knew afew things:✦ What kinds of content they publish✦ How often✦ What’s most important, when✦ Where content comes from✦ Who’s responsible✦ How it should be organized 2012 MIMA Summit @sara_ann_marie
  • 21. You’re probably not theBoston Globe. 2012 MIMA Summit @sara_ann_marie
  • 22. How can you build acontent-focused workflow? 2012 MIMA Summit @sara_ann_marie
  • 23. First you need a content strategy. 2012 MIMA Summit @sara_ann_marie
  • 24. Content strategyhelps us determine what we should publish,for whom, where, why, when, and how we’llactually get it done. 2012 MIMA Summit @sara_ann_marie
  • 25. It’s about knowing what you’re trying to say.www.flickr.com/photos/theparadigmshifter/
  • 26. And what users actually want. http://xkcd.com/773/
  • 27. It’s a plan to keep yourmessage intact on any screen.
  • 28. It requires taking stock.The content audit✦ What do we have?✦ Is it any good?✦ What’s its form and shape?✦ How can it be organized? 2012 MIMA Summit @sara_ann_marie
  • 29. It requires taking stock.The content audit✦ What do we have?✦ Is it any good?✦ What’s its form and shape?✦ How can it be organized? 2012 MIMA Summit @sara_ann_marie
  • 30. But it’s not just what you have.It’s how it’s stored. 2012 MIMA Summit @sara_ann_marie
  • 31. The CMS often looks like this. 2012 MIMA Summit @sara_ann_marie
  • 32. The CMS often looks like this. CONTENT GOES HERE. 2012 MIMA Summit @sara_ann_marie
  • 33. Because we were planningon this.
  • 34. Because we were planningon this. CONTENT GOES HERE.
  • 35. Now we’ve ended up with this.
  • 36. Now we’ve ended up with this. CONTENT GOES HERE.
  • 37. Big blobs don’t do much forresponsive design. 2012 MIMA Summit @sara_ann_marie
  • 38. It’s time we get a bitmore modular. 2012 MIMA Summit @sara_ann_marie
  • 39. The content audit, revisited✦ What type of content is this?✦ What’s the inherent shape of that sort of content? - Can we identify its pieces and parts? - How are those pieces connected to one another?✦ What does it take to make it whole? - What’s essential for the content to be meaningful? - What’s extra or secondary? 2012 MIMA Summit @sara_ann_marie
  • 40. This will help you find patterns. 2012 MIMA Summit @sara_ann_mariewww.flickr.com/photos/darkfoxprime/4348506299/
  • 41. Patterns help create acontent system. 2012 MIMA Summit @sara_ann_marie
  • 42. Why do we need a content system? 2012 MIMA Summit @sara_ann_marie
  • 43. A system helps you designresponsively—at scale. 2012 MIMA Summit @sara_ann_marie
  • 44. It’s not just “pages.” 2012 MIMA Summit @sara_ann_mariewww.flickr.com/photos/peroshenka/408997641
  • 45. != 2012 MIMA Summit @sara_ann_marie
  • 46. What we talk about whenwe talk about content. 2012 MIMA Summit @sara_ann_marie
  • 47. Event ListingsShowsBlog PostsArticlesProfilesBiosHelp ModulesPress ReleasesDirectoriesRecipesShowsProduct ListingsNews BriefsResearch Papers 2012 MIMA Summit...etc. etc. etc. @sara_ann_marie
  • 48. How content should responddepends on what it’s intended to do. 2012 MIMA Summit @sara_ann_marie
  • 49. Give your content the right shape for its purpose.By Eva-Lotta Lamm
  • 50. Content purpose Content typeContent structure 2012 MIMA Summit @sara_ann_marie
  • 51. W e wantpageviews
  • 52. We publish recipes
  • 53. Tha t have Titlethese parts Attribution Pub Date Rating Yield Servings n Descriptio Image Cuisine type s Ingredient Diet type n Preparatio
  • 54. So users keepexploring
  • 55. How do we determinecontent’s structure? 2012 MIMA Summit @sara_ann_marie
  • 56. ✦ PURPOSE Does each element contribute toward a goal? How?✦ MESSAGE How does each element communicate meaning? How does it support the brand?✦ RELATIONSHIPS What’s the relationship between content elements? Which pieces are connected?✦ PRIORITIES Which elements are most important? Why? How do they fit together? 2012 MIMA Summit @sara_ann_marie
  • 57. Less like this. 2012 MIMA Summit @sara_ann_marie
  • 58. Less like this. 2012 MIMA Summit @sara_ann_marie
  • 59. And a little more like this. 2012 MIMA Summit @sara_ann_marie
  • 60. And a little more like this. 2012 MIMA Summit @sara_ann_marie
  • 61. Structure lets us chooseBy Eva-Lotta Lamm
  • 62. We can’t manually managehow each bit of content looks. 2012 MIMA Summit @sara_ann_marie
  • 63. But when we have structure,we can make rules. 2012 MIMA Summit @sara_ann_marie
  • 64. P
  • 65.   
  • 66.   Q 2012 MIMA Summit @sara_ann_marie
  • 67. Content Stacking vs. InterdigitationFrom Trent Walton, “Content Choreography” 2012 MIMA Summit @sara_ann_marie
  • 68. AD RECIPE NAME Publication | Date AD Attribution Yield/Servings Teaser/short overview of thisRECIPE NAME recipe and whyPublication | Date its delicious.Attribution AD Ratings & Reviews Yield/Servings Ratings & Teaser/short overview of Cuisine Diet Type Reviews this recipe and why its delicious. Ingredients • Lorem ipsum dolor sit Ingredients • Amet consectateur nonummy• Lorem ipsum dolor sit Cuisine • Interdum volgus videt, est• Amet consectateur nonummy • Si veteres ita miratur• Interdum volgus videt, est laudatque• Si veteres ita miratur laudatque • Ut nihil anteferat AD • Nihil illis comparet, errat.• Ut nihil anteferat• Nihil illis comparet, errat. Diet Type ADPreparation PreparationLorem ipsum dolor sit amet consectateur nonummy Lorem ipsum dolor sit amet consectateur nonummylorenzino. Interdum volgus videt, est ubi peccat. lorenzino. Interdum volgus videt, est ubi peccat.Si veteres ita miratur laudatque poetas. Ut nihil anteferat, Si veteres ita miraturnihil illis comparet, errat. Si quaedam nimis antique laudatque poetas. Ut nihil anteferat, nihil illisLorem ipsum dolor sit amet consectateur nonummy comparet, errat. Silorenzino. Interdum volgus videt, est ubi peccat. quaedam nimis antique Si veteres ita miraturSi veteres ita miratur laudatque poetas. Ut nihil anteferat, laudatque poetas. Ut nihilnihil illis comparet, errat. Si quaedam nimis antique anteferat, nihil illis comparet, errat. Si quaedam nimis antique
  • 69. Finally!
  • 70. asn’t hy w tentWthat con ere?back up h
  • 71. When we have rules,we make systems. 2012 MIMA Summit @sara_ann_marie
  • 72. Systems are scalable,instead of manual. 2012 MIMA Summit @sara_ann_marie
  • 73. Systems work for robotswww.flickr.com/photos/johngreenaway/3356358479/
  • 74. And meaning works for uswww.flickr.com/photos/mujitra/4868415523
  • 75. Close content analysis Content patterns and systemsBetter, more scalable responsive design 2012 MIMA Summit @sara_ann_marie
  • 76. Responsiveness can’t start with layout. 2012 MIMA Summit @sara_ann_marie
  • 77. Let’s start rethinking our content. 2012 MIMA Summit @sara_ann_marie
  • 78. THANK YOU,MINNEAPOLIS sarawb.com // @sara_ann_marie Content Everywhere is coming in November! http://rfld.me/content-everywhereFlickr images used via CC-Attribution license unless otherwise noted. 2012 MIMA SummitIllustrations used with the permission of Eva-Lotta Lamm. @sara_ann_marie