Battle for the Body Field (DrupalCon)
ā¢
68 likesā¢18,042 views
Can media-rich longform content exist in a world of structured content and multi-channel publishing? Yes. Oh, yes.
Recommended
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 ļ¬exibility ā£ More efļ¬cient 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 <ļ¬gure 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> <ļ¬gcaption><a href="gal/1">Tagline!</a></ļ¬gcaption> </ļ¬gure>
- 23. 19 Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
- 24. 20
- 27. Deļ¬ne The Vocabulary 22 Stock Quote Next Step Personality Tip Ofļ¬ce Location Price Change Anecdote Album Prize Chapter
- 28. Deļ¬ne The Vocabulary 22 Stock Quote Next Step Personality Tip Ofļ¬ce Location Price Change Anecdote Album Prize Chapter
- 29. Deļ¬ne The Vocabulary 22 Stock Quote Next Step Personality Tip Ofļ¬ce Location Price Change Anecdote Album Prize Chapter
- 30. Deļ¬ne The Vocabulary 22 Stock Quote Next Step Personality Tip Ofļ¬ce Location Price Change Anecdote Album Prize Chapter
- 31. Eliminate Boilerplate 23 <ļ¬gure 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> <ļ¬gcaption><a href="gal/1">Tagline!</a></ļ¬gcaption> </ļ¬gure> <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 ļ¬gured 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 ā£ Deļ¬ne your ācontent languageā ā£ Use ļ¬elds, 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-ļ¬eld ā¢ 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-ļ¬ipboard-for-web-and-windows ā¢ responsivenews.co.uk/post/77054578784 ā¢ smashingmagazine.com/2013/06/26/controlling-presentation-in- structured-content