![Insert placeholders
45
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>](https://image.slidesharecdn.com/body-field-confab-2015-150901232201-lva1-app6891/75/modeling-rich-narrative-content-45-2048.jpg?cb=1668653923)
Modeling Rich Narrative Content
•18 likes•2,857 views
Report
Share
Download to read offline
A Confab Intensive Workshop on narrative modeling (aka, how to avoid the horrors of raw HTML in the real world)
More Related Content
What's hot
What's hot(20)
![How to Write a Query in Brandwatch [Excerpt]](https://cdn.slidesharecdn.com/ss_thumbnails/thebrandwatchguidegettingstartedexcerpt2-110803041737-phpapp01-thumbnail.jpg?width=768&fit=bounds)
Viewers also liked
Viewers also liked(15)
Similar to Modeling Rich Narrative Content
Similar to Modeling Rich Narrative Content(20)
More from Jeff Eaton
More from Jeff Eaton(20)
Recently uploaded
Recently uploaded(20)
Modeling Rich Narrative Content
- 1. The Battle for the Body Field Modeling rich narrative content Because Heaven knows your CMS won’t do it for you Jeff Eaton Tuesday, September 1st Confab Intensive 2015 1
- 4. The schedule 19:00 AM: The problem, the solutions 10:00 AM: Delicious snacks! 10:20 AM: Building a vocabulary 11:00 AM: Modeling components 12:00 PM: Delicious lunch! 3
- 5. 1: Problems “Web content is pain, Highness.Anyone who says differently is selling something.” Westley,The Princess Bride 4
- 12. They needed it all. 10
- 13. 11
- 14. Now, I see it everywhere. 12
- 15. 1. Narrative text Case studies, documentation, news 2. Islands of structure Galleries, instructions, data visualizations 3. Placement that matters “The gallery goes with that paragraph!” 13
- 16. 14
- 22. 20 Body Body Body Body Body Body Body Body Body Gallery?
- 23. 21 Wheeee!
- 24. 22
- 25. Clean HTML won’t solve this problem. 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>
- 26. 24 Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
- 27. 25 WYSIWYG
- 28. The Battle for the Body Field 26
- 29. 2: Solutions Three complimentary techniques can tame the body field and bring order to your chaos. 27
- 32. Capture editorial decisions explicitly ‣ Priority, not size ‣ Emphasis, not visual style ‣ Relationship, not position …And change templates based on that data. 31
- 33. 32
- 34. 33
- 35. 33
- 36. Metadata-driven template swapping ✔ Vary layout based on optional fields, metadata, etc. ✔ Keeps complexity in the design/templates ✔ Easy to adapt to new designs, publishing channels ✔ Easy to bolt onto most CMSs ✖ Body field remains a black box 34
- 38. Building your page from LEGO blocks ‣ Story becomes a collection of smaller components ‣ Components can be reused across multiple stories ‣ Complex functionality can be componentized, too ‣ Divi Theme for Wordpress, Paragraphs or Entity References for Drupal, Matrix for Craft CMS 38
- 39. 39
- 40. 40
- 41. Stackable components ✔ Well-suited to “step-by-step” narratives ✔ Works great for home pages, landing pages, too ✔ Lends itself to content reuse ✖ Forces editors to break up long text 41
- 43. Don’t tell the others, this one’s my favorite 43
- 44. Simplify markup 44 <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>
- 45. Insert placeholders 45 [gallery:1] <gallery id=1/> <div data-gallery=1/>
- 46. Transform on output 46 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 ▶ ▶ ▶ ▶ ▶ ▶ <gallery id=1>Tagline!</gallery>
- 47. 47
- 48. 48
- 49. 48
- 50. 49 <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>
- 51. 49 <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>
- 52. 49 <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>
- 53. Suddenly, XML 50
- 54. 51 <task id="signup"> <title>Signing up for health insurance</title> <taskbody> <steps> <step>List your dependents</step> <step>Gather past medical information</step> <step>Fill out forms 21a, 39b, and 92c</step> <step audience="retail"> Hand in your paperwork to a supervisor </step> <step audience="corporate"> Deliver your paperwork to the HR office </step> </steps> </taskbody> </task> <p conref="../boilerplate.xml#disclaimer"> This text will be replaced by the boilerplate legal disclaimer. </p>
- 55. Embedded components ✔ Extends “content modeling” into the text itself ✔ Replaces complex markup with placeholders ✔ Simplifies boilerplate markup with custom tags ✔ Pairs well with “WYSIWYM” editors ✔ Requires planning, training, development 52
- 56. Field guide Data driven templates Unbroken body copy surrounded by supporting elements 53 Stacked components Modular chunks of copy and media, assembled into an aggregate. Embedded modules Long stretches of body copy, with meaningfully placed components.
- 58. …Exercise! Which techniques fit your page, and why? Rule-based templates Stacked content modules Placeholders in the body text 55
- 59. Break! Delicious cupcakes, because it’s Confab. 56
- 60. 3: Vocabulary The first step is developing a consistent language to identify and describe your content. 57
- 61. 1. What components do we use? 2. What purpose do they serve? 3. What patterns are emerging? 58
- 64. Design breakdown 61 $ $ $
- 65. Design breakdown 62 $ $ $
- 68. Design breakdown ‣ Captures design patterns used to present content ‣ Meshes well with current design practices ‣ Works great if you have “systems thinkers” 65
- 69. Domain modeling Geographical Facts Hotwire Locations Property Channel Scoring Amenities Promotional Content Compset Type Chain Country State Region City Neighborhood Destination Point of Interest Lodging Type Property Room Type Rate Plan Supplier Channel Amenity Review Text TagPhoto 66 Show content Metadata Promotional content Standalone news Cast member A show host or recurring on-air TWiT personality Product A product or service mentioned o reviewed on a TWiT show or in published articles Person A tech industry personality cove on the show or in published articles on the site Top News Promo Standalone video created from clips of other TWiT episodes Free Standing Video A standalone video clip featured on the site but not associated with a particular TWiT show Breaking News A hub for news updates on an important tech news development Article Long-form written news coverage, potentially including other media Live Cam Information about the drop cams in the TWiT studios Announcement Internal TWiT news and updates, for example “We’re hosting a studio audience next week!” Transcript A textual transcript of a particular TWiT show episode. Tip How-To Interview Review Unboxing Pick “Segments” break out material from episodes for easier discovery Episode Individual (often weekly) instance of a show Show A recurring, personality-driven collection of TWiT video content Presentation Ephemeral content driven largely by web design or business requirements. Assets Editorial or User content; Makes up the bulk of content on the site. Structure Used to group and organize assets. Used to retrieve collections of assets SEO Subtitle Related Bloggers Banner Image Title Short title Byline SEO Keywords Embed Gallery Short summary Pull Quote Publish date Body text w/summary Blog & Blog Entry Body Title Video Subtitle Title Promotes Sponsor end date Sponsor Taxonomy Body Reference Fields Title Custom Section Sponsor start date Graphic Servings Subtitle Prep Time Total Time Title Cost Recipe Skill Level Course Person Title Thumbnail Logo Body Short Title Title Show Episode Premiere Date Episode number Episode Title Reference Fields Body Promote Playlist Display Name Title Season Title Page / Feature SEO Title Title Game Kiptronic URL Video CMS Data Reference Fields Tags Notes Ingredients Directions Reference Fields Compass Show ID Social Links Template Elements Tune In Cast Body Premiere Finale Images Template Elements Subtitle SEO Subtitle Image Call to Action Reference Fields
- 73. Domain modeling 71 Article Title Author Tagline Pull quote Photo Dateline SummaryPhoto Body
- 75. Domain modeling ‣ Describes discrete things, what they do, and what relationship connect them ‣ Captures the platonic form of content and communication ‣ Reveals unique perspectives and priorities 73
- 77. 75
- 78. 75
- 79. 75
- 80. Content audits ‣ Discover what unholy things are being done ‣ Pave worn paths: Automate what editors really use ‣ Spot opportunities to streamline 76
- 82. Ubiquitous language Uniting developers, subject matter experts, designers, writers, business stakeholders, and random passers-by 78
- 83. 79 ? $
- 84. Suddenly, linguistics ‣ Patterning (Structure) ‣ Duality (Components) ‣ Productivity (Flexibility) ‣ Learnability Your “content model” is a unique language. 80
- 85. 81
- 86. 82
- 87. Most of your content will be the same as everyone else’s. Humans share 96% of their DNA with chimps. The differences matter. 83
- 88. …Exercise! For each type of component on your page… …The purpose the component serves …Whether it’s unique to your brand Bonus: Suggest another component that would help tell the story 84
- 89. 4: Modeling Breaking down the reusable components, and figuring out how to work with them. 85
- 90. 1. What’s its job? 2. What data does it need? 3. Where does it live? 86
- 92. Provide readers with the “Cliff’s Notes” version of an important issue or conflict 88
- 93. Break up long text, giving visual “skimmers” a place to pause and engage 89
- 94. Allow readers to analyze the financial information contained in an article 90
- 95. What data does it need? 91
- 96. Quote with attribution Quote text Attribution text Position 92
- 97. Embedded photo gallery Title Summary text Multiple photos Link to gallery page 93
- 98. Video clip Video asset Air date Tagline Next video 94
- 99. Related story Story ID Custom tagline 95
- 102. In the text (House styles) ‣ Use HTML first ‣ Custom classes second ‣ Custom tags last ‣ WYSIWYG editor plugins and shortcodes can help 98
- 103. In a field (Chunky data) ‣ Let templates handle it ‣ If position matters, use placeholder tokens ‣ Keep the body clean! 99
- 104. In another story (Linked content) ‣ Store relationships in a dedicated field ‣ Curation is content ‣ If position matters, use placeholder tokens 100
- 105. On the web (Remote embeds) ‣ Use shortcodes and placeholders ‣ Only store the ID ‣ Use a “blob” content type for custom embeds 101
- 106. You’re building a content toolbox 102
- 107. …Exercise! For each type of component on your page… …What data it needs …Where it should live …How you might repurpose them 103
- 108. 5: Ye Old Recap 104
- 109. The problem: ‣ Chunky fields + templates are rigid ‣ Free HTML is a horror show ‣ Multi-channel & responsive require more rigor ‣ Narrative text with rich media is hard 105
- 110. The solutions: ‣ Use metadata to capture editorial intent, swap templates based on metadata ‣ Use stackable content modules to quickly build “aggregate stories” ‣ For intertwingled text and rich elements, use placeholder tokens and custom tags 106
- 111. Your vocabulary: ‣ The unique language your organization uses to communicate with readers/customers/visitors ‣ The building blocks of your narratives ‣ Bridges the gap between content model, voice and tone, design pattern library 107
- 112. Modeling: ‣ The nitty-gritty details that make your content components real ‣ What job does the component perform? ‣ What data does it need? ‣ Where does it live? 108
- 113. The takeaway ‣ Flexible narrative content is hard ‣ A “content vocabulary” gets everyone synced up ‣ Stories are packages: Text, assets, relationships, and placeholders to position things inside the body ‣ Standardize components to reduce the cost of creative reuse 109
- 114. Giving your content creators the tools they need 110
- 116. Bodacious books 112
- 117. Noteworthy nerds 113 Mike Atherton @mikeatherton Deane Barker @gadgetopia Sara Wachter-Boettcher @sara_ann_marie
- 118. Thank you! 114