Be Good Not Bad : Web Design :: Brian Warren : Denver, Colorado

Whew! That last post, Finding the Con in Contests certainly generated some waves and got some good discussion going. This topic is not nearly as controversial, but it’s one that I’ve been thinking about quite a bit.

One of the core ideas behind developing with web standards is that you design a site with the content separated from the design. There are lots of reasons to do this, including better accessibility, easier on the bandwidth and cross-browser compatibility. From a design perspective, a key reason is that separating content from design makes it easy to redesign your site.

I’d like to talk about a grey area in this topic that has got my brain cooking a bit.

First, a review

When designing a site, there are some obvious no-no’s that can get you into trouble.

<div class="redbox">
Copyright  © 2006 Be Good Not Bad
</div>

This markup is clean, versatile, and standards-compliant, but what happens when I redesign my blog, and want to make my copyright information grey, or polka dotted? I would be wiser to give that div a more semantic class, like “footer” or “copyright”, lest my CSS look like this:

.redbox {
background:blue;
}

My Conundrum

I often post images in my blog. The default styling for this image is with a 1 pixel border and toward the center of the column. Sometimes, if the picture is small enough, I’ll float that image to the right or left of the page, depending on what I feel is necessary. To do that, I override the default style by giving the image tag a specific class like so: img src="/images/9.jpg" class="right" alt="Reel Mower" which corresponds to a particular style in my stylesheet. Sometimes, when I am posting an image with a plain white background, I like to not have a border around the image. To achieve that effect, I use class="plain".

XHTML and CSS let you combine classes too, so you can have class="plain right" or whatnot to use multiple effects.

This is fine, dandy, fantastic. Except, it’s totally non-semantic. I’m locking myself into these presentational specifications that, possibly in the future could come back to haunt me.

I’ve been preached to taught that my code always must be semantic. Call a footer a footer, and a header a header. Navigation should be called navigation and secondary information secondary. A title should be in an h1, and so on.

I fully believe and preach this idea, but I don’t see how to get around the fact that with some pictures I want to put them on the right and others on the left. And sometimes I want to have a border around a picture and others it’s completely inappropriate.

Eric Meyer touched on this over a year ago, and the comments were both plentiful and helpful. In the end, I felt like we’re still in a grey area.

What do I do? Is it okay, in some cases, to be non-semantic in your markup? Is there a better way? In the meantime, I swing back and forth from slight pangs of guilt and telling myself not to worry about it.