Content Strategy

Separating content from presentation

Given that content must live on a variety of devices and platforms, we say “the page is dead” and we must “separate content from form.”

But what does separating content from presentation actually mean? Is it a conceptual model to inform the content creation and design process? Using style sheets? Decoupling content from templates in the CMS? Using APIs? All that and more?

What say you, internet commmenter? Thoughts, examples, stories to tell about what separating content from presentation means in your world? Leave a comment from the link (it’s in the sidebar or at the top, I don’t know your device!)


19 thoughts on “Separating content from presentation

  1. To me it means that any markup that is in the content should only be semantic HTML and not in any way make assumptions about delivery (no table driven layouts). Let the CSS in whatever delivery layout wrapper make those decisions at render time.

  2. Kevin M. Hoffman says:

    Developing a sufficiently robust understanding of the role the content is playing for various actors in a story to tell a better story, but before writing the story.

    Also, eating the middle out of an Oreo.

  3. James says:

    Well, I am primarily a developer working with a specific CMS, so for me it’s mostly about decoupling content from the output template with the goal of achieving true device agnosticism. Since I rarely work in the authoring of the content, it becomes challenging to educate non-technical authors in what is good or bad when it comes to making content look good across devices (whether RWD, app, smoke signals, whatever). Since most authors edit from a desktop device, they are quick to publish if it looks ok and/or reads well in that browser. Tables and all. Tables. And all.

  4. This is not a new phenomenon as we can see when a book is made into a film how upset people can become at the interpretation. Throughout history stories have been passed word of mouth around the campfire, to poems, songs, books, plays, radio, films and interactive computer games! Content has always been free from the constraints of presentation despite ‘designers’ best efforts to control it. In short our feeling that somehow we are in control of stories is an illusion. What has changed however is that now the listener can choose to hear it their way. Luckily we have a very good idea of the listeners available technology, although this may become more difficult as more choices become available. Although I am sure technology will have a few tricks up it’s sleeve to help us in the future.

  5. Content is the message and the support for that message. If you strip away all the presentation elements, you should be left with a thesis and its support, in the form of words, images, code snippets, whatever. What you do to present that content most effectively involves design choices (typography, color, etc.) and system/delivery choices, but those are not the message.

  6. Form/content have always been at ends with one another.

    Arguably, finding the best form for the content (you touch on this when you talk about COPE, I think) is what creates enjoyment and excitement, ultimately enthralling audiences. The “best” is not always the most familiar, nor is it always the easiest, nor is there likely one “best” form/shape for a piece of content to take (see Erika Hall’s latest talk).

    Something else that comes to mind is the ways in which writers — poets, especially — play(ed) with form in order to ironize, underscore, sensationalize or amplify the things they were writing.

    The best examples of this interplay between form-content are, today, I think, in design — not in literature or art.

  7. I heard an Rdio ad the other day that mused that music was always floating around out there, and that it was up to us to find and plug into it. That’s the content’s groove. The story is the story; the song is the song; the poem is the poem.

    Poetry still falls from the skies
    into our streets still open.
    — Ferlinghetti

    People just need to find and plug into content, using whatever context we are in/on at the time. As Experience Mechanics, it’s up to us to make sure that content can adapt and, of course, that the content itself is worthy.

  8. MIchael R. Lorek (@m_lorek) says:

    Content (copy) is display / device independently separated from it’s appearance (layout and style), like we do it in HTML / CSS or XML / XSLT.

  9. a bed can be divided as having the shape of a bed (form), and the substance that is wood or metal etc (content).

    in semiotics, a word can be divided into an image that represents the meaning (content), and a sound image that literally represents the uttered sound (form). the sound image is arbitrary i.e we can agree and choose any number of uttered sound to represent the word.

    in arts modernism is defined as the way of presenting (form) the unpresentable (content).

    a text as a method can be divided into an author (content) who does the actual process of writing, and readers (form) who interpret the text each in its own way.

  10. Separating Content & Design (presentation) means allowing editors and designers/typographers to work independently using open web standards we love, and let an app figure out how to merge and render them using Responsive Web Design & Typography.

    The intersection of design, content, and realtime data is exciting, and I’m pleased to share my research in a talk I gave in a dev conference in San Francisco, where I show how it’s possible to build a highly interactive site for Poetry, for example, with real time search, highlights & notes, and design inspired by IAWriter.

    “Poem as Value”

    @JackAllenh — I’m working on an opensource poetry publishing platform to solve some of the concerns you’ve raised. I’d love your feedback.

  11. I’ve been thinking about it a lot, as this is the matter I work on as well. In my opinion, you can claim to be separating content and form, when your content is so structured and optimized for manipulation, that creating another totally different way to present it doesn’t make you break a sweat, whether it’s your 2nd or 200th presentation for it.

    When I say “another way to present it”, I consider that a product for instance has a way to be presented on its own product’s page, another on a product list page, another on other products’ page (in the “You might also like” aside block), potentially multiply that by all the apps the content is served in of course. If you’re having issues cramming your content in that aside block to start with, let’s not even talk about the 198 other presentations you will have to adapt it for.

  12. Unless you’re a machine, content & presentation are inextricably bound in some way, at the point of consumption.

    In 2014, we have strategies & processes & grand ideas to get content ready for numerous different device presentations either in its original ‘home’, or to travel across to new homes with entirely different look’n’feel.

    This approach may lose intent, it may lose impact, it may lose brand integrity, it may lose context. At the expense of being potentially accessible by greater numbers of people.

    Depending on type of content, none of above may matter.

    So far, it seems this ‘separation’ (for use beyond how it appears within its original brand) is already being demonstrated, defined for textual content. I think it will get even more interesting when we start to package and label up non-textual, graphic content alongside. I’m re-reading ‘Understanding Comics’ by Scott McCloud yet again (the subtle play of words and images) and trying to get my head around how this might work!

    By designing content this way, we are having to give up control, we are having to break things down to modular fragments, we are having to label things constantly and consistently.

    It is another technological development affecting the way human brains work. As soon as we could cut’n’paste, the writing was on the wall.

    Ironically, I’m formulating this response in TextEdit, and at the same time admiring your clarity of chosen font and font-size, since I pasted in your question direct from your webpage first… 🙂

  13. Looking back, the separation of presentation from content is one of the first optimizations taken in Web development. I remember using server-side includes in the 90s to mitigate layout mistakes, content duplication, and overall development overhead, as well as adopting a style of CGI programming where output from code would be injected into a template. By 2001, I had moved to a pipeline model using XML and XSLT, and aside from a few tweaks (including composite documents, provisioning content exclusively via HTTP, and largely doing away with obscure or custom XML vocabularies), haven’t seen much of a need to change the overarching technique.

    As the years went on and the projects got more ambitious, it became clear that there were more advantages to separating presentation from content, aside from reducing mistakes and extra work. For instance, from about 2002-2005, I developed an internal system that enabled content to be translated at the paragraph level into 15 languages, then projected into either email or websites. We had translators who had no technical skill whatsoever editing content through a rudimentary CMS, and a team of visual designers who were competent enough to handle the adaptation of the boilerplate template to over a hundred different sites. Separating presentation from content was key for publishing the same content to different targets, introducing parallelism into the process, as well catering to the capabilities of the different constituencies.

    I’m currently interested in the places where the lines between content and presentation are blurred. Linked data, for example, has no innate sense of sequence. If you’re presented with a resource with many disparate properties, each with potentially many values, what governs the order they are placed on the page? To me that is a form of content which can’t always be prescribed algorithmically (e.g. alphabetically or numerically). Property sequence has to be modeled somehow, and stored somewhere.

    Related is the issue of composite documents, which we can either conceive as atoms of content in their own right with embedded references, or as mere nesting lists of references to atoms of content. Again, these have to be represented persistently somehow, and it isn’t clear if these are strictly content or presentation.

    There is also that content which is near-exclusively part of the presentation: consider a label for a link or navigational section, which serves no purpose other than to fit into an interface. Only problem: it’s medium-length in English, short in Chinese, and long in German. It’s conceivable to try to measure that label in various anticipated typefaces and store the metric data in device-independent units along with the label itself, so we can swap in an alternate label should the prescribed one not fit into a given space. Now we’re getting into microcontent with generated metadata. (We tried to do this with that i18n system to generate text on graphics, but it turned out to be cheaper just to get the designers to do it by hand.)

    Finally, there’s the issue of context: how or whether a piece of content is to be rendered based on where it is, like whether it’s a main page or an inset, or on a desktop versus print versus mobile. In a way we’ve kind of opened a Pandora’s box, but it sure beats server-side includes.

  14. I don’t think the term “content” is accurate when we talk about separating it from presentation. The way I see it, content only becomes content when humans experience it, and so the presentation is as much a part of the content as the text is.

    What we really want to keep separate from the presentation is “information.” Information is what we get when we apply structure to data. Markup with no styling applied is machine-readable information, but add presentation to it and it becomes content.(Unstyled HTML can be content if it’s also the intended human experience presentation, but who the heck wants to do that?) We add different flavors of presentation depending on the recipe we need to follow for the various platforms and devices we are serving the content to.

  15. Content must be separated from presentation in two ways;

    1) there is nothing about the content that determines the way it is presented (e.g. html markup, device specific content)

    2) the presentation should not need to know anything about the (structure of the) content in order to present it

  16. Yoann says:

    I work in a “on-the-edge” industry. It’s on-the-edge because even if they really want to go digital and do 2.0 stuff (even they don’t really know what it means), they still want to export a PDF and print it. Paper is so comforting. ^^ Therefore, to me, separating content from its form is not only a question of screen resolution or device agnosticism but a question of delivery.

    I am currently using and working with the tool that Rudy, a previous commenter, and team are developing. It is THE tool because no markup language is saved. Only content, only data, only information. Their tool allow to push data anywhere.

    Therefore, in my position, it’s gonna be really interesting to push it on a website, a web app, a native app, generated PDFs, third party apps, external tools like marketplaces, showcasing websites, Google Adwords,… In the end, it can also be opened via its API to internal users who want to try to build something with the data or external users who want to use other tools than the ones we already provide.

    We, data managers, need to provide structured “markup-free” data and the correct tools to broadcast/share/export it and let others choose the form they want/need. Of course, the nature of the information will not change. Text will always be text, video will be video, 3D will be 3D. However, the use of those bits of information will define their form.

    The human laziness and the volumes of information also constrain us to separate data from form. For example, we manage 250 products with over 200 specifications per product and we don’t distribute them in all countries or at the same moment. We have a 10 to 20 % of turnover in the product range every year. We want to be up-to-date everywhere (website, web apps, native apps, marketplaces…) without taking/spending the time to do it. “Everything has to be automatic” as some people say.

    Therefore, we (or maybe just me) need to manage form-free data in one place and need to be able to push it everywhere if something changes.

  17. Hey Karen – this is a topic very dear to my heart!
    My full answer is on my blog:

    It somewhat goes like this:

    Separated content is a vast arsenal for content management, with expanding potential as platforms proliferate – and it’s great to see businesses recognizing its power. It’s impressive how far the industry has come in just a few short years. Not three years ago, Hippo was working with a publisher client which, by nature of using Hippo CMS, already had separated content. But this client did not recognize the potential power of a mobile site updated in real-time. Instead, the company was considering an entirely static mobile site based on a monthly website scraping.

    In just a few years, an instantly-updated mobile site has gone from an option to a necessity. And as site visitors have increasingly diverse choices of devices, the separation of content and presentation will continue to be crucial. Just look at Swedish firm TAT (The Astonishing Tribe)’s 2010 predictions on the future of screens:

    Okay—not all of them have come true (yet!), but the video’s message remains relevant: we can’t fully predict what devices will come next, so we have to be ready for any of them. For that, we need separation of content.

Comments are closed.