Separation Anxiety: The Myth of the Separation of Style from Content

I’ve read several HTML references, online and off, and all seem to make some mention of the dichotomy of style and content, presentation and structure, appearance and substance. The good designer is admonished to keep them separate in order to ward off various woes: unmanageability, unusability, professional shame.

I think this is a myth. I think it has persisted for four different reasons. I don’t think web designers need be concerned about it at all.

Vital to good web design is architecting data so the site is usable and maintainable. This begins only after a thorough grasp of mission and means. A textbook web site may fit together nicely with one simple separation, style from content. A real site begs deeper insight and benefits from separations based on richer reasoning.

Separating style from content is like the training wedge in skiing, practiced in the first lessons, abandoned with a little skill. Maybe it’s helpful in the introduction. Soothe initial confusion with a simple anchoring idea. Give fretful consciousness something to worry on while the intuitive subconscious practices the real work. I suspect the student is best served by moving promptly beyond. Good design strategies would be internalized better by analyzing living web sites, discussing real how’s and why’s, understanding the shameful compromises, and speculating on practical improvements.

What I think working web designers need is visibility into the technology they’re trying to use and into the experience they’re creating for their users. Combine that with a thorough grasp of mission, and an inclination to complete the job, and they’ll decide wisely what needs to go where. Down in the trenches, it’s vastly more complicated than separating style and content.

The myth of separate style and content as a design strategy persists because a lot of great web sites look as if they were designed that way. It’s very hard to isolate what makes a site thrive. That one aspect is common and observable and so gains mindshare.

A well-organized useful site may very likely separate a lot of content from its presentation. A database of well-structured content here, a series of stylish and useful presentation media there. But to call style/content separation a major aspect of web design strategy is like calling mud a major strategy of war.

Any observer can see that war makes a lot of mud, but that doesn’t really describe what war is doing. Nor is it something soldiers need talk and think a lot about. Good soldiering means aiming mortar to kill the other team, and digging trench to protect one’s own. This may make a great deal of mud, but those in the trenches on either end of a missile trajectory are focused elsewhere.

A thriving web site may have a lot of separate style and content. But that doesn’t describe at all what the designers have done. Good design means organizing data and ongoing maintenance of the site so they are handled efficiently by employees and the results are useful to users. This is a vastly complex challenge, and if you take it on thinking the separation of style from content holds great power, someone is in for disillusionment (you if you learn a lot, your client if you don’t). At many points of a project, designers may isolate presentation from structure. But their focus is elsewhere, on specific concerns that aren’t useful to discuss too broadly. Anyone outside the problem is never going to get it, never going to judge accurately.

There are so many lines along which data and work could be effectively organized. I’ve debated this with some highly capable designer friends. I believe all the examples we’ve come up with where style parted with content, it’s a side-effect of other separations:

• Who-Separation, separating one person’s work from another’s (Sandy’s text from Joe’s fonts)
• Pattern-Separation, separating data that varies from data that doesn’t (each product’s properties from the color scheme in which they’re all listed, or a manual’s text from its paper and PDA layout styles)

Broad as these are I’m sure there are many more. Within each, the distinctions are intricate, and very important to the task, and very hard to discuss in the abstract.

If Sandy Philosopher writes a visionary paper and Joe Designer makes it look like a hip magazine article, we have style and content separation. But the seminal insight is that Sandy is articulate and Joe is artful. What’s purposefully separated is Sandy’s work from Joe’s. Sandy and Joe know this, and so should their site architects.

There are significant opportunities in how you present information to affect how it’s understood.#section2

In response to Tim Berners-Lee’s admonition in an early SGML paper against prima donna authors, I can only say touché: “some authors feel that the act of communication includes the entire design of the document, and if this is done correctly the formatting is an essential part of authoring. They resist any attempts to change the representation used for their documents.”

My aversion to a rule-of-thumb separating style from content comes partly from a belief that some style is content. Not style to attract attention, but style to inform. Now, there is much art in attracting attention and I don’t mean to belittle that power, but there is also art to communicating well in visual media. In Tufte’s Envisioning Information, quite the opposite of separation occurs. Presentation makes sweet love to structure when conceiving an informative vision: “To envision information – and what bright and splendid visions can result – is to work at the intersection of image, word, number, art.” This is design inextricable from authorship. It’s style that cannot be dissected from content without bleeding away informative power.

Synchrony of meaning and expression is the future of web design.#section3

Of course, web authorship today is severely constrained, hidebound by the small set of universal, reliable browser features. Realizing what you envision often proves impractical without withering compromise. Also, good design must react with fluidity to variation in browser brand and version, monitor settings, window dimensions and other user diversities. But these challenges are not so much met by separating style from content as by separating universal features from unique ones, another variation on pattern-separation. As soon as a style becomes universally supported, the need to separate it from content disappears.

A publisher may limit an author’s options to control appearance, so books can be efficiently produced on paper, CD and web. But as the media evolve, so could an author’s options. An IT department rigidly committed to separate style and content would not imagine authors should ever expect relief from stylistic impotence, and might vigorously oppose an author yearning to express rich visual structure. A more enlightened IT architect could separate instead what’s common to all media from what’s unique (pattern-separation), and therefore find it natural for authors to draw upon a growing set of common media capabilities. Or she may decide to accommodate one author’s wish (who-separation) to influence the web version of his book.

A working designer may dismiss the distinctions I’m trying to make as semantic and irrelevant, and they would be right, and that is in fact close to my point: when getting down to work, the religion of separate style and content is forgotten, something else is practiced.

But the distinction has enormous implications for the progress of web standards and browser implementation. In the rise of e-civilization, it’s not enough to educate designers to separate style from content. Nowhere near enough. (Any more than it’s enough for boot camp to teach about living in mud. Boot camp must empower soldiers to kill enemies no one has seen yet.) Technology and training must empower designers to organize along specialized dichotomies and multichotomies. To create structure no one has imagined yet.

Is this why the promise of XML is so exciting? Yes I think so. Not because it separates style from content, but because it can separate all kinds of things, organize in all kinds of ways. XML could enable a great deal if it empowers designers to invent widely usable structure. It’s designers who must do the real work of inventing new structure, because they know the real world.

The Hungarian Academic Publishing House used Advent’s 3B2 SGML/XML publishing software in producing a series of bilingual Hungarian dictionaries for print, CD and web. The story contains no mention of style and content separation. The project organized along its own unique lines:

• “The Hungarian knowledge base has to be identical for various dictionaries, English, French, German.” (pattern-separation)
• “Publication for print, CD and for the web should be possible from the same database.” (pattern-separation)
• “The system must enable off-line editing for teleworkers.” (who-separation)
• “Alphabetical processing of special accented characters and double letters of the highly sophisticated Hungarian language required non-trivial additional programming.” (blurring the line between style and content)

Say the designer for a kayak manufacturer invents a standard Kayak Expedition Markup Language (KEML) so any weekend kayaker can describe local experiences. In some places the challenge is white water, in others it’s alligators and snakes, others the city police. Perhaps the world can quickly become one big kayak adventure map – while it simultaneously becomes many other things to many other people. Decentralization can be very powerful. Standards committees can’t begin to accommodate all the arcana of human existence. Yet that’s exactly what we expect of the web.

Standards writers and browser developers must now meta-create: empower designers to create.#section4

And not just to create e-paper. CSS significantly advances that cause yet it’s merely a stopgap (more on that later). But to create real structure that automation can sink its teeth into. So real progress can be made in the millions of tasks holding us back from the information age. So search engines can usher people to what they’re really after. So e-commerce can move beyond structures invented in the 1950’s (credit cards). So popular will can decide pressing issues and not just political beauty pageants. So I can park for kayaking without getting a ticket.

Only people immersed in a business have a clue to its natural structure. Itinerant designers know all too well that if web technology wasn’t such a seething mess, their clients would be much better off e-architecting for themselves. If you assume a company is capable of running their business at all (a leap I grant you) then they must have the keenest insights into their opportunities online. The point is, as long as the mess seethes, designers have an important job, and in a big way that includes studying the client’s business very thoroughly.

There is much to be organized, much structure to invent. And this can only be initiated on a broad front, one sphere at a time, by serious people who know the problems and for whatever reason get an idea what should be done about them, what’s really trying to happen. I call these the Enlightened Immersed. It’s not enough to be visionary. It’s not enough to be swimming in it. You must be both at the same time. I believe all great designers do this.

Real web progress from here out hinges on empowering the Enlightened Immersed.#section5

Designers are focused on and immersed in both the problems of their project and the technical scaffolding of cyberspace. I think it’s extremely subtle and profound the differences they could make if they weren’t merely reactive (or reactionary) participants in the progress of standards and technology.

There are four reasons why I think the myth of separate style and content has persisted. Covered already is Myth Reason 1: A “straw” one grasps when seeking what great web designs have in common.

Myth Reason 2: HTML started out void of presentation. It made a lot of sense, when Tim Berners-Lee proposed the <em> tag, for an author to express abstract emphasis in his text. Thus decentralizing the decision to emphasize with italics in one browser, and with color in another. But there are five other reasons in Merriam Webster’s to italicize, and many more in ALA articles alone, and now there are dozens of universal ways to visually emphasize and thousands more technically possible (many in fact pioneered by the colorful Mr. Z.).

All this diversity created extra work for HTML authors who focused on anything but appearance. In the very first version of HTML the vision began to fall apart. The insightful Mr. Berners-Lee concedes the impossibility of a complete set of abstract logical tags such as <em>: “A problem is there are never enough of them, so people reuse them on the understanding that they will be bold, etc.”

The gravitation to pure-presentation tags such as <i> was inevitable as soon as ubiquitous graphical browsers made the styles universal. My research indicates <i> use is five times <em> use. And I believe most <em>’s are pure presentation anyway. Microsoft® FrontPage®98 put the <em> tag in HTML documents when users pressed the italics button, realizing Tim’s precise fear. FrontPage 2000 completes the surrender by encoding <i>.

Since 1994, HTML has been used a thousand times to control presentation for every one time it’s been used to express meaning alone. The issue of separate presentation and content in HTML itself is long closed. It was a noble idea but it’s not what happened. To expect to automate the proper expression of author intent is to believe too much in automation.

Myth Reason 3: Handicapped users benefit. Hardly so. If a designer has never used his moderately complex site with an audio browser, the chances are virtually 100% that it will be very difficult to use with an audio browser. I don’t believe technology is anywhere near advanced enough to improve this automatically, without human attention.

CSS2 includes a wealth of very well-thought-out properties for controlling inflection, intonation, pauses, and other spoken richness that’s effectively absent from ordinary text (a human can infer it, no machine can). But have any designers you know used them? I wager none. There’s a numbing amount of work to make a web site really useful to blind users. It will not happen for free. To say style/content separation alone helps is an insult. But it keeps the myth alive because who would openly deny even an infinitesimal boon?

An architect might do much better by expending what tiny resources he can afford to dedicate to this segment of the user base by hiring a blind person to review the site. Or listen to it himself with an audio browser, make some enlightened practical improvements and get back to work.

Myth Reason 4: The fourth reason the separation myth persists will pander directly to your superstitions about They. In this case the They are standards committees and browser developers. It is Their evil purpose to retard civilization’s bright march while designers take the blame. They would have you believe your web site is a mess because you were not vigilant in separating style from content.

That every thriving web site is a mess, no one should dispute. That there would be some improvement if all designers took a vow to separate style from content I will not dispute. That immensely more power can be leveraged by empowering designers to invent structure is what I mean to suggest.

“They” incur wrath whose daily decisions have immense consequence. We beseech Them for order and the best They can come up with on any grand scale is: separate presentation from structure. Shrug.

We can’t expect standards working groups and browser development teams to keep up with our need for powerful, stable cyber-scaffolding any more than we could expect a few hundred old white guys to draft all the legislation needed by a million times their number.

Designers stew over browser bugs and inconsistencies. Standards writers stew over entrenched stale features they know they’ll never eradicate without liberal interpretation of the death penalty. Browser developers stew over their stewardship of the bloated, creaking, tumoral mass of thickening-client software for which we hold them accountable and on which all our hopes rest.

What’s really going on is an impossible tension between innovation and stability that will only get worse until it’s circumvented. CSS is an excellent demonstration of a standard that’s too advanced and not advanced enough at the same time. I think it begs violently and convulsively for another approach.

I read CSS2 from stem to stern and two things are stark:

• It is a cornucopia of typesetting, stylesmithing delight
• It leaves so much undone for typesetters and stylesmiths

It’s too much to implement consistently, and too little to please designers for long.

The Cascading Style Sheets specification is aimed squarely at appeasing paper designers and quenching their neglected thirst to express in familiar ways. At the same time, any pre-web designer who dreams up ten moderately exotic styles is likely to discover most of them couldn’t be done even with full CSS2. Examples: marching ant borders (slowly creeping dotted lines), text flow around a non-rectangle, text at an angle, border decoration by repeating a tiny image file, circular borders, multi-line curly braces.

That’s not even to mention, ahem, the user standing there: interactive features like click-expandable ellipses (dots: …), sitemap tree popups, select-and-comment text, fluid zoom & pan (ala PDF).

Approximations of many of these can be achieved by highly skilled and inventive designers, one site at a time. This is a ridiculous state of affairs. What we really need is decentralized empowerment, one marching ants expert in the entire world and the rest of us use her {border-style:ants}.

Maybe you don’t think there’s any real need for all this nonsense, that we have more than enough style already. But I’ll bet that (a) somewhere there’s someone with a valid desperate need for each of the above, plus countless more styles, and (b) you have some pet nonsense of your own you’d sure like to use.

Can we really stand for a few hundred They to be inventing all our visual enrichments?#section6

I don’t mean to encourage disorganized design, but to suggest instead focus on the tenets of a good mercenary: a deep grasp of the cause, familiarity and skill with the tools, imaginative realistic solutions. Being the hero who pulls all this off is a horrendous challenge. I don’t think anyone is served by oversimplifying it.