Cutting through the Crap: The Essence of Content on the Future 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
34. None

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).
61. None

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.
99. None

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.”
121. None

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