Everyone's talking about responsive design, and how you need structured content in order to make it happen. But what does "structured content" really mean, and how do you make it happen? A presentation given on 25 October 2012, at Content Strategy Forum 2012 in Cape Town, South Africa.

1. CONTENT IN THE AGE
OF PROMISCUOUS REUSE
Rachel Lovinger @rlovinger CS Forum 2012
Page 1 Photo by spakattacks

2. About Me: Rachel Lovinger
Experience Director, Content Strategist
Razorfish, New York
Co-editor of content strategy blog
scatter/gather:
http://scattergather.razorfish.com
Author of Nimble: A Razorfish
Report on Publishing in the
Digital Age (June 2010):
http://nimble.razorfish.com
(@NimbleRF on Twitter)
Page 2 © 2012 Photo by Rohanna Mertens

3. A Story of Reuse
New York City Subway
Page 3 © 2012

4. Page 4 © 2012

5. Page 5 © 2012 Photo by jaimekop

6. Route Change: This map is not in use
Name of Station has changed
Page 6 © 2012

7. Page 7 © 2012

8. REUSE REQUIRES
FLEXIBILITY

9. A Story of Structure
Chunks vs. Blobs
Page 9 © 2012

10. Blob: A Tweet
Author
Content Blob
Date
Page 10 © 2012

11. Blob: A Blog Post
Title
Author Date
Content Blob
Tags
Page 11 © 2012

12. Chunks: A Recipe
Title
Author
Show Episode
Tags
Time
Image
Yield
Caption Level
Ingredient 1
Ingredient 2
Ingredient 3
Guide /
Etc… Menu
Directions
Page 12 © 2012 Recipe © Food Network

13. Recipe: From Web to Mobile
Page 13 © 2012

14. Someday, Intelligent Cooktops
Google Cooktop designed by Sarah R. L. Johnson,
Page 14 © 2012 Screenshot from A Day Made of Glass… by Corning

15. BLOBS are FIXED, RIGID
CHUNKS are FLEXIBLE

16. A Story of Evolution
The need for STRUCTURE
follows the rise of REUSE
Page 16 © 2012

17. Support Documentation
Technical Communications
• Since before the Web
• Help content and manuals, for print and digital
• Structured content delivered as print docs or hypertext files
• Provides topic-based just-in-time content
• Change Management: updates & translation
Docs
Page 17 © 2012

18. Boeing: Change Management
Page 18 © 2012 Photo by Darren Olivier

19. Boeing: Change Management
31 million pages : Imagine distributing printed updates.
1999: CDs took up
considerably less space
Docs
- 20 years
Page 19 © 2012 Photo by Boeing

20. Web Publishing
Editors & Template/CMS developers
When redesigning a site we thought about:
• Reusing articles & photos throughout the site
• Distributing content to sister sites
• Syndication to partner channels
This required the content to be flexible.
[This was largely pre-social & pre-mobile. Now we’d also consider:
• Sharing on social sites and content aggregators
• Appearance of content on mobile devices ]
Docs Web
- 10 years
Page 20 © 2012

21. EW.com: Syndication
Page 21 © 2012

22. Responsive Design
Mobile Web/App Designers
• We’re now looking at everything on the phone
• Pages & content created for the desktop don’t always work well
on mobile
• Content creators don’t want to produce a different set of assets
for each channel
Docs Web Mobile+
Now
Page 22 © 2012

23. Mobile: Ubiquity
Page 23 © 2012 Fail Images from MobileWebFail

24. Mobile: Ubiquity
Page 24 © 2012

25. Reading on tablets
Page 25 © 2012 Photo by TheCreativePenn

26. Streaming to TVs
Page 26 © 2012 Photo by Dennis S. Hurd

27. Broadcasting to our own cars
Photo by HighTechDad
Page 27 © 2012

28. Boeing manuals:
Incredibly
challenging
Now, the entire
Internet is in
everyone’s pocket
Photos: Boeing by Darren Olivier, Pocket by lululemon athletica

29. Now we’re ALL responsible
for structuring content.
It CAN be done.
(And it’s not just a tech issue.)

30. A Story of Tactics
Ok, But How?
Page 30 © 2012 Photo by avinashkunnath

31. Why content people need to get involved
People who aren’t thinking about the broader meaning, purpose
and uses of the content, are more likely to create:
• Single-use, single-context content
• Painful CMS interfaces
• Unsustainable workflows
Page 31 © 2012

32. We need
• Flexible, reusable content
• Easy-to-use tools and processes
Page 32 © 2012

33. Content Management
Separate the content from the display by using a CMS
Warning: WYSIWYG formatting fails to indicate meaningful structure
Page 33 © 2012 Image courtesy of Miva Merchant

34. Responsive Design
Presentation layer defines display, per channel or device
Page 34 © 2012 Photo by jiraisurfer

35. Content Modelling
Translate designs into flexible content chunks
Artist
Profile
Chart Song
Album
Page
Content Types
Content Attributes
Page 35 © 2012

36. Web Standards
Use existing standards so content plays well with others
… Etc.
“The great thing about standards is,
there are so many to choose from”
Page 36 © 2012

37. Rich Metadata
Help systems understand what to do with the chunks
Page 37 © 2012 Image courtesy of Wall Street Journal

38. User-friendly Tools
Demand easy-to-use tools with advanced features
Example: Drupal 7 supports web standards & rich metadata
Page 38 © 2012

39. Structured content may feel
like a brand new problem, but
people have been thinking
about it for a long time.
Photo by Thomas Hawk

40. Recap: Tactics for Structured Content
1. Content Management
2. Responsive Design
3. Content Modelling
4. Web Standards
5. Rich Metadata
6. As always: need more user-friendly tools!
Page 40 © 2012

41. We’ve solved for these
problems in the past.
Now we have to simplify &
scale the solutions.

42. A Story of Knowledge
Where to Learn More
Page 42 © 2012

43. Karen McGrane Rahel Bailie & Noz Urbina Sara Wachter-Boettcher
Content Strategy for Mobile Content Strategy for Decision Makers Content Everywhere
Bob Boiko Ann Rockley & Charles Cooper Heather Hedden
Content Management Bible Managing Enterprise Content The Accidental Taxonomist
Page 43 © 2012

44. Online Resources
Start here:
• My SlideShare page: http://www.slideshare.net/rlovinger/
• Nimble: A Rasorfish Report on Publishing in the Digital Age
• Stephen Hay: Structured Content First
• Daniel Jacobson, NPR: COPE: Create Once, Publish Everywhere
Then, since there are way too many to list…
• Additional Links: http://blog.rachellovinger.com/resources
• And: @rlovinger
Next…
Page 44 © 2012

45. People to Follow
At the intersection of Content Strategy, Responsive Design,
Structured Content, and the Future-Friendly Web.
• Cleve Gibbon (@cleveg : slideshare : blog)
• Karen McGrane (@karenmcgrane : slideshare : blog)
• Rahel Anne Bailie (@rahelab : slideshare : blog)
• Sara Wachter-Boettcher (@sara_ann_marie : slideshare : blog)
• Noz Urbina (@nozurbina : slideshare : blog)
• Cennydd Bowles (@Cennydd : blog)
• Luke Wroblewski (@lukew : slideshare : blog)
• Ethan Marcotte (@beep : blog)
• Brad Frost (@brad_frost : slideshare : blog)
Page 45 © 2012

46. Thanks !
rachel.lovinger@razorfish.com
@rlovinger
Page 46 © 2012 Photo by EricGjerde