MT. Marseille an Archipelago. Strategies for Integrating Residential Communit...
Modeling Rich Narrative Content
1. The Battle for the
Body Field
Modeling rich narrative content
Because Heaven knows your CMS won’t do it for you
Jeff Eaton
Tuesday, September 1st
Confab Intensive 2015
1
15. 1. Narrative text
Case studies, documentation, news
2. Islands of structure
Galleries, instructions, data visualizations
3. Placement that matters
“The gallery goes with that paragraph!”
13
32. Capture editorial
decisions explicitly
‣ Priority, not size
‣ Emphasis, not visual style
‣ Relationship, not position
…And change templates based on that data.
31
36. Metadata-driven
template swapping
✔ Vary layout based on optional fields, metadata, etc.
✔ Keeps complexity in the design/templates
✔ Easy to adapt to new designs, publishing channels
✔ Easy to bolt onto most CMSs
✖ Body field remains a black box
34
38. Building your page
from LEGO blocks
‣ Story becomes a collection of smaller components
‣ Components can be reused across multiple stories
‣ Complex functionality can be componentized, too
‣ Divi Theme for Wordpress, Paragraphs or Entity
References for Drupal, Matrix for Craft CMS
38
41. Stackable
components
✔ Well-suited to “step-by-step” narratives
✔ Works great for home pages, landing pages, too
✔ Lends itself to content reuse
✖ Forces editors to break up long text
41
46. Transform on output
46
Mobile web
Enhanced web
Email
Partner API
Printable PDF
Mobile app
Title, link
Scrolling gallery
Image, caption, link
Strip entirely
“See page x…”
JSON data
▶
▶
▶
▶
▶
▶
<gallery id=1>Tagline!</gallery>
54. 51
<task id="signup">
<title>Signing up for health insurance</title>
<taskbody>
<steps>
<step>List your dependents</step>
<step>Gather past medical information</step>
<step>Fill out forms 21a, 39b, and 92c</step>
<step audience="retail">
Hand in your paperwork to a supervisor
</step>
<step audience="corporate">
Deliver your paperwork to the HR office
</step>
</steps>
</taskbody>
</task>
<p conref="../boilerplate.xml#disclaimer">
This text will be replaced by the boilerplate legal disclaimer.
</p>
55. Embedded
components
✔ Extends “content modeling” into the text itself
✔ Replaces complex markup with placeholders
✔ Simplifies boilerplate markup with custom tags
✔ Pairs well with “WYSIWYM” editors
✔ Requires planning, training, development
52
56. Field guide
Data driven templates
Unbroken body copy
surrounded by
supporting elements
53
Stacked components
Modular chunks of copy
and media, assembled
into an aggregate.
Embedded modules
Long stretches of body
copy, with meaningfully
placed components.
68. Design breakdown
‣ Captures design patterns used to present content
‣ Meshes well with current design practices
‣ Works great if you have “systems thinkers”
65
69. Domain modeling
Geographical Facts Hotwire Locations Property
Channel
Scoring
Amenities
Promotional Content
Compset Type Chain
Country
State Region
City
Neighborhood
Destination
Point of Interest
Lodging Type
Property
Room Type
Rate Plan
Supplier Channel
Amenity
Review
Text
TagPhoto
66
Show content
Metadata
Promotional content
Standalone news
Cast member
A show host or recurring on-air
TWiT personality
Product
A product or service mentioned o
reviewed on a TWiT show or in
published articles
Person
A tech industry personality cove
on the show or in published
articles on the site
Top News
Promo
Standalone video created from
clips of other TWiT episodes
Free Standing Video
A standalone video clip featured
on the site but not associated with
a particular TWiT show
Breaking News
A hub for news updates on an
important tech news development
Article
Long-form written news coverage,
potentially including other media
Live Cam
Information about the drop cams
in the TWiT studios
Announcement
Internal TWiT news and updates,
for example “We’re hosting a
studio audience next week!”
Transcript
A textual transcript of a particular
TWiT show episode.
Tip
How-To
Interview
Review
Unboxing
Pick
“Segments” break out
material from episodes
for easier discovery
Episode
Individual (often weekly) instance
of a show
Show
A recurring, personality-driven
collection of TWiT video content
Presentation
Ephemeral content driven largely by web design or
business requirements.
Assets
Editorial or User content; Makes up the bulk of content on the site.
Structure
Used to group and organize assets. Used to retrieve
collections of assets
SEO Subtitle
Related Bloggers
Banner Image
Title
Short title
Byline
SEO Keywords
Embed Gallery
Short summary
Pull Quote
Publish date
Body text w/summary
Blog & Blog Entry
Body
Title
Video
Subtitle
Title
Promotes
Sponsor end date
Sponsor
Taxonomy
Body
Reference Fields
Title
Custom Section
Sponsor start date
Graphic
Servings
Subtitle
Prep Time
Total Time
Title
Cost
Recipe
Skill Level
Course
Person
Title
Thumbnail
Logo
Body
Short Title
Title
Show
Episode Premiere Date
Episode number
Episode
Title
Reference Fields
Body
Promote
Playlist
Display Name
Title
Season
Title
Page / Feature
SEO Title
Title
Game
Kiptronic URL
Video CMS Data
Reference Fields
Tags
Notes
Ingredients
Directions
Reference Fields
Compass Show ID
Social Links
Template Elements
Tune In
Cast
Body
Premiere
Finale
Images
Template Elements
Subtitle
SEO Subtitle
Image
Call to Action
Reference Fields
75. Domain modeling
‣ Describes discrete things, what they do, and what
relationship connect them
‣ Captures the platonic form of content and
communication
‣ Reveals unique perspectives and priorities
73
80. Content audits
‣ Discover what unholy things are being done
‣ Pave worn paths: Automate what editors really use
‣ Spot opportunities to streamline
76
87. Most of your content will
be the same as everyone
else’s.
Humans share 96% of
their DNA with chimps.
The differences matter.
83
88. …Exercise!
For each type of component on your page…
…The purpose the component serves
…Whether it’s unique to your brand
Bonus: Suggest another component that would
help tell the story
84
102. In the text
(House styles)
‣ Use HTML first
‣ Custom classes second
‣ Custom tags last
‣ WYSIWYG editor plugins
and shortcodes can help
98
103. In a field
(Chunky data)
‣ Let templates handle it
‣ If position matters, use
placeholder tokens
‣ Keep the body clean!
99
104. In another story
(Linked content)
‣ Store relationships in a
dedicated field
‣ Curation is content
‣ If position matters, use
placeholder tokens
100
105. On the web
(Remote embeds)
‣ Use shortcodes and
placeholders
‣ Only store the ID
‣ Use a “blob” content
type for custom embeds
101
109. The problem:
‣ Chunky fields + templates are rigid
‣ Free HTML is a horror show
‣ Multi-channel & responsive require more rigor
‣ Narrative text with rich media is hard
105
110. The solutions:
‣ Use metadata to capture editorial intent, swap
templates based on metadata
‣ Use stackable content modules to quickly build
“aggregate stories”
‣ For intertwingled text and rich elements, use
placeholder tokens and custom tags
106
111. Your vocabulary:
‣ The unique language your organization uses to
communicate with readers/customers/visitors
‣ The building blocks of your narratives
‣ Bridges the gap between content model, voice and
tone, design pattern library
107
112. Modeling:
‣ The nitty-gritty details that make your content
components real
‣ What job does the component perform?
‣ What data does it need?
‣ Where does it live?
108
113. The takeaway
‣ Flexible narrative content is hard
‣ A “content vocabulary” gets everyone synced up
‣ Stories are packages: Text, assets, relationships, and
placeholders to position things inside the body
‣ Standardize components to reduce the cost of
creative reuse
109