modeling rich narrative content

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

Hello, friends! I’m @eaton.

2

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

The Project.5

Dense content!6

Funky formatting!7

Embedded bits!8

Personalization!9

Personalization!9

Conditional text! Managers only!

They needed it all.10

Now, I see it everywhere.

12

1. Narrative textCase studies, documentation, news

2. Islands of structureGalleries, instructions, data visualizations

3. Placement that matters “The gallery goes with that paragraph!”

13

15

<html>

☹ </html>

16

<html>

☹ </html>

17

Title Summary Author Body Gallery

18


Name Bio URL Photo Twitter

19


Mini Blobs

20

Body Body Body Body Body

Body Body Body Body

Gallery?

21

Wheeee!

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

25

WYSIWYG

The Battle for the Body Field

26

2: Solutions

Three complimentary techniques can tame the body field and bring order to your chaos.

27

Metadata-driven template swapping

28

Design = Decisions30

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

Stackable components

35

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

Embedded components

42

Don’t tell the others, this one’s my favorite

43

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>

Insert placeholders45

[gallery:1]

<gallery id=1/>

<div data-gallery=1/>

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 no to WYSIWYG.”</quote> <attribution>Jeff Eaton</attribution> <title>Digital Strategist, Lullabot</title> </pullquote> <assets> <asset id=1 /> </assets> Here’s HTML, with formatting!… And an inline quote: <asset_inline company="GOOG"/>! <group> </body>

Suddenly, XML

50

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> This text will be replaced by the boilerplate legal disclaimer.

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.

54

Body text w/placeholders

MetadataChunky Fields

Relationships

Attached files

…Exercise!

Which techniques fit your page, and why? Rule-based templates Stacked content modules Placeholders in the body text

55

Break!

Delicious cupcakes, because it’s Confab.

56

3: Vocabulary

The first step is developing a consistent language to identify and describe your content.

57

1. What components do we use? 2. What purpose do they serve? 3. What patterns are emerging?

58

Top-down, Bottom-up

59

Design breakdown60

Design breakdown

Design breakdown61

$ $ $

Design breakdown62

$ $ $

Design breakdown63

Design breakdown64

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 modeling67

ArticleTopicBioAdReviewProductGalleryService

Domain modeling68

Article

Topic

Bio

AdReview

ProductServiceGallery

Domain modeling69

Article

Topic

Bio

AdReview

ProductServiceGallery

Domain modeling71

Article Title

AuthorTagline

Pull quotePhoto

Dateline

SummaryPhoto

Body

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 audits74

Content audits

‣ Discover what unholy things are being done ‣ Pave worn paths: Automate what editors really use ‣ Spot opportunities to streamline

76

77

DesignDomain

Content

Ubiquitous language

Uniting developers, subject matter experts, designers, writers, business stakeholders, and random passers-by

78

79

? $

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

4: Modeling

Breaking down the reusable components, and figuring out how to work with them.

85

1. What’s its job? 2. What data does it need? 3. Where does it live?

86

What’s its job?

87

Provide readers with the “Cliff’s Notes” version of an important issue or conflict

88

Break up long text, giving visual “skimmers” a place to pause and engage

89

Allow readers to analyze the financial information contained in an article

90

What data does it need?

91

Quote with attribution

Quote text Attribution text

Position

92

Embedded photo gallery

Title Summary text Multiple photos Link to gallery page

93

Video clip

Video asset Air date Tagline

Next video

94

Related story

Story ID Custom tagline

95

Dynamic chart

Title Tagline Data table Source

96

Where does it live?

97

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

You’re building a content toolbox

102

…Exercise!

For each type of component on your page… …What data it needs …Where it should live …How you might repurpose them

103

5: Ye Old Recap104

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

Giving your content creators the tools

they need

110

Additional Resources111

Bodacious books112

Noteworthy nerds113

Mike Atherton @mikeatherton

Deane Barker @gadgetopia

Sara Wachter-Boettcher @sara_ann_marie

Thank you!

114