The Separation of Content and Design Dilemma

I recently wrote about <div> tags and it got me thinking a lot about the age-old content and structure dilemma in Web Design. Let's back up.

A List Apart published about this back in 2004. It's a good, short read. But for the layman — what's the issue here? Well it all comes down to what is considered content and what is design? This has classically been know as separation of content and presentation.

CSS Zen Garden

Let's start with CSS Zen Garden. The purpose of CSS Zen Garden is two-fold:

  • Push the envelope as far as possible with CSS
  • Don't change the content of the page, just alter the design

From the Zen Garden homepage:

There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The HTML remains the same, the only thing that has changed is the external CSS file. Yes, really.

Here's two recent designs submitted by Trent Walton and Andrew Lohman. You can see all the designs submitted over the years here.

It's a fun exercise. Looking closer at the preamble, we can see that the content is preserved. It begins as follows:

The Road to Enlightenment

Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible….

The preamble heading, followed by a paragraph.
Trent's design (left), Andrew's design (right)

Trent, has a rule above and below the heading (but it's really a background-image). It has a type treatment, and the paragraph is set as if it were woodtype. Very cool.

Andrew's is very refined. Rightfully so, his theme is called Mid Century Modern. It has a sensible sans-serif heading, and ample line-height for the paragraph. Upon close inspection, the color is set as a deep navy instead of a black or gray. So, what is considered design and what is considered content here? 

Design is akin to the style and blueprint. Typography, arrangement, color, etc. Hopefully the design is componentized or atomic.

Content is just the meat and potatoes. Imagine your text, images and embedded content arranged like a page in a book. Flowing from top to bottom, left to right. This content exists in flow, sectioning, heading and phrasing content elements.

Breaking the Rules

If your content calls for breaking the flow of content, you are breaking the design of the page. This is why page builders are bad for WordPress. It can cruft up your content with architectural shortcodes (when they shouldn't be there at all). It's an abomination. Look at this mess:

Are you fucking kidding me?

The crux of the content and design dilemma is there are two separate modus operandi when it comes to publishing on the web. There is authoring content, and there is designing content. They are separate and for good reason.

A WYSIWYG is a composer designed to help you author words. Not unlike Microsoft Word or Pages.

When web authors want rampant design control they turn to tools like InDesign or Sketch to draw up their ideas. Typography, layout, templates, components, paragraph styles, shapes and masks:

That design is then converted to page templates and component files by a developers hands. Then page content is piped through those files onto the page at the request of the vision of the designer.

On the other hand, when you're in writing mode, you just need tools like Pages. Simple, pre-defined styles, no-frills, italics here and bold here, lists and images:

Few tools, offers the best of both worlds for single-common user. I wish WordPress was at that intersection but it's not yet — Squarespace is getting there. Other things like Wix or Dreamweaver are laughable. I mean it's obvious why, this concept is abstract. Content isn't always content (example: is a navigation content?). Design rules can be arbitrary and styles are clearly subjective to enforce (not unlike CSS).

Therefore we continue to live and die by the separation of design and content. While the spectrum of design roles are changing, the tools are not. Macaw was probably the closest tool to bridge that gap but now it's basically Invision Studio. I would've been cool to see the Macaw team join forces with the like of Automattic for actual publishing. So yeah, we'll see what happens.

But, maybe I'm wrong. But in the past 10 years, the web designer dilemma persists on. I wouldn't be surprised if it persists another decade.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: