Cutting through the Crap: The Essence of Content on the Future Web

You've likely heard about content a lot lately—content is king, content should flow like water, "Content First!". But what IS content in its basest form? Is it HTML? XML? JSON? Is it human-readable plaintext? And once we have our content, how do we transform it to look wonderful on mobile devices, televisions, regular old computers, refrigerators? Where does content end and platform-specific representation begin? The mobile revolution has shown us that our content management and web publishing technologies are entangled and flawed. The web will continue to be consumed by more and more clients, many of which haven't even occurred to us yet. But by thinking deeply and re-examining the essence of our content, we can help to architect a flexible future for the web.

Transcript

1. C!""#$% "&'(!%& "&) C'*+: the future of content on the web Lyza D. Gardner @lyzadanger ɾcloudfour.comɾMobilism, 2012
2. On April 20, I had a dream about M&Ms.
3. Piles and piles of M&Ms
4. An entire world of M&Ms
5. In my dream, I wanted to get the chocolate out of the M&Ms.
6. Turns out that this is kind of impossible.
7. I woke, pondering M&Ms.
8. This happened on the same week...
9. “Please take this and make it work on mobile telephones.” —Customer
10. Unfortunately, their current web site’s landing page is 1.5MB of tangled HTML, inline styles, Flash presentations, enormous slideshows and deeply nested weird <div>s.
11. I started to understand the connection between my dream and my life.
12. Trying to repurpose that customer’s site content for mobile or other formats would be like trying to rescue chocolate from inside M&Ms.
13. What do I mean when I call something on the Web an M&M?
14. This is an excerpt from a post (WordPress) from my own site. Whoops. M&Ms. The content will now forever be inextricable from a Flash presentation.
15. Which makes it a pretty sad state of a,airs if I view it on a mobile device that doesn’t support Flash.
16. This, too. I certainly wasn’t trying to immortalize this inline JavaScript.
17. Even little numbers like this one can ruin my day.
18. Whoops. That styling doesn’t -t this context.
19. There are a lot of ways that crap like this gets into our content, polluting it with presentational and behavioral information that isn’t part of the content itself.
20. We’ve built systems that encourage the munging together of content and presentation.
21. Our tools trip us up: the careless separation of humans from content via WYSIWYG editors turns even the brightest of us into clumsy sheep on occasion.
22. Sometimes we under-structure a sea of disorganized content.
23. To assert some sort of control over our big blobs of content, we create over-complex, format-speci-c templating or rendering systems that don’t always use best practices.
24. Other times we over-structure simple content.
25. Sometimes we use HTML and other web technologies in ways that they were not originally intended.* *This is not necessarily bad; hear me out
26. Example: CSS Floats are a terrible hack when you think about it, causing us to build lame HTML to accomplish layout tasks.
27. We’ve been making web M&Ms for years, but suddenly we want that source chocolate back.
28. Now is a good time to stop, think, and cut through some of the crap before it really gets away from us.
29. I believe that if we set our content free, the web has a glorious future ahead of it.
30. Looking at content close up: An academic exercise.
31. Cloud Four really needed a new website.
32. Being cussed and overly curious, I had to make a big splash in the pond. I can be pretty obnoxious.
33. To all of my super duper Cloud Four co-workers... photo by Lisa Teso
35. So we needed a new website.
36. Not everyone in our organization is an implementor or coder. But almost all of us are creators. How can we include everyone from start to -nish? photo by Lisa Teso
37. We started: with content.
38. We continued on: with content. We provided gentle, usable amounts of structure with Markdown.
39. Markdown is a lightweight markup language, originally created by John Gruber and Aaron Swartz allowing people “to write using an easy- to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)". —Wikipedia
40. markdown textile reStructured Text Wiki markup bbCode github-!avored markdown Garrett-!avored markdown pandoc-!avored markdown Cloud Four-!avored markdown
41. And then we translated it to HTML using the open-source pandoc tool. But it’s not just a one-way street from markdown to HTML anymore.
42. Originating from The Hitchhiker’s Guide to the Galaxy by Douglas Adams It is a universal translator which simultaneously translates from one spoken language to another. It takes the brainwaves of the other body and what they are thinking then transmits the thoughts to the speech centres of the host's brain, the speech heard by the ear decodes the brainwave matrix. When inserted into the ear, its nutrition processes convert unconscious sound waves into conscious brain waves, neatly crossing the language divide between any species. —Wikipedia Babel-sh
43. We let the pandoc robots generate the HTML. Let the robots do it—create semantic markup and keep the markup out the way of the content creators.
44. Throwing in some special sauce to help the robots be successful.
45. And the design serves the content.
46. The entire site: Content -rst.
47. Adapting and re.owing for di,erent environments.
48. In other words, we give the content, some ingredients, and some special sauce to the robots. They speak whatever language is needed.
49. Why not just use HTML and be done with it? In which I am asked: Are you hating on HTML? What’s with all of these “translations?” Why do you love Markdown so much? Maybe you should marry it.
50. I will admit a personal preference for reading and writing this kind of thing...
51. ...versus dealing directly with HTML.
52. But some things call for structure that things like markdown cannot provide.
53. I mean, without massaging, markdown doesn’t provide a way to encapsulate chunks of content like we can do with classes in HTML. Long live HTML! I massaged it (this is part of what I mean by Cloud Four- !avored markdown).
54. I have to be careful about getting too attached to a particular approach.
55. So, this is not an adventure whose story includes the jettisoning of HTML in favor of some sexy new technology.
56. ...so much as it is about the inclusion of a lot of other things, the delivery of content and data to the di,erent kinds of clients and devices that are increasingly a part of the web.
57. “[HTML] is the DNA of the Web.” — Je,rey Zeldman
58. ...I’m obsessed. I’m not sleeping well. This content thing has me sucked in. And I’m thinking a bit beyond the browser.
59. By staying .exible with our content, we have more options in the future. My cat is very !exible. Her name is Tephra.
60. It’s about peeling back the onion layers that surround our content. (until we weep uncontrollably).
62. But what is content? Finding the essence
63. I —NY I love New York I love New York I (heart) NY I \u2665 NY I — NY I ♥ NY
64. Milton Glaser
65. At what level of abstraction did the message get through?
66. According to Plato: All chairs are just an imitation of the true Form of a Chair...but all chairs have “chair-ness.”
67. Real-world instantiations share in the “-ness” of their archetypical Forms.
68. All possible chairs A single, totally-speci"c chair
69. Flexibility, Portability Total Control
70. My pursuit of content is a quest for a comfortable level of “-ness”
71. I *—* NY
72. <p>I <em>—</em> NY</p> Translated to HTML
73. [ [ { "Para": [ { "Str": "I" }, "Space", { "Emph": [ { "Str": "—" } ] }, "Space", { "Str": "New" }, "Space", { "Str": "York" } ] } ] ] Translated to JSON
74. <style> body { font-family: "American Typewriter"; font-size: 5em; } p { max-width: 2.5em; line-height: .85em; } em { color: #ee2722; font-style: normal; font-weight: bold; } </style> With HTML, for example, we can add some presentational sauce.
75. HTML is a speci-c .avor of expression, perfect for the web browser.
76. The future holds more .ow and transition between di,erent formats as we adapt content and data.
77. And there is a stated goal among many to -nd the right kind of universal content for this unknown future. From http://futurefriend.ly
78. Finding the balance between control and .exibility.
79. So these are the things I had in my head as I focused on the experiments of the new CloudFour.com website.
80. Sure, maybe I wouldn’t discover the secret, philosophical language of the universe during my alchemical investigations.
81. But I could ask questions like: How did we get here? Examining how we get from our content to our markup.
82. This might be a perfectly -ne result, but how did we get here? What kind of translations happened?
83. Here is the one page on our site for which the content was marked up directly in HTML.
84. When we start with HTML markup, sometimes we inadvertently use non-semantic crutches. Something as small as a dot caught my eye...
85. Aha! It is for a marker on a map for the event.
86. Very small two-color map in CSS background image.
87. But is this content?
88. If we translate our content to a di,erent format, that little dot is going to come along for the ride.
89. That is, this dot is not context independent. It is only relevant to a particular HTML representation of our content.
90. Instead, the nugget at the core of content should be context-independent. We can add the context-speci-c items using other ingredients and metadata.
91. Anyway. Starting from structured content, however, keeps me from wandering astray. Maybe I require training wheels.
92. Instead, I can add this to the special sauce for translating this content for the web.
93. And same end result!
94. “Whatever markup language you use, it’s not semantic unless it pushes meaning forward—which is why you can’t start with markup; you end with it.” —Sara Wachter-Boettcher
95. Context-free source content. Then add special sauce (metadata) to cook up the -nal result.
96. Content: As format-independent as possible, while still carrying the ‘-ness’ of the original message.
97. Markdown served as a tool to help me focus entirely on meaning, and become innocently blind to my content’s representation.
98. To me, Pandoc represents the nascent beginning of the rise of Internet Babel-sh.
100. That’s all well and good for your boutique experimentation and simple web site, Lyza... ...but what about the real world?
101. What should we do in the real, complex world to continue setting our content free?
102. • Separation • Simpli-cation • Structure • Standards • S’Mindfulness The Five ‘S’s
103. Separation of Systems authoring != management != publishing != delivery != rendering != lightboxed slideshows != various things
104. We’ve mixed content authoring with content publishing.
105. This is a myth.
106. ...that carries on the ongoing illusion of pixel-perfect control.
107. Our simple website takes baby steps toward decoupling.
108. National Public Radio (NPR) was a pioneer in this area of exploration, creating the mind-bogglingly complex (but admirable!) COPE concept.
109. The rub is: content authoring, content management, content delivery and content rendering are all discrete processes.
110. This decoupling is already starting to happen. One of our larger clients is taking some big steps.
111. Fortunately, their M&M situation is not catastrophic.
112. But it’s not totally clear sailing, either.
113. They are -nding they have to simplify their content for some formats and are streamlining for a better future.
114. Simplification Seriously cutting the crap.
115. “Simplify before you suppress.” — Ethan Marcotte
116. The mobile revolution has brought the need for clari-cation and simplicity to the forefront because of their inherent constraints. But I think the need is broader.
117. OregonLive. Local “news.” Opposite of simple.
118. Choose any part of the page; it pretty much sucks. But, hey, it’s SteakFest!
119. If you just highlight new story content, the picture simpli-es quite a bit.
120. One day, someone must have come to the team and said: “We need a mobile version.”
122. Their mobile website: Ooh! I can get some apps! But, hey, look, actual news. Neat!
123. Top story under “News”: Portland man airlifted. That must be important!
124. Wait...where’s that story on the “full” site?
125. ...guess I’ll try looking in the news section...
126. Ugh.
127. Finally, news! OH HAI, THERE YOU ARE! Finally! We meet!
128. I think maximalist sites like OregonLive will become dinosaurs.
129. In their place I foresee a new era of sites, populated with the content users came for in the -rst place.
130. Instead of the things we want them to want. http://xkcd.com/773 “University Website”
131. Why is this stu, even on the page?
132. Structure Divide and conquer.
133. “[Create] for the chunk, not the page.” — Karen McGrane Beware of (long) blobs!
134. Web pages are not snapshots of long documents frozen in time, like a page in a book. Beware of blobs.
135. Big blobs will need to be deconstructed and rearranged for reuse. They tend to have M&M qualities.
136. Instead, adaptive web pages are cooked up from relevant content chunks and ingredients, using the special sauce of metadata.
137. Figuring out how to divide and structure content meaningfully is hard.
138. How will the combined chunks of content adapt for di,erent situations?
139. There is no one-size--ts all content architecture plan.
140. Increasing numbers of CMSes and frameworks have constructs for creating structured content types.
141. But these have to be created carefully, and the interface for authors needs to make some sort of sense.
142. Standards The authorities are failing to rea/ with due speed. But we have to have some faith.
143. Feels like an impossibly long wait for the standards we need. But scattershot, desperate tactics won’t protect us.
144. Your content is going to go a lot of places. Don’t lock it up!
145. http://futurefriend.ly
146. You are not alone in facing this chaos.
147. Noble things on the horizon. CSS !exbox Battery Status API <picture> element view-mode media feature CSS image values
148. I tend to visualize the standards-makers as magical, creating standards from an impenetrable fortress on a hill.
149. I hope we can continue to create a more happy, two-way street between devs and standards experts.
150. Be mindful Think about your content with fondness.
151. Write semantic HTML.
152. We may think the battle for semantic markup was won in about 2007, but I believe we have to be ever diligent. Life is messy.
153. Make designs that serve the content, not the other way around.
154. Be wary of silver-bullet solutions.
155. Creating content—much like creating chocolate—is a complex thing unto itself. Respect!
156. Content and chocolate have to be nurtured, sorted, edited, prepared...
157. Inside of our magical minds.
158. Our imaginations: full of fantastic trees and jungle buildings (just like near cocoa plantations!).
159. Content is magical, like chocolate. It is the core of the web. Its ingredients and creation are key. It deserves our respect.
160. Do your part to help set your content free by making it as future-.exible as possible. It’ll thank you for it, someday.
161. The future of the web is totally exciting. I can hardly wait to see you all there!
162. • I’m Lyza Gardner, co-founder of Cloud Four (cloudfour.com). • @lyzadanger • Jason Grigsby and I wrote Head First Mobile Web (O’Reilly). • I’ve tried to be mindful. All images, photos, except where noted, are my own. I Love New York image copyright Milton Glaser. Photos of Cloud Four sta, by Lisa Teso. Oh, my, thank you! photo by Lisa Teso