Battle for the Body Field (DrupalCon)
•
68 likes•18,082 views
Can media-rich longform content exist in a world of structured content and multi-channel publishing? Yes. Oh, yes.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Battle for the Body Field (DrupalCon)
Similar to Battle for the Body Field (DrupalCon) (20)
More from Jeff Eaton
More from Jeff Eaton (20)
Recently uploaded
Recently uploaded (20)
Battle for the Body Field (DrupalCon)
- 1. The Battle For The Body Field Building future-friendly content Drupalcon Los Angeles, 5/12/2015 1 ^narrative
- 2. Hi! I’m @eaton. I’m with Lullabot. 2
- 9. Personalization! 9 Unless you’re a Level 3 manager in Germany or France…
- 10. They needed it all. 10
- 11. [ Interlude ] 11
- 12. 1212
- 13. 1212
- 14. 13
- 15. 13
- 16. 13
- 17. 13
- 18. Content pressures: ‣ Greater flexibility ‣ More efficient reuse ‣ Faster production ‣ Richer narratives 14
- 19. ✓ Narrative text Reports, documentation, long-form news ✓ Islands of structure Galleries, instruction, data visualizations ✓ Placement that matters “But the gallery goes with that paragraph!” 15
- 21. More Fields & Entities? 17
- 22. Cleaner Markup? 18 <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>
- 23. 19 Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
- 24. 20
- 27. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 28. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 29. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 30. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
- 31. Eliminate Boilerplate 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> <gallery id=1>Tagline!</gallery>
- 33. Use Placeholders 24 [gallery:1] <gallery id=1/> <div data-gallery=1/>
- 35. Transform For Output 25 <gallery id=1>Tagline!</gallery>
- 36. Transform For Output 25 <gallery id=1>Tagline!</gallery> 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 ▶ ▶ ▶ ▶ ▶ ▶
- 38. 27
- 39. 28
- 40. 29
- 41. 29
- 42. 30
- 43. 30
- 44. 30
- 45. 31 <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>
- 46. 31 <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>
- 47. 31 <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>
- 48. 31 <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>
- 49. Find Your Content’s Narrative Vocabulary 32
- 50. Ubiquitous Language ‣ Developers ‣ Business Experts ‣ Designers ‣ Content Authors 33
- 52. Meanwhile, Linguistics ‣ Duality (Components) ‣ Creativity (Reuse) ‣ Patterning (Rules) 35
- 53. [ woah there ] 36
- 54. Making It Happen Once you’ve figured that out, it’s just work. 37
- 55. Style Guides & Component Libraries You’re probably already doing it! 38
- 56. Atomic Design 39
- 57. HTML5, Shadow DOM, React… 40 <gallery id=1/> JS JS HTML DATA JS HTML JS HTML CSS3 DATA HTML
- 58. Node Embed Token Insert Entity Entity Embed 41 Tokens and tags for transclusion.
- 59. Node Embed Token Insert Entity Entity Embed 41 Tokens and tags for transclusion.
- 60. Node Embed Token Insert Entity Entity Embed 41 Tokens and tags for transclusion.
- 61. Shortcodes 42
- 62. Node View Modes Field Formatters 43 Name and reuse a particular display style
- 66. 46
- 67. Three Problems ‣ Narrative text ‣ Islands of structure ‣ Placement that matters 47
- 68. Four Steps ‣ Define your “content language” ‣ Use fields, entities, and custom markup ‣ Store, manage your vocabulary, not HTML’s ‣ Transform for output 48
- 69. Five Payoffs ‣ More creative freedom ‣ Easier to transform and repurpose ‣ Streamlined editing ‣ Less one-off development ‣ Improved communication 49
- 72. Related Links 52 • alistapart.com/article/battle-for-the-body-field • storyneedle.com/rich-narrative-possible-structured-content • slideshare.net/reduxd/modeling-structured-content-ias13-workshop • gadgetopia.com/post/8356 • insertcontenthere.com • patternlab.io • techcrunch.com/2014/03/23/layout-in-flipboard-for-web-and-windows • responsivenews.co.uk/post/77054578784 • smashingmagazine.com/2013/06/26/controlling-presentation-in- structured-content