modeling rich narrative content
TRANSCRIPT
The Battle for the Body FieldModeling rich narrative content Because Heaven knows your CMS won’t do it for you
Jeff Eaton Tuesday, September 1st Confab Intensive 2015
1
The schedule
19:00 AM: The problem, the solutions 10:00 AM: Delicious snacks! 10:20 AM: Building a vocabulary 11:00 AM: Modeling components 12:00 PM: Delicious lunch!
3
1: Problems
“Web content is pain, Highness. Anyone who says differently is selling something.”
Westley, The Princess Bride
4
1. Narrative textCase studies, documentation, news
2. Islands of structureGalleries, instructions, data visualizations
3. Placement that matters “The gallery goes with that paragraph!”
13
Clean HTML won’t solve this problem.
23
<figure class="gallery"> <ul> <li><a href="/gal/1#1"><img src="1.jpg"></a></li> <li><a href="/gal/1#2"><img src="2.jpg"></a></li> <li><a href="/gal/1#3”><img src="3.jpg"></a></li> </ul> <figcaption><a href="gal/1">Tagline!</a></figcaption> </figure>
24
NeedTeaser
Chapter Related stories
Author bio Photo credit
Promoted
Aside Section Unordered List Paragraph Citation Emphasis
Have
2: Solutions
Three complimentary techniques can tame the body field and bring order to your chaos.
27
Capture editorial decisions explicitly‣ Priority, not size ‣ Emphasis, not visual style ‣ Relationship, not position
…And change templates based on that data.
31
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
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
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
Simplify markup44
<figure class="gallery"> <ul> <li><a href="/gal/1#1"><img src="1.jpg"></a></li> <li><a href="/gal/1#2"><img src="2.jpg"></a></li> <li><a href="/gal/1#3”><img src="3.jpg"></a></li> </ul> <figcaption><a href="gal/1">Tagline!</a></figcaption> </figure>
<gallery id=1>Tagline!</gallery>
Transform on output46
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>
49
<body> <group> <subtitle>The article intro…</subtitle> <pullquote> <quote>“Just say <em>no</em> to WYSIWYG.”</quote> <attribution>Jeff Eaton</attribution> <title>Digital Strategist, Lullabot</title> </pullquote> <assets> <asset id=1 /> </assets> <p>Here’s HTML, with <strong>formatting!</strong>…</p> <p>And an inline quote: <asset_inline company="GOOG"/>!</p> <group> </body>
49
<body> <group> <subtitle>The article intro…</subtitle> <pullquote> <quote>“Just say <em>no</em> to WYSIWYG.”</quote> <attribution>Jeff Eaton</attribution> <title>Digital Strategist, Lullabot</title> </pullquote> <assets> <asset id=1 /> </assets> <p>Here’s HTML, with <strong>formatting!</strong>…</p> <p>And an inline quote: <asset_inline company="GOOG"/>!</p> <group> </body>
49
<body> <group> <subtitle>The article intro…</subtitle> <pullquote> <quote>“Just say <em>no</em> to WYSIWYG.”</quote> <attribution>Jeff Eaton</attribution> <title>Digital Strategist, Lullabot</title> </pullquote> <assets> <asset id=1 /> </assets> <p>Here’s HTML, with <strong>formatting!</strong>…</p> <p>And an inline quote: <asset_inline company="GOOG"/>!</p> <group> </body>
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>
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
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.
…Exercise!
Which techniques fit your page, and why? Rule-based templates Stacked content modules Placeholders in the body text
55
3: Vocabulary
The first step is developing a consistent language to identify and describe your content.
57
Design breakdown
‣ Captures design patterns used to present content ‣ Meshes well with current design practices ‣ Works great if you have “systems thinkers”
65
Domain modelingGeographical Facts Hotwire Locations Property Channel
UX Content
Customer Data
Scoring
Amenities
Help Content
Promotional Content
Key
App Config
Compset Type Chain
Transactional Data
Country
State Region
City
Neighborhood
Destination
Point of Interest
Lodging Type
Property
Room Type
Rate Plan
Supplier Channel
Amenity
Customer
Booking
Review
Rating
Error Message
Label
Ancillary Page
Glossary strings
Legal Text
Document
Internal User Account
Setting
Text TagPhoto
CMS ignores
CMS maintains placeholder
CMS is system of record
66
Show content
Advertising
Metadata
Curation tools
Promotional content
Standalone news
Cast member
A show host or recurring on-air
TWiT personality
Product
A product or service mentioned or
reviewed on a TWiT show or in
published articles
Person
A tech industry personality covered
on the show or in published
articles on the site
Company
A company covered 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
Event Coverage "
A hub for TWiT coverage of a
conference, convention, or event
Series
A sequential collection of
segments or articles on a subject
Topic
A theme that’s frequently covered
on TWiT shows, like “Privacy”
Live Cam
Information about the drop cams
in the TWiT studios
Static Page
A simple, flexible page for storing
static content like Privacy Policies
Link
A simple link mentioned or
recommended on the air.
Quote
A noteworthy quote from a TWiT
host, guest, or community
member.
Sponsor
A TWiT sponsor, used promote
companies that give TWiT
significant support.
Ad
An individual ad attached to a
particular show episode to indicate
a sponsor's support
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
PresentationEphemeral content driven largely by web design or business requirements.
AssetsEditorial or User content; Makes up the bulk of content on the site.
StructureUsed to group and organize assets. Used to retrieve
collections of assets
SEO Subtitle
Related BloggersReference Fields
Banner Image
Title
Short title
Byline
SEO KeywordsEmbed Gallery
Short summaryPull 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 TimeTotal Time
Title
Cost
Recipe
Skill Level
Course
Images
Reference Fields
SEO Subtitle
SEO TitleSubtitle
Title
Photo Gallery
Facts
Person
Images
Title
Body
Thumbnail
Logo
Body
Short Title
Title
Show
Show
Subtitle
Title
Episode Premiere Date
Episode number
Episode
Title
Reference Fields
Body
Promote
Playlist
Display Name
Title
Season
Title
Subtitle
Pull Quote
Body text w/summary
Page / Feature
SEO Keywords
SEO Title
Title
GameKiptronic URL
Video CMS DataReference Fields
TagsNotes
IngredientsDirectionsReference Fields
Compass Show IDSocial Links
Template Elements
Tune InCast
Body
PremiereFinaleImages
Template Elements
Season
SubtitleSEO SubtitlePromoteGame CodeReference Fields
PromoteReference Fields
ImageCall to ActionReference Fields
Domain modeling72
Body
Gallery
Calculator
Footnote
Infographic
Client quote
Directions
Warning
Tweet
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
Content audits
‣ Discover what unholy things are being done ‣ Pave worn paths: Automate what editors really use ‣ Spot opportunities to streamline
76
Ubiquitous language
Uniting developers, subject matter experts, designers, writers, business stakeholders, and random passers-by
78
Suddenly, linguistics
‣ Patterning (Structure) ‣ Duality (Components) ‣ Productivity (Flexibility) ‣ Learnability
Your “content model” is a unique language.
80
Most of your content will be the same as everyone else’s.
Humans share 96% of their DNA with chimps.
The differences matter.
83
…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
In the text (House styles)
‣ Use HTML first ‣ Custom classes second ‣ Custom tags last ‣ WYSIWYG editor plugins
and shortcodes can help
98
In a field (Chunky data)
‣ Let templates handle it ‣ If position matters, use
placeholder tokens ‣ Keep the body clean!
99
In another story (Linked content)
‣ Store relationships in a dedicated field ‣ Curation is content ‣ If position matters, use
placeholder tokens
100
On the web (Remote embeds)
‣ Use shortcodes and placeholders ‣ Only store the ID ‣ Use a “blob” content
type for custom embeds
101
…Exercise!
For each type of component on your page… …What data it needs …Where it should live …How you might repurpose them
103
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
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
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
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
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
Noteworthy nerds113
Mike Atherton @mikeatherton
Deane Barker @gadgetopia
Sara Wachter-Boettcher @sara_ann_marie