a presentation on the concept of 'Content Everywhere', given at a Distilled meetup in London, May 30 2013 The mobile web is growing fast, and most of us are aware of the idea of responsive design and the sorts of tools you can use to make your website's layout more mobile friendly. But how do we deal with content in this multiscreen world? And how can you make it work more effectively for a more positive user experience?

1. BRIDGET RANDOLPH
SEO Analyst, Distilled
bridget.randolph@distilled.net
@BridgetRandolph

2. “Content Everywhere”:
What Does It Mean and
How Do I Use It?
BRIDGET RANDOLPH

3. In 2012, global mobile data traffic was 12x
the size of the entire Internet in the year 2000.
@BridgetRandolphBridget Randolph
0
200
400
600
800
1000
ALL Global Internet
Traffic in 2000
Global Mobile Traffic in
2012
75
885
petabytes/month

4. So we need mobile-friendly
websites.
@BridgetRandolphBridget Randolph

5. But “mobile” isn‟t just one thing
@BridgetRandolphBridget Randolph

6. It‟s a
Multiscreen World

7. Responsive Design.
Bridget Randolph @BridgetRandolph

8. Responsive Design =
mobile-friendly webpages
@BridgetRandolphBridget Randolph

9. But…
CONTENT != WEBPAGE
Bridget Randolph @BridgetRandolph

10. LAYOUT = WEBPAGE
@BridgetRandolphBridget Randolph

11. CONTENT
• Timeline
• Related Topics
• Other Posts by
This Author
• BUY button
• Navigation
• Social Buttons
LAYOUT
• Sidebar
CAN BE
Bridget Randolph @BridgetRandolph

12. REAL WORLD EXAMPLE
Starbucks
Bridget Randolph @BridgetRandolph

13. REAL WORLD EXAMPLE
Starbucks
Bridget Randolph @BridgetRandolph

14. REAL WORLD EXAMPLE
Starbucks
Bridget Randolph @BridgetRandolph

15. REAL WORLD EXAMPLE
Starbucks
Bridget Randolph @BridgetRandolph

16. How Do We Fix This?
Bridget Randolph @BridgetRandolph

17. Content Everywhere.

18. CONTENT EVERYWHERE
• What Is It?
• How Does It Work?
• Why Should I Care?
Bridget Randolph @BridgetRandolph

19. a system for managing our
content

20. across multiple platforms
and channels
Bridget Randolph @BridgetRandolph

21. Responsive Design…
but for content.
Bridget Randolph @BridgetRandolph

22. This system enables us to…
Bridget Randolph @BridgetRandolph

23. …stop doing extra work.
Bridget Randolph @BridgetRandolph

24. EXAMPLE
A print publication decides to go online
Bridget Randolph @BridgetRandolph

25. So they create an online edition.
(So far so good.)
REDLOOKMagazineOnline
Features
Feature 1
Feature 2
Feature 3
Regular
Columns
Cover Story
By Author Byline
LONDON, UK., -- Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel
eum iriure dolor in hendrerit in vulputate
velit esse molestie consequat, vel illum
dolore
Ad
Ad
Bridget Randolph @BridgetRandolph

26. Lots of mobile traffic, so they create a mobile
edition with a mobile-friendly layout.
(Still, so far so good.)
REDLOOK
m.online
Cover
Story
By Author
LONDON, UK., -- Lorem
ipsum dolor sit
amet, consectetuer
adipiscing elit, sed diam
nonummy nibh euismod
tincidunt ut laoreet dolore
magna aliq

27. Mobile edition.
Tablet edition.
Mobile app for iOS.
Mobile app for Android.
Tablet app for iOS.
Tablet app for Android.
Email campaigns.
Social media.
Instapaper.
Bridget Randolph @BridgetRandolph

28. We need a better way to…

29. COPE.
Bridget Randolph @BridgetRandolph

30. Create
Once
Publish
Everywhere
Bridget Randolph @BridgetRandolph

31. Stop making more
content, start building
systems.
Sara Wachter-Boettcher
from Content Everywhere: Strategy and Structure for Future-Ready Content, December
2012, Rosenfeld Media
Bridget Randolph @BridgetRandolph

32. …stop making more
VERSIONS
of our content, that is.
Bridget Randolph @BridgetRandolph

33. How Does It Work?

34. 3 Steps:
1. Categorise Your Content
2. Create the Relationships
3. Implementation
Bridget Randolph @BridgetRandolph

35. Step 1: Categorise Your
Content

36. We need to take our unstructured “blobs”
of content and turn them into structured
“building blocks”.
Categorise Your Content

37. (What‟s a blob?)
@BridgetRandolphBridget Randolph
Categorise Your Content

38. The goal is…
@BridgetRandolphBridget Randolph
Categorise Your Content

39. …to understand the
purpose and meaning of
each piece of content
Bridget Randolph @BridgetRandolph
Categorise Your Content

40. instead of
@BridgetRandolphBridget Randolph
Categorise Your Content

41. Creating
Content for
Content‟s
Sake
Bridget Randolph @BridgetRandolph
Categorise Your Content

42. Content Audit
Bridget Randolph @BridgetRandolph
Categorise Your Content

43. Divide Content into “Types”, or Categories
ALL CONTENT
Feature
Article
Author
Profile
Report
Case
Study
Recipe Review
Bridget Randolph @BridgetRandolph
Categorise Your Content

44. Divide each “Type” into “Elements”, or
Building Blocks
FEATURE
ARTICLE
Headline/
Title
Main
BodyImage
Related
Articles
Author Teaser
Paragraph
Bridget Randolph @BridgetRandolph
Categorise Your Content

45. Step 2: Create the
Relationships

46. Content Models
Create the Relationships
Bridget Randolph @BridgetRandolph

47. 1) Model the Relationships between Types
Dish
Event/
Holiday
Recipe
Menu
Ingredient
Cuisine
Bridget Randolph @BridgetRandolph
Create the Relationships

48. 2a) Model the Relationships within a Type
EXAMPLE 1 – Grocery Store
Recipe
• Title
• Byline
• Teaser
• Image
• Instructions
• Ingredients
• Nutritional Info
• Yield
• Cooking/Prep Time
Store
Category
Specialty
Diet
Bridget Randolph @BridgetRandolph
Create the Relationships

49. 2b) Model the Relationships within a Type
EXAMPLE 2 - Epicurious
Recipe
• Title
• Byline
• Publication Attribution
• Yield
• Active Time
• Total Time
• Teaser Description
• Image
• Ingredients
• Preparation
• Wine Pairings
• Reviews
• Main ingredients
• Type
• Dietary considerations
• Related Menus
• Related Recipes
Recipe
Types
Related
Wines
Related
Menus
Reviews
Related
Diets
Related
Recipes
Bridget Randolph @BridgetRandolph
Create the Relationships

50. Specify a Hierarchy
using conditional rules and
three main criteria:
Bridget Randolph @BridgetRandolph
Create the Relationships

51. MEANING:
“Keep image thumbnail
beside title at all times.”
Bridget Randolph @BridgetRandolph
Create the Relationships

52. PRIORITY:
“Call to Action button
should always be below the
title and teaser but as close
to the top as possible.”
Bridget Randolph @BridgetRandolph
Create the Relationships

53. RELATIONSHIPS:
“Author byline should
always be directly below
the title.”
Bridget Randolph @BridgetRandolph
Create the Relationships

54. Markup
Bridget Randolph @BridgetRandolph
Create the Relationships

55. Markup: Tags vs Formatting
<headline/>
<author/>
<call to action/>
• bold, 20pt
• link to author page
• big green “BUY” button
instead of
SEMANTIC
MARKUP
PRESENTATIONAL
MARKUP
Bridget Randolph @BridgetRandolph
Create the Relationships

56. We need to give our content a
standardised, flexible structure instead of
just editing its
format each time we use it.
STRUCTURE
<h1></h1>
<attribute=„author>
<type=„timeline‟/>
FORMAT
<font=“TrebuchetMS”>
<font-size: 20pt>
<font-color: blue>
vs
Create the Relationships

57. You wouldn‟t create a responsively
designed webpage layout with formatting.
It‟s the same principle.
@BridgetRandolphBridget Randolph

58. Remember:
MARKUP != SCHEMA.ORG
Bridget Randolph @BridgetRandolph
Create the Relationships

59. HTML
• Microformats
• HTML5 Microdata
• Schema.org
Structural
• XML
• RDF
• OWL
• DITA
Bridget Randolph @BridgetRandolph
Create the Relationships

60. Does it matter which
one you use?
Bridget Randolph @BridgetRandolph
Create the Relationships

61. Not really.
Bridget Randolph @BridgetRandolph
Create the Relationships

62. The important thing is to
Bridget Randolph @BridgetRandolph
Create the Relationships

63. Create
STRUCTURE, not
FORMATTING.
Bridget Randolph @BridgetRandolph
Create the Relationships

64. Step 3: Implementation

65. You‟ll need to work with your
developers to customise your CMS
Implementation
Bridget Randolph @BridgetRandolph

66. Ok, this is pretty COOL!
Bridget Randolph @BridgetRandolph

67. But I do SEO,
not Content Management Systems.
Bridget Randolph @BridgetRandolph

68. Why Should *I* Care?

69. Don‟t be so GRUMPY!
Bridget Randolph @BridgetRandolph

70. TL;DR
We should care because
Bridget Randolph @BridgetRandolph

71. it makes our lives easier
Bridget Randolph @BridgetRandolph

72. and
Bridget Randolph @BridgetRandolph

73. improves the overall
user experience.
Bridget Randolph @BridgetRandolph

74. But also…
Bridget Randolph @BridgetRandolph

75. 4 key areas
for SEO
Bridget Randolph @BridgetRandolph

76. 1. better internal linking
Bridget Randolph @BridgetRandolph

77. REAL WORLD EXAMPLE
Arizona Board of Tourism
Bridget Randolph @BridgetRandolph

78. REAL WORLD EXAMPLE
BBC Wildlife Finder
Bridget Randolph @BridgetRandolph

79. 2. content hubs
for money keywords
Bridget Randolph @BridgetRandolph

80. REAL WORLD EXAMPLE
BBC Food – “dish” pages
Bridget Randolph @BridgetRandolph

81. REAL WORLD EXAMPLE
BBC Food – “ingredient” pages
Bridget Randolph @BridgetRandolph

82. Results
BBC Food saw an increase of
more than 150,000 visitors weekly
from search alone
and
Overall traffic doubled, from around
650,000 weekly visitors to around 1.3 million.
@BridgetRandolphBridget Randolph

83. 3. better CRO/UX
Bridget Randolph @BridgetRandolph

84. REAL WORLD EXAMPLE
Starbucks
Bridget Randolph @BridgetRandolph

85. 4. structured data
@BridgetRandolphBridget Randolph

86. SEOs LOVE Structured Data.
Bridget Randolph @BridgetRandolph

87. *I* love Structured Data.
Bridget Randolph @BridgetRandolph

88. WHY?
Bridget Randolph @BridgetRandolph

89. Because it does my
job for me.
Bridget Randolph @BridgetRandolph

90. My Job =
explaining to the search engine
what my website is about
Bridget Randolph @BridgetRandolph

91. Structured Data =
Rich Snippets and Better SEO
Bridget Randolph @BridgetRandolph

92. You can‟t use it mindlessly
Bridget Randolph @BridgetRandolph

93. So Use It Wisely.

94. The Content Everywhere
system will not…
Bridget Randolph @BridgetRandolph

95. Help with device-, site-, or page-
specific content or features
Bridget Randolph @BridgetRandolph

96. Prevent duplicate content
issues
Bridget Randolph @BridgetRandolph

97. It‟s a System,
NOT a Strategy

98. Strategy
tells you what, when, how to create
VS.
System
gives you a framework to
deliver your content
@BridgetRandolphBridget Randolph

99. Hopefully, you‟re convinced.
Bridget Randolph @BridgetRandolph

100. What‟s the takeaway?
Bridget Randolph @BridgetRandolph

101. We want to create flexible content so
that our audience can
find it, use it, learn from
it, share it, and love it.

102. …read it.

103. It‟s all about future-proofing
your content.

104. You don‟t have to
implement it all at once.

105. But something is better
than nothing.
(PROTIP: Don‟t be a Starbucks)

106. So let‟s start planning
for the future.
(you don‟t really have a choice)

107. Thanks.
Any questions?
BRIDGET RANDOLPH
bridget.randolph@distilled.net
@BridgetRandolph

108. Read the Book.
Content Everywhere:
Strategy and Structure for
Future-Ready Content
by Sara Wachter-Boettcher,
December 2012, Rosenfeld Media.
Bridget Randolph @BridgetRandolph

109. Notes
Sources:
Mobile Data Traffic Statistic from: http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns827/white_paper_c11-
520862.html
Content Everywhere book: http://rosenfeldmedia.com/books/content-everywhere/
Sara Wachter-Boettcher blog: www.sarawb.com
Karen McGrane blog: www.karenmcgrane.com
A List Apart: http://alistapart.com/
Image Credits:
Mobile devices Image: http://www.universalmind.com/uploads/cache/uploads/mindshare/7387824246_f7b707675e_590_230_90_c1.jpg
Starbucks example: www.starbucks.com/coffee/dark/espresso-roast
Lazy College Senior meme: http://knowyourmeme.com/photos/262971-lazy-college-senior
Magazine Cover: www.fakeazine.com
blob: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR4XYMAvMUTmEO8xrpEn8EQYQtlrrespzlmbZwsPKScDSm3diIXDg
building blocks: http://www.linvio.com/images/pmtx/building_blocks_med.jpg
Cool Obama: http://1.androidauthority.com/wp-content/uploads/2012/03/Not-Bad-Obama-Meme2.jpg
Grumpy Cat: http://www.catster.com/files/original.jpg
Arizona Board of Tourism: http://arizonaguide.com/places-to-visit/north-central-arizona/sedona
BBC Examples: www.bbc.co.uk/wildlifefinder AND www.bbc.co.uk/food
Rich snippets image: http://www.google.com/help/hc/images/webmasters/webmasters_99170_rsreview_en.png
Ryan Gosling Meme: www.memegenerator.com
Content buzzword wordcloud: https://encrypted-
tbn3.gstatic.com/images?q=tbn:ANd9GcTZUQDEAXpDZcrdH72fPNJNBSXcbagDM5srixtx7tJRT7HGkERg
Dilbert comic strip image: http://sphotos-a.xx.fbcdn.net/hphotos-ash3/p480x480/537888_518359451541411_121747558_n.jpg
Content Everywhere book cover: http://www.digitalforreallife.com/wp-content/uploads/2013/03/content-everywhere-lg.gif
Bridget Randolph @BridgetRandolph