Truth be told it is nearly impossible to separate content from presentation with HTML and CSS while making semantically lean markup. At least that is true if the design of the presentation is complex and unique. Designers tend to like flourishes, embellishments, and other eye candy. Treated right, this is a good thing. Our minds like high-quality, stylized content. But high-quality design will add structures in the the markup that aren’t related to the actual content. These structures or hooks, are great for adding design elements, but bad for long-term maintainability of a site.

Here is an example of a design hook that I used while making the Harris Construction web site.

<div id=“big”>  <div id=“little”>div>
<div id=“rightConcrete”>div>
<div id=“topLeft”>
<div id=“topRight”>
<div id=“bottomLeft”>
<div id=“bottomRight”>

In retrospect, I could have developed this code better by using non-design specific ids. That would have been in the mindset of future reusability. Not that the hooks that I used can’t be reusable, but non-specific hooks would have been better. CSS Zen Garden uses a similar approach by adding non-semantic, empty divs much like the ones I used above. The Garden also uses ubiquitous id and class attributes to accommodate nearly every design situation that can be thought of. While this is good for the Garden’s purpose, leaner code means saved bandwidth, more maintainability, and many other thing.
What is the solution to this conundrum? Content Management Systems.

The only true way to separate content from presentation is to rely on a content management system. With a CMS, the possibilities for redesigns, media neutral delivery, and everything in between are limitless. A well-designed, flexible content management system will allow many different views of the content. This means that you can have a couple of HTML views (one for the primary design, one for printing, one for handheld devices), a PDF view, an RSS feed, and much more. Content Management Systems enable website managers to flex their designs in a cost effective manner.

Content management systems do more than just help with separating content from separation. But that is saved for a later post.

This entry was posted on Tuesday, January 30th, 2007 at 1:48 pm and is filed under CSS, HTML, Web Design, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.