Responsive design is about more than canvases and code. It’s about adopting a flexible mindset—and that means rethinking our content workflow, too. To create sites that keep meaning intact as they shift and reshape to fit smartphones and tablets, you need to know which messages are critical to meeting both business goals and users’ needs and how content elements should work together to communicate them. Content strategy can answer these questions—if you incorporate it into your project at the right time and place.
(Presented in the Digital Workflow track at the 2012 Minneapolis Interactive Marketing Association Summit)
9. Design in the
browser. 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 mean
for content?
2012 MIMA Summit
@sara_ann_marie
11. ‘‘
In order to embrace designing native
layouts for the web—whatever the device
—we need to shed the notion that we
create layouts from a canvas in.
We need to flip it on its head, and create
layouts 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
17. ‘‘
The Microsoft.com team built tools,
guidelines, and processes to help localize
everything from responsive images to
responsive content into approximately
100 different markets... They adapted
their CMS to allow Content Strategists to
program content on the site.
Nishant Kothary,
“The Story of the New Microsoft.com”
2012 MIMA Summit
@sara_ann_marie
19. So how’d Boston Globe
do it?
2012 MIMA Summit
@sara_ann_marie
20. They had editors. Writers.
Content people.
2012 MIMA Summit
@sara_ann_marie
21. Those people knew a
few 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
23. How can you build a
content-focused workflow?
2012 MIMA Summit
@sara_ann_marie
24. First you
need a content
strategy.
2012 MIMA Summit
@sara_ann_marie
25. Content strategy
helps us determine what we should publish,
for whom, where, why, when, and how we’ll
actually get it done.
2012 MIMA Summit
@sara_ann_marie
26. It’s about knowing what
you’re trying to say.
www.flickr.com/photos/theparadigmshifter/
28. It’s a plan to keep your
message intact on any screen.
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. 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
31. But it’s not just what you have.
It’s how it’s stored.
2012 MIMA Summit
@sara_ann_marie
32. The CMS often looks like this.
2012 MIMA Summit
@sara_ann_marie
33. The CMS often looks like this.
CONTENT
GOES HERE.
2012 MIMA Summit
@sara_ann_marie
38. Big blobs don’t do much for
responsive design.
2012 MIMA Summit
@sara_ann_marie
39. It’s time we get a bit
more modular.
2012 MIMA Summit
@sara_ann_marie
40. 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
41. This will help you find
patterns.
2012 MIMA Summit
@sara_ann_marie
www.flickr.com/photos/darkfoxprime/4348506299/
56. How do we determine
content’s structure?
2012 MIMA Summit
@sara_ann_marie
57. ✦ 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
68. Content Stacking vs. Interdigitation
From Trent Walton, “Content Choreography”
2012 MIMA Summit
@sara_ann_marie
69. AD
RECIPE NAME
Publication | Date
AD Attribution
Yield/Servings
Teaser/short
overview of this
RECIPE NAME recipe and why
Publication | Date it's delicious.
Attribution AD Ratings Reviews
Yield/Servings
Ratings
Teaser/short overview of Cuisine Diet Type
Reviews
this recipe and why it's
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 AD
Preparation Preparation
Lorem ipsum dolor sit amet consectateur nonummy Lorem ipsum dolor sit amet
consectateur nonummy
lorenzino. 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 miratur
nihil illis comparet, errat. Si quaedam nimis antique laudatque poetas. Ut nihil
anteferat, nihil illis
Lorem ipsum dolor sit amet consectateur nonummy comparet, errat. Si
lorenzino. Interdum volgus videt, est ubi peccat. quaedam nimis antique
Si veteres ita miratur
Si veteres ita miratur laudatque poetas. Ut nihil anteferat, laudatque poetas. Ut nihil
nihil illis comparet, errat. Si quaedam nimis antique anteferat, nihil illis
comparet, errat. Si
quaedam nimis antique
85. THANK YOU,
MINNEAPOLIS
sarawb.com // @sara_ann_marie
Content Everywhere is coming in November!
http://rfld.me/content-everywhere
Flickr images used via CC-Attribution license unless otherwise noted. 2012 MIMA Summit
Illustrations used with the permission of Eva-Lotta Lamm. @sara_ann_marie
Editor's Notes
\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