the battle for the body field
TRANSCRIPT
The Battle For The Body FieldBalancing narrative flow with future-friendly structure
Jeff Eaton, Lullabot IA Summit 2015 — April 25
1
Hi, I’m @eaton! I’m with Lullabot. We do “big web content.”
2
The Demands:
1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives
3
The Demands:
1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives
3
4
4
It’s Hard! The End.
5
The solution:
1. Placeholders vs. inline blobs 2. Transform for output 3. Don’t rely on HTML 4. Clarify your content vocabulary
6
7
7
7
7
8
✓Narrative textReports, documentation, long-form news
✓ Islands of structureGalleries, popup info, data visualizations
✓ Placement that matters“But the gallery goes with that paragraph!”
9Placeholders vs. Inline Blobs1.
9
Title Summary Byline Body Gallery
<html>
☹ </html>
Placeholders vs. Inline Blobs1.
10
Narrative Blobs
Title Summary Byline Body Gallery
Placeholders vs. Inline Blobs1.
11
Body Body Body Body Body
Body Body Body Body
Gallery?
☹
Placeholders vs. Inline Blobs1.
12Placeholders vs. Inline Blobs1.
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>
13Transform for output2.
13Transform for output2.
<gallery id=1/>
13Transform for output2.
<gallery id=1/>
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
▶
▶
▶
▶
▶
▶
14Don’t rely on HTML3.
14
<figure class="gallery"> <ul> <li><a href="/pics/1"><img src="1.jpg"></a></li> <li><a href="/pics/2"><img src="2.jpg"></a></li> <li><a href="/pics/3"><img src="3.jpg"></a></li> </ul> <figcaption><a href="/pics">Gallery!</a></figcaption> </figure>
Don’t rely on HTML3.
14
<figure class="gallery"> <ul> <li><a href="/pics/1"><img src="1.jpg"></a></li> <li><a href="/pics/2"><img src="2.jpg"></a></li> <li><a href="/pics/3"><img src="3.jpg"></a></li> </ul> <figcaption><a href="/pics">Gallery!</a></figcaption> </figure>
“Semantic” Ain’t Enough
Don’t rely on HTML3.
NeedTeaser
Chapter Related stories
Author bio Photo credit
Promoted
Aside Section Unordered List Paragraph Citation Emphasis
15
HaveDon’t rely on HTML3.
16Clarify your content vocabulary4.
16Clarify your content vocabulary4.
Stock QuoteImpact Quote
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
16Clarify your content vocabulary4.
Stock QuoteImpact Quote
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Ye Olde Recap
1. Placeholders vs. inline blobs 2. Transform for output 3. Don’t rely on HTML 4. Clarify your content vocabulary
17
18
<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>
18
<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>
18
<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>
19
EditorialDesign
Code
Build your shared vocabulary
Thank you!20
• alistapart.com/article/battle-for-the-body-field • storyneedle.com/rich-narrative-possible-structured-content • slideshare.net/reduxd/modeling-structured-content-ias13-workshop • responsivenews.co.uk/post/77054578784/ • gadgetopia.com/post/8356 • patternlab.io