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.
The Battle For The
Body Field
Building future-friendly content
Drupalcon Los Angeles, 5/12/2015
1
^narrative
Hi! I’m @eaton.
I’m with Lullabot.
2
We do bigcontent.
3
4
Title
Summary
Byline
Body
Gallery
<html>
☹</html>
5
Thar Be
Dragons
Title
Summary
Byline
Body
Gallery
The Project.
6
Easy to edit!
7
Rich media-ish!
8
Personalization!
9
Unless you’re a
Level 3 manager in
Germany or France…
They needed it all.
10
[ Interlude ]
11
1212
1212
13
13
13
13
Content pressures:
‣ Greater flexibility
‣ More efficient reuse
‣ Faster production
‣ Richer narratives
14
✓ Narrative text

Reports, documentation, long-form news
✓ Islands of structure

Galleries, instruction, data visualizatio...
Smarter Templates?
16
More Fields & Entities?
17
Cleaner Markup?
18
<figure class="gallery">
<ul>
<li><a href=“/gal/1#1"><img src=“1.jpg”></a></li>
<li><a href=“/gal/1#2"><...
19
Need
Teaser
Chapter
Related stories
Author bio
Photo credit
Promoted
Aside
Section
Unordered List
Paragraph
Citation
Em...
20
So…The Solution?
21
Define The Vocabulary
22
Define The Vocabulary
22
Stock Quote
Next Step
Personality
Tip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary
22
Stock Quote
Next Step
Personality
Tip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary
22
Stock Quote
Next Step
Personality
Tip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary
22
Stock Quote
Next Step
Personality
Tip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Eliminate Boilerplate
23
<figure class="gallery">
<ul>
<li><a href=“/gal/1#1"><img src=“1.jpg”></a></li>
<li><a href=“/gal/...
Use Placeholders
24
Use Placeholders
24
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>
Transform For Output
25
Transform For Output
25
<gallery id=1>Tagline!</gallery>
Transform For Output
25
<gallery id=1>Tagline!</gallery>
Mobile web
Enhanced web
Email
Partner API
Printable PDF
Mobile ap...
No Rocket Science
Required
26
27
28
29
29
30
30
30
31
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
31
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
31
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
31
<body>
<group>
<subtitle>The article intro…</subtitle>
<pullquote>
<quote>“Just say <em>no</em> to WYSIWYG.”</quote>
<a...
Find Your Content’s
Narrative Vocabulary
32
Ubiquitous Language
‣ Developers
‣ Business Experts
‣ Designers
‣ Content Authors
33
34
Editor
Designer
Developer
Manager
Meanwhile, Linguistics
‣ Duality (Components)
‣ Creativity (Reuse)
‣ Patterning (Rules)
35
[ woah there ]
36
Making It Happen
Once you’ve figured that out, it’s just work.
37
Style Guides &
Component Libraries
You’re probably already doing it!
38
Atomic Design
39
HTML5, Shadow DOM,
React…
40
<gallery id=1/>
JS JS
HTML DATA
JS HTML JS
HTML CSS3
DATA HTML
Node Embed
Token Insert Entity
Entity Embed
41
Tokens and tags for transclusion.
Node Embed
Token Insert Entity
Entity Embed
41
Tokens and tags for transclusion.
Node Embed
Token Insert Entity
Entity Embed
41
Tokens and tags for transclusion.
Shortcodes
42
Node View Modes
Field Formatters
43
Name and reuse a particular display style
Roll Your Own!
Nerdapalooza!
44
Roll Your Own!
Nerdapalooza!
44
The Shared
Vocabulary
45
46
Three Problems
‣ Narrative text
‣ Islands of structure
‣ Placement that matters
47
Four Steps
‣ Define your “content language”
‣ Use fields, entities, and custom markup
‣ Store, manage your vocabulary, not H...
Five Payoffs
‣ More creative freedom
‣ Easier to transform and repurpose
‣ Streamlined editing
‣ Less one-off development
...
50
Editor
Designer
Developer
Manager
Excellent Books
51
Related Links
52
• alistapart.com/article/battle-for-the-body-field
• storyneedle.com/rich-narrative-possible-structured-co...
Upcoming SlideShare
Loading in …5
×

Battle for the Body Field (DrupalCon)

13,720 views

Published on

Can media-rich longform content exist in a world of structured content and multi-channel publishing? Yes. Oh, yes.

Published in: Design, Marketing
  • How To Make Every Day Your Perfect Day By Raising Your Vibration ★★★ http://ishbv.com/manifmagic/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: www.bit.ly/sexinarea
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • We called it "operation mind control" - as we discovered a simple mind game that makes a girl become obsessed with you. (Aand it works even if you're not her type or she's already dating someone else) Here's how we figured it out... ➤➤ http://t.cn/AiurDrZp
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: www.bit.ly/2AJerkH
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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
  3. We do bigcontent. 3
  4. 4 Title Summary Byline Body Gallery <html> ☹</html>
  5. 5 Thar Be Dragons Title Summary Byline Body Gallery
  6. The Project. 6
  7. Easy to edit! 7
  8. Rich media-ish! 8
  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 flexibility ‣ More efficient 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
  20. Smarter Templates? 16
  21. More Fields & Entities? 17
  22. Cleaner Markup? 18 <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>
  23. 19 Need Teaser Chapter Related stories Author bio Photo credit Promoted Aside Section Unordered List Paragraph Citation Emphasis Have
  24. 20
  25. So…The Solution? 21
  26. Define The Vocabulary 22
  27. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  28. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  29. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  30. Define The Vocabulary 22 Stock Quote Next Step Personality Tip Office Location Price Change Anecdote Album Prize Chapter
  31. Eliminate Boilerplate 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> <gallery id=1>Tagline!</gallery>
  32. Use Placeholders 24
  33. Use Placeholders 24 [gallery:1] <gallery id=1/> <div data-gallery=1/>
  34. Transform For Output 25
  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 ▶ ▶ ▶ ▶ ▶ ▶
  37. No Rocket Science Required 26
  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
  51. 34 Editor Designer Developer Manager
  52. Meanwhile, Linguistics ‣ Duality (Components) ‣ Creativity (Reuse) ‣ Patterning (Rules) 35
  53. [ woah there ] 36
  54. Making It Happen Once you’ve figured 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
  63. Roll Your Own! Nerdapalooza! 44
  64. Roll Your Own! Nerdapalooza! 44
  65. The Shared Vocabulary 45
  66. 46
  67. Three Problems ‣ Narrative text ‣ Islands of structure ‣ Placement that matters 47
  68. Four Steps ‣ Define your “content language” ‣ Use fields, 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
  70. 50 Editor Designer Developer Manager
  71. Excellent Books 51
  72. Related Links 52 • alistapart.com/article/battle-for-the-body-field • 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-flipboard-for-web-and-windows • responsivenews.co.uk/post/77054578784 • smashingmagazine.com/2013/06/26/controlling-presentation-in- structured-content

×