Separating Content from Presentation

At the moment I’m planning some work in the area of digital publishing. The premise is to develop a proof of concept for an adaptive digital publishing system. Central to this idea is the concept of the separation of content from presentation. This concept is perhaps best embodied on the web – HTML providing structure to content and CSS providing all the necessary visual styles. This model provides a surprisingly flexible system probably best showcased by the CSS Zen Garden site. What changes on the site isn’t the HTML, the content stays the same, just the CSS file is changed to create radically different page designs.

The idea is that the two can be neatly divided was thrown into disarray by content strategist Karen McGrane in her recent post over on A List Apart – WYSIWTF. In the introduction she states:

The reality, of course, is that content and form, structure and style, can never be fully separated. Anyone who’s ever written a document and played around to see the impact of different fonts, heading weights, and whitespace on the way the writing flows knows this is true.

Now the WYSIWYG editor and the faith we put in it has to die, because it is simply no longer relavent. Content will end up on the device chosen by your viewer, not you. Did you know there’s a browser on the Kindle? Yes your site and your content displayed in 256 glorious shades of grey. Did you design for that? Did your WYSIWYG editor show you that? But what can we use instead? Karen dismisses the inline editor for many of the same reasons as the need to ditch WYSIWYG, so what’s the alternative?

Well the last line “If we want true separation of content from form, it has to start in the CMS” was a bit of a guiding light.

Content, Container and Presentation

I think what we are missing is the concept of a middle man. Content and presentation are too distinct, they are the two extremes in this case and we need to find some common ground. This is the place for the container.

The container is a shapeless vessel, more liquid than solid, but it provides a flexible structure for the content. The container defines what the content is. It might be a chapter, an article, a post, a review – but what it does is create a defined space for the content to live. The container is the tool to avoid “blobs” and faceless chunks of text and defines how content belongs and provides context. Content without context is pointless, so we need containers to help us develop better systems, better tools and better presentation. Once we have a container in place then we can start to develop better tools to preview, review and edit. We can provide more expansive “preview” modes so that we can render models on different devices, screen sizes, browsers and even in different channels like in an app.

The container appears to represent the missing piece for my work and I can see the need to develop this idea further. So I’ll keep you posted on how things develop.

PS – wondering if I was channeling this great Aussie invention:

The Goon Bag



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s