Download as PDF, PPTX
![Insert placeholders
45
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>](https://image.slidesharecdn.com/body-field-confab-2015-150901232201-lva1-app6891/85/Modeling-Rich-Narrative-Content-45-320.jpg)
Uploaded byJeff Eaton
Modeling Rich Narrative Content
The document discusses the complexities of modeling rich narrative web content and offers solutions such as metadata-driven template swapping, stackable components, and embedded components. It emphasizes the need for a consistent vocabulary to describe content and the importance of understanding content relationships and structures. The ultimate takeaway is that flexible narrative content requires careful planning and standardized components to streamline the creation and reuse of content.
More Related Content
![How to Write a Query in Brandwatch [Excerpt]](https://cdn.slidesharecdn.com/ss_thumbnails/thebrandwatchguidegettingstartedexcerpt2-110803041737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Modeling Rich Narrative Content
Modeling Rich Narrative Content
- 1. The Battle forthe 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
- 2.
- 3.
- 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 contentis pain, Highness.Anyone who says differently is selling something.” Westley,The Princess Bride 4
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12. They needed itall. 10
- 13.
- 14. Now, I seeit everywhere. 12
- 15. 1. Narrative text Casestudies, documentation, news 2. Islands of structure Galleries, instructions, data visualizations 3. Placement that matters “The gallery goes with that paragraph!” 13
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22. 20 Body Body Body Body Body BodyBody Body Body Gallery?
- 23.
- 24.
- 25. Clean HTML won’t solvethis 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 Photocredit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
- 27.
- 28. The Battle for theBody Field 26
- 29. 2: Solutions Three complimentarytechniques can tame the body field and bring order to your chaos. 27
- 30.
- 31.
- 32. Capture editorial decisions explicitly ‣Priority, not size ‣ Emphasis, not visual style ‣ Relationship, not position …And change templates based on that data. 31
- 33.
- 34.
- 35.
- 36. Metadata-driven template swapping ✔ Varylayout 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
- 37.
- 38. Building your page fromLEGO 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.
- 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
- 42.
- 43. Don’t tell theothers, this one’s my favorite 43
- 44. Simplify markup 44 <figure class="gallery"> <ul> <li><ahref="/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/> <divdata-gallery=1/>
- 46. Transform on output 46 Mobileweb 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.
- 48.
- 49.
- 50. 49 <body> <group> <subtitle>The article intro…</subtitle> <pullquote> <quote>“Justsay <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>“Justsay <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>“Justsay <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.
- 54. 51 <task id="signup"> <title>Signingup 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 “contentmodeling” 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 driventemplates 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.
- 57.
- 58. …Exercise! Which techniques fityour page, and why? Rule-based templates Stacked content modules Placeholders in the body text 55
- 59. Break! Delicious cupcakes, becauseit’s Confab. 56
- 60. 3: Vocabulary The firststep is developing a consistent language to identify and describe your content. 57
- 61. 1. What componentsdo we use? 2. What purpose do they serve? 3. What patterns are emerging? 58
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68. Design breakdown ‣ Capturesdesign patterns used to present content ‣ Meshes well with current design practices ‣ Works great if you have “systems thinkers” 65
- 69. Domain modeling Geographical FactsHotwire 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
- 70.
- 71.
- 72.
- 73. Domain modeling 71 Article Title Author Tagline Pullquote Photo Dateline SummaryPhoto Body
- 74.
- 75. Domain modeling ‣ Describesdiscrete things, what they do, and what relationship connect them ‣ Captures the platonic form of content and communication ‣ Reveals unique perspectives and priorities 73
- 76.
- 77.
- 78.
- 79.
- 80. Content audits ‣ Discoverwhat unholy things are being done ‣ Pave worn paths: Automate what editors really use ‣ Spot opportunities to streamline 76
- 81.
- 82. Ubiquitous language Uniting developers, subjectmatter experts, designers, writers, business stakeholders, and random passers-by 78
- 83.
- 84. Suddenly, linguistics ‣ Patterning(Structure) ‣ Duality (Components) ‣ Productivity (Flexibility) ‣ Learnability Your “content model” is a unique language. 80
- 85.
- 86.
- 87. Most of yourcontent will be the same as everyone else’s. Humans share 96% of their DNA with chimps. The differences matter. 83
- 88. …Exercise! For each typeof 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 downthe reusable components, and figuring out how to work with them. 85
- 90. 1. What’s itsjob? 2. What data does it need? 3. Where does it live? 86
- 91.
- 92. Provide readers withthe “Cliff’s Notes” version of an important issue or conflict 88
- 93. Break up longtext, giving visual “skimmers” a place to pause and engage 89
- 94. Allow readers toanalyze the financial information contained in an article 90
- 95. What data does itneed? 91
- 96. Quote with attribution Quotetext Attribution text Position 92
- 97. Embedded photo gallery Title Summarytext Multiple photos Link to gallery page 93
- 98. Video clip Video asset Airdate Tagline Next video 94
- 99. Related story Story ID Customtagline 95
- 100.
- 101.
- 102. In the text (Housestyles) ‣ Use HTML first ‣ Custom classes second ‣ Custom tags last ‣ WYSIWYG editor plugins and shortcodes can help 98
- 103. In a field (Chunkydata) ‣ Let templates handle it ‣ If position matters, use placeholder tokens ‣ Keep the body clean! 99
- 104. In another story (Linkedcontent) ‣ Store relationships in a dedicated field ‣ Curation is content ‣ If position matters, use placeholder tokens 100
- 105. On the web (Remoteembeds) ‣ Use shortcodes and placeholders ‣ Only store the ID ‣ Use a “blob” content type for custom embeds 101
- 106. You’re building a contenttoolbox 102
- 107. …Exercise! For each typeof component on your page… …What data it needs …Where it should live …How you might repurpose them 103
- 108. 5: Ye OldRecap 104
- 109. The problem: ‣ Chunkyfields + 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: ‣ Usemetadata 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: ‣ Theunique 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-grittydetails 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 ‣ Flexiblenarrative 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 creatorsthe tools they need 110
- 115.
- 116.
- 117. Noteworthy nerds 113 Mike Atherton @mikeatherton DeaneBarker @gadgetopia Sara Wachter-Boettcher @sara_ann_marie
- 118.