Embed Size (px)
Citation preview
The Battle For The Body FieldBuilding future-friendly content
Drupalcon Los Angeles, 5/12/2015
1
^ narrative
Hi! I’m @eaton. I’m with Lullabot.
2
We do big content.
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 textReports, documentation, long-form news
✓ Islands of structureGalleries, instruction, data visualizations
✓ Placement that matters“But the gallery goes with that paragraph!”
15
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"><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>
19
NeedTeaser
Chapter Related stories
Author bio Photo credit
Promoted
Aside Section Unordered List Paragraph Citation Emphasis
Have
20
So… The Solution?21
Define The Vocabulary22
Define The Vocabulary22
Stock QuoteNext Step
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary22
Stock QuoteNext Step
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary22
Stock QuoteNext Step
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Define The Vocabulary22
Stock QuoteNext Step
PersonalityTip
Office Location
Price Change
Anecdote
Album
Prize
Chapter
Eliminate Boilerplate23
<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>
Use Placeholders24
Use Placeholders24
[gallery:1]
<gallery id=1/>
<div data-gallery=1/>
Transform For Output25
Transform For Output25
<gallery id=1>Tagline!</gallery>
Transform For Output25
<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
▶
▶
▶
▶
▶
▶
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> <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>
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>
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>
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>
Find Your Content’s Narrative Vocabulary
32
Ubiquitous Language
‣Developers ‣ Business Experts ‣Designers ‣ Content Authors
33
34
Editor
DesignerDeveloper
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 LibrariesYou’re probably already doing it!
38
Atomic Design39
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.
Shortcodes42
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 HTML’s ‣ Transform for output
48
Five Payoffs
‣More creative freedom ‣ Easier to transform and repurpose ‣ Streamlined editing ‣ Less one-off development ‣ Improved communication
49
50
Editor
DesignerDeveloper
Manager
Excellent Books51
Related Links52
• 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
