Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
The Battle For
The Body Field
Balancing narrative flow with
future-friendly structure
Jeff Eaton, Lullabot
IA Summit 2015 ...
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 vocab...
7
7
7
7
8
✓ Narrative text

Reports, documentation, long-form news
✓ Islands of structure

Galleries, popup info, data visualizati...
9
Placeholders 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.
12
Placeholders vs. Inline Blobs1.
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>
13
Transform for output2.
13
Transform for output2.
<gallery id=1/>
13
Transform for output2.
<gallery id=1/>
Mobile web
Enhanced web
Email
Partner API
Printable PDF
Mobile app
Title, link
S...
14
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"></...
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"></...
Need
Teaser
Chapter
Related stories
Author bio
Photo credit
Promoted
Aside
Section
Unordered List
Paragraph
Citation
Empha...
16
Clarify your content vocabulary4.
16
Clarify your content vocabulary4.
Stock Quote
Impact Quote
Personality
Tip
Office Location
Price Change
Anecdote
Album
P...
16
Clarify your content vocabulary4.
Stock Quote
Impact Quote
Personality
Tip
Office Location
Price Change
Anecdote
Album
P...
Ye Olde Recap
1. Placeholders vs. inline blobs
2. Transform for output
3. Don’t rely on HTML
4. Clarify your content vocab...
18
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
18
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
18
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
19
Editorial
Design
Code
Build your shared vocabulary
Thank you!
20
• alistapart.com/article/battle-for-the-body-field
• storyneedle.com/rich-narrative-possible-structured-conte...
Upcoming SlideShare
Loading in …5
×

The Battle For The Body Field

2,114 views

Published on

Pressured by the demands of content reuse in a multi-device world, even lightweight blogging tools now leverage carefully modeled content types with explicit fields and schemas. Unfortunately, it all falls apart when users hit the body field: ugly ad-hoc markup creeps in, house styles evolve without planning, and critical metadata stays locked in blobs of "good enough for now" HTML.

We can solve it.

Published in: Technology
  • Hi there! Get Your Professional Job-Winning Resume Here - Check our website! http://bit.ly/resumpro
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

The Battle For The Body Field

  1. 1. The Battle For The Body Field Balancing narrative flow with future-friendly structure Jeff Eaton, Lullabot IA Summit 2015 — April 25 1
  2. 2. Hi, I’m @eaton! I’m with Lullabot. We do “big web content.” 2
  3. 3. The Demands: 1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives 3
  4. 4. The Demands: 1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives 3
  5. 5. 4
  6. 6. 4
  7. 7. It’s Hard! The End. 5
  8. 8. The solution: 1. Placeholders vs. inline blobs 2. Transform for output 3. Don’t rely on HTML 4. Clarify your content vocabulary 6
  9. 9. 7
  10. 10. 7
  11. 11. 7
  12. 12. 7
  13. 13. 8 ✓ Narrative text
 Reports, documentation, long-form news ✓ Islands of structure
 Galleries, popup info, data visualizations ✓ Placement that matters
 “But the gallery goes with that paragraph!”
  14. 14. 9 Placeholders vs. Inline Blobs1.
  15. 15. 9 Title Summary Byline Body Gallery <html> ☹</html> Placeholders vs. Inline Blobs1.
  16. 16. 10 Narrative Blobs Title Summary Byline Body Gallery Placeholders vs. Inline Blobs1.
  17. 17. 11 Body Body Body Body Body Body Body Body Body Gallery? ☹ Placeholders vs. Inline Blobs1.
  18. 18. 12 Placeholders vs. Inline Blobs1. [gallery:1] <gallery id=1/> <div data-gallery=1/>
  19. 19. 13 Transform for output2.
  20. 20. 13 Transform for output2. <gallery id=1/>
  21. 21. 13 Transform 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 ▶ ▶ ▶ ▶ ▶ ▶
  22. 22. 14 Don’t rely on HTML3.
  23. 23. 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.
  24. 24. 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.
  25. 25. Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis 15 Have Don’t rely on HTML3.
  26. 26. 16 Clarify your content vocabulary4.
  27. 27. 16 Clarify your content vocabulary4. Stock Quote Impact Quote Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  28. 28. 16 Clarify your content vocabulary4. Stock Quote Impact Quote Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  29. 29. Ye Olde Recap 1. Placeholders vs. inline blobs 2. Transform for output 3. Don’t rely on HTML 4. Clarify your content vocabulary 17
  30. 30. 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>
  31. 31. 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>
  32. 32. 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>
  33. 33. 19 Editorial Design Code Build your shared vocabulary
  34. 34. 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

×