Getting Flexible: Working Content into Responsive Design—MIMA Summit

35,085
-1

Published 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 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)

Published in: Technology
3 Comments
99 Likes
Statistics
Notes
No Downloads
Views
Total Views
35,085
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
3
Likes
99
Embeds 0
No embeds

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
  • Getting Flexible: Working Content into Responsive Design—MIMA Summit

    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

    ×