Many people speak of “separating content and design” when building websites.

“Content” means the text on each page. That includes everything from the title to the copyright date in the footer. It’s not the words, but rather what they mean.

The “design” is both how that text looks (font, color, size, background, border, etc.) and how it is organized (aka “the layout”) on the page.

Real Examples

Let’s dive down into some examples.

HTML & CSS

Don’t worry! I’m not going to get too technical.

This is the first context in which I learned about separating content and design and it was mind-blowing. Back in the “old days” (late 1990s and early 2000s), if you wanted a link on a webpage to be red instead of blue, you had to “tell” every link to change. “Link 1, be red. Link 2, be red. Link 3, be red…Link n, be red.”

Each of these links were in an HTML file and you had to edit every single one. That meant finding code that looked like this:

and making it look like this:

Every. Single. Damn. One.

This got old fast. Worse yet, what if you decided to change every red link to a green link?

“Link 3, I know what I said before but I’ve changed my mind…yes, I know Link 4 is red I haven’t talked with Link 4 yet…No, Link 3, this is not up for discussion…I don’t even know what color chartreuse is…”

Then CSS entered my life. Stored in one CSS file that applied to every link in every HTML file, I could just write:

That’s it. 13 characters styling infinite links. ((And while were talking about infinite links, consider my new proposed international icon for infinite links:  .)) Change your mind? Change “red” to “green” and you’re done.

In this case, the HTML is the “content” and the CSS is the “design.” When we split them apart, life gets easier.

WordPress Posts & Themes

WordPress gives us another example of separating content and design. This time, the content is each page and post. If you’ve used WordPress before, you know that by default in the post editor, links are blue, the font is Georgia, and the text is as wide as the post editor allows. But when you hit publish and go to the site, the design is crafted by your “theme.”

If you’re not familiar with “themes,” I’d recommend my blog post on the subject: “Choosing the Right WordPress Design Strategy for your Website.” Below you can see the “Home” page from MRWweb.com. On the left, there’s the content separated out in the post editor. In the middle and on the right, you’ll see two different themes giving that same piece of content design.

WordPress lets users switch themes with a couple clicks. The posts (that’s the “content”) remains the same, but how they look (the “design”) can drastically change.

Project Management: Content Strategy & Design

I’ll end with a more nebulous example of what I think is a logical and useful extension of this separation.

When starting a website project, I’ve had clients come to me with designs and layouts. “On our about page I want a red ‘Donate’ button on the right sidebar.” Making these decisions early and at the same time is putting the horse before the cart. Development of the design and content should occur in parallel rather than jointly (so the horse should be next to the cart??). When reviewing the content of all the pages on your site, you might realize that the About page doesn’t need a sidebar. When working on the design, you might also realize that red doesn’t fit with your organization’s brand or that you want all “Donate” buttons to be green.

Evaluating content or design on its own focuses on what’s relevant. Usually a decision like this with fewer moving parts is much easier and produces a better result. As one colleague puts it, this prevents you from coming down with a case of “Shiny Object Syndrome,” where one makes a design decision with no thought of the content it must accommodate.

*The Caveat

I have one big caveat: content and design are inseparable. Oops.

I’ll spare the details, but certain CSS and HTML techniques blur the distinction between separating content and design.

When separating content and design decisions, remember that content and design will come together as one final product. That’s the whole point, in fact.

A final cautionary example comes from the field of industrial design, which has a similar but not identical discussion of “form and function.”  Consider the teapot design, at right, from the cover of the famous book The Design of Everyday Things. It’s beautiful but was clearly designed without thought toward its necessary function. If you try to use it, you’ll get a scalding-hot handful of content…I mean…water.

Take-aways

So I hope you’ll see that “the separation of content and design” is an extremely useful concept with both technical and planning applications. If you were able to grasp the HTML/CSS example, you’ll also have more-informed discussions with your web person.

Just remember, it’s not dogma, but it is doggone useful.