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