The Battle for the Body Field

The Battle For The Body Field Fighting the right battles
Solving the right problems Building the right tools 1 @eaton : #drupalcon : #bodybattle : 4/6/2014

THE WYSIWYG WARS 3 Ugly markup Lazy editors Markdown Easy
Clean markup Markup Literacy Real HTML Hard

THE WYSIWYG WARS 3 Ugly markup Lazy editors Markdown Easy
Clean markup Markup Literacy Real HTML Hard NO!

‣ Chunks vs. Blobs is insufﬁcient ‣ HTML is insufﬁcient
‣ Learn from XML, DITA ‣ Store meaning, then transform 4

The Hard Problem 5

Wheeee! 7

Redesigns hurt Reuse suffers Mobile breaks 8

9 <html> ☹ </html>

11 Title Summary Byline Body Gallery <html> ☹ </html>

13 HOLD ON, CHAMP.

14 Title Summary Byline Body Gallery Miniblobs

15 Body Body Body Body Body Body Body Body Body
Gallery?

15 Well, Shit.

The Harder Problem 16

✓ Narrative text  Reports, documentation, long-form news ✓ Islands of
structure  Galleries, popup info, embeds ✓ Placement that matters  “But the gallery goes with that paragraph!” 17

<figure class="gallery"> <ul> <li><a href="1.html"><img src="1.jpg"></a></li> <li><a href="2.html"><img src="2.jpg"></a></li> <li><a
href="3.html"><img src="3.jpg"></a></li> </ul> <figcaption> <a href="gal.html>Our gallery!</a> </figcaption> </figure> But Semantic HTML! 20

<figure class="gallery"> <ul> <li><a href="1.html"><img src="1.jpg"></a></li> <li><a href="2.html"><img src="2.jpg"></a></li> <li><a
href="3.html"><img src="3.jpg"></a></li> </ul> <figcaption> <a href="gal.html>Our gallery!</a> </figcaption> </figure> But Semantic HTML! 20 NO!

Browser meaning vs. Content meaning 21

Vocabulary Mismatch Aside Section List Paragraph Citation Teaser Chapter Gallery
Author bio Credits 22

“HTML is rich enough for a designer to represent complex
content, but not precise enough to describe and store content in a presentation-independent fashion. WYSIWYG tools can make the problem worse: rather than shielding content creators from the complexity of markup, they make it easier to describe content using the wrong vocabulary. 23 Jeff Eaton, quoting himself, because it’s his presentation

Meanwhile, in DITA Land 25

27 <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 ofﬁce </step> </steps> </taskbody> </task> This text will be replaced by the boilerplate legal disclaimer.

‣ Model and store meaning 28

‣ Model and store meaning 28 <warning type="hardware"> Don’t turn
off the server! </warning>

‣ Model and store meaning ‣ Extend a core vocabulary
29

29 <task> ! ! <a trust="unveriﬁed">

‣ Use placeholder markup 30

‣ Use placeholder markup 30 <gallery id="42" caption="Our gallery!" />

‣ Use placeholder markup ‣ Expand & transform for output 31

‣ Use placeholder markup ‣ Expand & transform for output ‣ Tailor the editing tools 32

Skeptical Cat 33

It’s not “The Future” 34

38 <div data-entity="node" data-entity-id="1" data-view-mode="teaser" data-caption="This is my node!" />

Making it happen 40

Build on HTML 41 Frankly, this is ﬁne.

Data Attributes For Stackable Behavior 42 <img src="test.jpg" data-caption="This is
the caption!" data-audience="admin"/>

Custom Elements For Self-Contained Stuff 43 <glossary term="800-number"/>

Transform For Output ‣ Drupal ﬁlters ‣ Response handlers ‣
jQuery plugins ‣ Angular directives ‣ Format mapping 44

‣ Store only the meaning ‣ Tailor WYSIWYG to that
vocabulary ‣ Transform for presentation 45 ‣ Tools that match the content ‣ Cleaner integration with external systems ‣ Simpler WYSIWYG implementation ‣ Smooth transition to future standards

Q+A 46

Also Read… ‣ The battle for the body ﬁeld  alistapart.com/article/battle-for-the-body-ﬁeld
‣ When editors design  www.smashingmagazine.com/2013/06/26/controlling-presentation-in-structured-content ‣ Introduction to custom elements  www.smashingmagazine.com/2014/03/04/introduction-to-custom-elements ‣ The way you design web content is changing  www.newfangled.com/the_way_you_design_web_content_is_about_to_change ‣ The cost of leaky abstraction  www.lullabot.com/blog/article/inline-editing-and-cost-leaky-abstractions 47

The Battle for the Body Field

The Battle for the Body Field

More Decks by Jeff Eaton

Other Decks in Technology

Featured

Transcript