Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modeling Rich Narrative Content

2,437 views

Published on

A Confab Intensive Workshop on narrative modeling (aka, how to avoid the horrors of raw HTML in the real world)

Published in: Design

Modeling Rich Narrative Content

  1. 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
  2. 2. Hello, friends! I’m @eaton. 2
  3. 3. Hello, friends! I’m @eaton. 2
  4. 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. 5. 1: Problems “Web content is pain, Highness.Anyone who says differently is selling something.” Westley,The Princess Bride 4
  6. 6. The Project. 5
  7. 7. Dense content! 6
  8. 8. Funky formatting! 7
  9. 9. Embedded bits! 8
  10. 10. Personalization! 9
  11. 11. Personalization! 9 Conditional text! Managers only!
  12. 12. They needed it all. 10
  13. 13. 11
  14. 14. Now, I see it everywhere. 12
  15. 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. 16. 14
  17. 17. 15 <html> ☹</html>
  18. 18. 16 <html> ☹</html>
  19. 19. 17 Title Summary Author Body Gallery
  20. 20. 18 Title Summary Author Body Gallery Name Bio URL Photo Twitter
  21. 21. 19 Title Summary Author Body Gallery Mini Blobs
  22. 22. 20 Body Body Body Body Body Body Body Body Body Gallery?
  23. 23. 21 Wheeee!
  24. 24. 22
  25. 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. 26. 24 Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
  27. 27. 25 WYSIWYG
  28. 28. The Battle for the Body Field 26
  29. 29. 2: Solutions Three complimentary techniques can tame the body field and bring order to your chaos. 27
  30. 30. Metadata-driven template swapping 28
  31. 31. Design = Decisions 30
  32. 32. Capture editorial decisions explicitly ‣ Priority, not size ‣ Emphasis, not visual style ‣ Relationship, not position
 …And change templates based on that data. 31
  33. 33. 32
  34. 34. 33
  35. 35. 33
  36. 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
  37. 37. Stackable components 35
  38. 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. 39
  40. 40. 40
  41. 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. 42. Embedded components 42
  43. 43. Don’t tell the others, this one’s my favorite 43
  44. 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. 45. Insert placeholders 45 [gallery:1] <gallery id=1/> <div data-gallery=1/>
  46. 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. 47
  48. 48. 48
  49. 49. 48
  50. 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. 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. 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. 53. Suddenly, XML 50
  54. 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. 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. 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.
  57. 57. 54 Body text w/placeholders Metadata Chunky Fields Relationships Attached files
  58. 58. …Exercise! Which techniques fit your page, and why? Rule-based templates Stacked content modules Placeholders in the body text 55
  59. 59. Break! Delicious cupcakes, because it’s Confab. 56
  60. 60. 3: Vocabulary The first step is developing a consistent language to identify and describe your content. 57
  61. 61. 1. What components do we use? 2. What purpose do they serve? 3. What patterns are emerging? 58
  62. 62. Top-down, Bottom-up 59
  63. 63. Design breakdown 60 Design breakdown
  64. 64. Design breakdown 61 $ $ $
  65. 65. Design breakdown 62 $ $ $
  66. 66. Design breakdown 63
  67. 67. Design breakdown 64
  68. 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. 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
  70. 70. Domain modeling 67 ArticleTopicBioAdReviewProductGalleryService
  71. 71. Domain modeling 68 Article Topic Bio Ad Review Product Service Gallery
  72. 72. Domain modeling 69 Article Topic Bio Ad Review Product Service Gallery
  73. 73. Domain modeling 71 Article Title Author Tagline Pull quote Photo Dateline SummaryPhoto Body
  74. 74. Domain modeling 72 Body Gallery Calculator Footnote Infographic Client quote Directions Warning Tweet
  75. 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
  76. 76. Content audits 74
  77. 77. 75
  78. 78. 75
  79. 79. 75
  80. 80. Content audits ‣ Discover what unholy things are being done ‣ Pave worn paths: Automate what editors really use ‣ Spot opportunities to streamline 76
  81. 81. 77 Design Domain Content
  82. 82. Ubiquitous language Uniting developers, subject matter experts, designers, writers, business stakeholders, and random passers-by 78
  83. 83. 79 ? $
  84. 84. Suddenly, linguistics ‣ Patterning (Structure) ‣ Duality (Components) ‣ Productivity (Flexibility) ‣ Learnability Your “content model” is a unique language. 80
  85. 85. 81
  86. 86. 82
  87. 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. 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. 89. 4: Modeling Breaking down the reusable components, and figuring out how to work with them. 85
  90. 90. 1. What’s its job? 2. What data does it need? 3. Where does it live? 86
  91. 91. What’s its job? 87
  92. 92. Provide readers with the “Cliff’s Notes” version of an important issue or conflict 88
  93. 93. Break up long text, giving visual “skimmers” a place to pause and engage 89
  94. 94. Allow readers to analyze the financial information contained in an article 90
  95. 95. What data does it need? 91
  96. 96. Quote with attribution Quote text Attribution text Position 92
  97. 97. Embedded photo gallery Title Summary text Multiple photos Link to gallery page 93
  98. 98. Video clip Video asset Air date Tagline Next video 94
  99. 99. Related story Story ID Custom tagline 95
  100. 100. Dynamic chart Title Tagline Data table Source 96
  101. 101. Where does it live? 97
  102. 102. In the text (House styles) ‣ Use HTML first ‣ Custom classes second ‣ Custom tags last ‣ WYSIWYG editor plugins and shortcodes can help 98
  103. 103. In a field (Chunky data) ‣ Let templates handle it ‣ If position matters, use placeholder tokens ‣ Keep the body clean! 99
  104. 104. In another story (Linked content) ‣ Store relationships in a dedicated field ‣ Curation is content ‣ If position matters, use placeholder tokens 100
  105. 105. On the web (Remote embeds) ‣ Use shortcodes and placeholders ‣ Only store the ID ‣ Use a “blob” content type for custom embeds 101
  106. 106. You’re building a content toolbox 102
  107. 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. 108. 5: Ye Old Recap 104
  109. 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. 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. 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. 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. 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. 114. Giving your content creators the tools they need 110
  115. 115. Additional Resources 111
  116. 116. Bodacious books 112
  117. 117. Noteworthy nerds 113 Mike Atherton @mikeatherton Deane Barker @gadgetopia Sara Wachter-Boettcher @sara_ann_marie
  118. 118. Thank you! 114

×