![12
Placeholders vs. Inline Blobs1.
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>](https://image.slidesharecdn.com/bfbf-ias-150425110219-conversion-gate02/75/the-battle-for-the-body-field-18-2048.jpg?cb=1668617560)
The Battle For The Body Field
•8 likes•2,621 views
Download to read offline
Report
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.
Recommended
More Related Content
What's hot
What's hot(20)
Similar to The Battle For The Body Field
Similar to The Battle For The Body Field(20)
More from Jeff Eaton
More from Jeff Eaton(20)
Recently uploaded
Recently uploaded(20)
The Battle For The Body Field
- 1. The Battle For The Body Field Balancing narrative flow with future-friendly structure Jeff Eaton, Lullabot IA Summit 2015 — April 25 1
- 2. Hi, I’m @eaton! I’m with Lullabot. We do “big web content.” 2
- 3. The Demands: 1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives 3
- 4. The Demands: 1. Greater flexibility 2. More efficient reuse 3. Faster production 4. Richer narratives 3
- 5. 4
- 6. 4
- 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. 7
- 10. 7
- 11. 7
- 12. 7
- 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. 9 Placeholders vs. Inline Blobs1.
- 17. 11 Body Body Body Body Body Body Body Body Body Gallery? ☹ Placeholders vs. Inline Blobs1.
- 18. 12 Placeholders vs. Inline Blobs1. [gallery:1] <gallery id=1/> <div data-gallery=1/>
- 20. 13 Transform for output2. <gallery id=1/>
- 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. 14 Don’t rely on HTML3.
- 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. 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. 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. 16 Clarify your content vocabulary4.
- 27. 16 Clarify your content vocabulary4. Stock Quote Impact Quote Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 28. 16 Clarify your content vocabulary4. Stock Quote Impact Quote Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 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. 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. 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. 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. 19 Editorial Design Code Build your shared vocabulary
- 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