1 / 118

Modeling Rich Narrative Content

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

eaton
Download Presentation

Modeling Rich Narrative Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

  2. 2 Hello, friends! I’m @eaton.

  3. 2 Hello, friends! I’m @eaton.

  4. 3 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!

  5. 4 1: Problems “Web content is pain, Highness. Anyone who says differently is selling something.” Westley, The Princess Bride

  6. 5 The Project.

  7. 6 Dense content!

  8. 7 Funky formatting!

  9. 8 Embedded bits!

  10. 9 Personalization!

  11. 9 Personalization! Conditional text! Managers only!

  12. 10 They needed it all.

  13. 11

  14. 12 Now, I see it everywhere.

  15. 13 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!”

  16. 14

  17. 15 <html> ☹ </html>

  18. 16 <html> ☹ </html>

  19. 17 Title Summary Author Body Gallery

  20. 18 Title Summary Author Body Gallery Name Bio URL Photo Twitter

  21. 19 Title Summary Author Body Gallery Mini Blobs

  22. 20 Body Body Body Body Body Gallery? Body Body Body Body

  23. 21 Wheeee!

  24. 22

  25. 23 Clean HTML won’t solve this problem. <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 Have Need Teaser Chapter Aside Section Unordered List Paragraph Citation Emphasis Related stories Author bio Photo credit Promoted

  27. 25 WYSIWYG

  28. 26 The Battle for the Body Field

  29. 27 2: Solutions Three complimentary techniques can tame the body field and bring order to your chaos.

  30. 28 Metadata-driven template swapping

  31. 30 Design = Decisions

  32. 31 Capture editorial decisions explicitly ‣ Priority, not size ‣ Emphasis, not visual style ‣ Relationship, not position
 …And change templates based on that data.

  33. 32

  34. 33

  35. 33

  36. 34 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

  37. 35 Stackable components

  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

  39. 39

  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

  42. 42 Embedded components

  43. 43 Don’t tell the others, this one’s my favorite

  44. 44 Simplify markup <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 <gallery id=1/> [gallery:1] <div data-gallery=1/>

  46. 46 Transform on output <gallery id=1>Tagline!</gallery> Mobile web Enhanced web Title, link Scrolling gallery Image, caption, link Strip entirely “See page x…” JSON data ▶ ▶ Email ▶ Partner API Printable PDF Mobile app ▶ ▶ ▶

  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>

More Related