The Battle For The Body Field
•
8 j'aime•2,622 vues
The document discusses balancing narrative flow with structured content by using placeholders instead of inline content blocks, transforming content for different outputs, not relying solely on HTML, and clarifying the content vocabulary. The speaker advocates placing structured content like galleries and data visualizations in placeholders and transforming them differently for various outputs like mobile versus desktop. Relying only on HTML limits flexibility, so using a shared vocabulary across editorial, design, and development allows richer content.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à The Battle For The Body Field
Similaire à The Battle For The Body Field (20)
Plus de Jeff Eaton
Plus de Jeff Eaton (20)
Dernier
Dernier (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