$30 off During Our Annual Pro Sale. View Details »

Cutting through the Crap: The Essence of Conten...

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.

Lyza Gardner

May 11, 2012
Tweet

More Decks by Lyza Gardner

Other Decks in Technology

Transcript

  1. C!""#$% "&'(!%& "&) C'*+: the future of content on the

    web Lyza D. Gardner @lyzadanger ɾcloudfour.comɾMobilism, 2012
  2. 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.
  3. Trying to repurpose that customer’s site content for mobile or

    other formats would be like trying to rescue chocolate from inside M&Ms.
  4. 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.
  5. Which makes it a pretty sad state of a,airs if

    I view it on a mobile device that doesn’t support Flash.
  6. 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.
  7. 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.
  8. 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.
  9. Sometimes we use HTML and other web technologies in ways

    that they were not originally intended.* *This is not necessarily bad; hear me out
  10. Example: CSS Floats are a terrible hack when you think

    about it, causing us to build lame HTML to accomplish layout tasks.
  11. Now is a good time to stop, think, and cut

    through some of the crap before it really gets away from us.
  12. I believe that if we set our content free, the

    web has a glorious future ahead of it.
  13. Being cussed and overly curious, I had to make a

    big splash in the pond. I can be pretty obnoxious.
  14. 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
  15. 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
  16. markdown textile reStructured Text Wiki markup bbCode github-!avored markdown Garrett-!avored

    markdown pandoc-!avored markdown Cloud Four-!avored markdown
  17. 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.
  18. 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
  19. 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.
  20. In other words, we give the content, some ingredients, and

    some special sauce to the robots. They speak whatever language is needed.
  21. 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.
  22. 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).
  23. So, this is not an adventure whose story includes the

    jettisoning of HTML in favor of some sexy new technology.
  24. ...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.
  25. ...I’m obsessed. I’m not sleeping well. This content thing has

    me sucked in. And I’m thinking a bit beyond the browser.
  26. By staying .exible with our content, we have more options

    in the future. My cat is very !exible. Her name is Tephra.
  27. It’s about peeling back the onion layers that surround our

    content. (until we weep uncontrollably).
  28. I —NY I love New York I love New York

    I (heart) NY I \u2665 NY I — NY I ♥ NY
  29. According to Plato: All chairs are just an imitation of

    the true Form of a Chair...but all chairs have “chair-ness.”
  30. [ [ { "Para": [ { "Str": "I" }, "Space",

    { "Emph": [ { "Str": "—" } ] }, "Space", { "Str": "New" }, "Space", { "Str": "York" } ] } ] ] Translated to JSON
  31. <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.
  32. And there is a stated goal among many to -nd

    the right kind of universal content for this unknown future. From http://futurefriend.ly
  33. So these are the things I had in my head

    as I focused on the experiments of the new CloudFour.com website.
  34. Sure, maybe I wouldn’t discover the secret, philosophical language of

    the universe during my alchemical investigations.
  35. But I could ask questions like: How did we get

    here? Examining how we get from our content to our markup.
  36. This might be a perfectly -ne result, but how did

    we get here? What kind of translations happened?
  37. Here is the one page on our site for which

    the content was marked up directly in HTML.
  38. When we start with HTML markup, sometimes we inadvertently use

    non-semantic crutches. Something as small as a dot caught my eye...
  39. If we translate our content to a di,erent format, that

    little dot is going to come along for the ride.
  40. That is, this dot is not context independent. It is

    only relevant to a particular HTML representation of our content.
  41. 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.
  42. Instead, I can add this to the special sauce for

    translating this content for the web.
  43. “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
  44. Markdown served as a tool to help me focus entirely

    on meaning, and become innocently blind to my content’s representation.
  45. That’s all well and good for your boutique experimentation and

    simple web site, Lyza... ...but what about the real world?
  46. What should we do in the real, complex world to

    continue setting our content free?
  47. Separation of Systems authoring != management != publishing != delivery

    != rendering != lightboxed slideshows != various things
  48. National Public Radio (NPR) was a pioneer in this area

    of exploration, creating the mind-bogglingly complex (but admirable!) COPE concept.
  49. The rub is: content authoring, content management, content delivery and

    content rendering are all discrete processes.
  50. This decoupling is already starting to happen. One of our

    larger clients is taking some big steps.
  51. They are -nding they have to simplify their content for

    some formats and are streamlining for a better future.
  52. 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.
  53. One day, someone must have come to the team and

    said: “We need a mobile version.”
  54. In their place I foresee a new era of sites,

    populated with the content users came for in the -rst place.
  55. Web pages are not snapshots of long documents frozen in

    time, like a page in a book. Beware of blobs.
  56. Big blobs will need to be deconstructed and rearranged for

    reuse. They tend to have M&M qualities.
  57. Instead, adaptive web pages are cooked up from relevant content

    chunks and ingredients, using the special sauce of metadata.
  58. But these have to be created carefully, and the interface

    for authors needs to make some sort of sense.
  59. Feels like an impossibly long wait for the standards we

    need. But scattershot, desperate tactics won’t protect us.
  60. Noble things on the horizon. CSS !exbox Battery Status API

    <picture> element view-mode media feature CSS image values
  61. I hope we can continue to create a more happy,

    two-way street between devs and standards experts.
  62. 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.
  63. Content is magical, like chocolate. It is the core of

    the web. Its ingredients and creation are key. It deserves our respect.
  64. Do your part to help set your content free by

    making it as future-.exible as possible. It’ll thank you for it, someday.
  65. The future of the web is totally exciting. I can

    hardly wait to see you all there!
  66. • 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