1. GETTING
FLEXIBLE
working content into
responsive design
Sara Wachter-Boettcher
2012 MIMA Summit
www.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 changing
workflows.
2012 MIMA Summit
@sara_ann_marie

8. 2012 MIMA Summit
@sara_ann_marie

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

14. Event Event
basics basics
Theme Theme
Overview
Overview
Keynote
Keynote
Speakers
Speakers

15. Big brands are
getting there.

16. But you can’t reach
scale overnight.

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

18. Yet, we know
scale can be done.

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

22. You’re probably not the
Boston Globe.
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/

27. And what users actually want.
http://xkcd.com/773/

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

34. Because we were planning
on this.

35. Because we were planning
on this.
CONTENT
GOES
HERE.

36. Now we’ve ended up with this.

37. Now we’ve ended up with this.
CONTENT
GOES
HERE.

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/

42. Patterns help create a
content system.
2012 MIMA Summit
@sara_ann_marie

43. Why do we
need a content
system?
2012 MIMA Summit
@sara_ann_marie

44. A system helps you design
responsively—at scale.
2012 MIMA Summit
@sara_ann_marie

45. It’s not just “pages.”
2012 MIMA Summit
@sara_ann_marie
www.flickr.com/photos/peroshenka/408997641

46. !=
2012 MIMA Summit
@sara_ann_marie

47. What we talk about when
we talk about content.
2012 MIMA Summit
@sara_ann_marie

48. Event Listings
Shows
Blog Posts
Articles
Profiles
Bios
Help Modules
Press Releases
Directories
Recipes
Shows
Product Listings
News Briefs
Research Papers 2012 MIMA Summit
...etc. etc. etc. @sara_ann_marie

49. How content should respond
depends on what it’s intended to do.
2012 MIMA Summit
@sara_ann_marie

50. Give your content the right
shape for its purpose.
By Eva-Lotta Lamm

51. Content purpose
Content type
Content structure
2012 MIMA Summit
@sara_ann_marie

52. W e want
pageviews

53. We publish
recipes

54. Tha t have Title
these parts Attribution
Pub Date
Rating
Yield
Servings n
Descriptio
Image
Cuisine type
s
Ingredient Diet type
n
Preparatio

55. So users
keep
exploring

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

58. Less like this.
2012 MIMA Summit
@sara_ann_marie

59. Less like this.
2012 MIMA Summit
@sara_ann_marie

60. And a little more like this.
2012 MIMA Summit
@sara_ann_marie

61. And a little more like this.
2012 MIMA Summit
@sara_ann_marie

62. Structure lets
us choose
By Eva-Lotta Lamm

63. We can’t manually manage
how each bit of content looks.
2012 MIMA Summit
@sara_ann_marie

64. But when we have structure,
we can make rules.
2012 MIMA Summit
@sara_ann_marie

65. P

67. Q
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

76. Finally!

77. asn’t
hy w tent
W
that con ere?
back up h

78. When we have rules,
we make systems.
2012 MIMA Summit
@sara_ann_marie

79. Systems are scalable,
instead of manual.
2012 MIMA Summit
@sara_ann_marie

80. Systems work
for robots
www.flickr.com/photos/johngreenaway/3356358479/

81. And meaning
works for us
www.flickr.com/photos/mujitra/4868415523

82. Close content analysis
Content patterns and systems
Better, more scalable responsive design
2012 MIMA Summit
@sara_ann_marie

83. Responsiveness
can’t start with
layout.
2012 MIMA Summit
@sara_ann_marie

84. Let’s start
rethinking our
content.
2012 MIMA Summit
@sara_ann_marie

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