Semantics, Styles Sheets, and Style Guides

In the following article David Shea discusses the concept of a style guide for clients. The Markup Guide can be found here:

Who Cares about Semantics Anyway? On semantic markup, conveying its usage to those who generally don’t need to care, and a reusable markup guide for your enjoyment.

“Just educate your clients”, you may think. I hope you understand why this doesn’t always work. As an analogy, compare and contrast these situations:
  1. You just built a site for a plumbing company, complete with a CMS. You tell them to make sure to use <ol> elements for parts lists, and <h2> elements for product names on their respective pages. 6 months from now, you check the site and find a ton of <br /> elements to separate the list items, and headers in <font size="5"> tags. D’oh.
  2. In exchange for your work on the site, the plumbing company gives you some advice on your kitchen remodeling. They suggest copper pipes for your water lines running through the exterior walls, with a small length of flexible CPVC inside the house. You decide to go all CPVC because it’s slightly cheaper. 6 months later, your pipes burst during a particularly cold winter night. D’oh.

In both cases, a little bit of education goes a long way. In both cases, the client needs to take a little initiative of their own to ensure higher quality. In both cases, there will be people looking for shortcuts who simply won’t take the advice of the expert.

It brings up an interesting issue—I think we should discuss whether we’ll need such a guide when a CMS is in place. Most users won’t see any HTML, but they will need to know how to select styles, and which styles are appropriate for which bits of content.

On another note, I’ve had an idea kicking around in my head that we should have a basic document containing dummy text for viewing how style sheets handle all the various elements that get used in our sites (from paragraphs to definition lists.) I’ve wanted to create such a document, but just haven’t worked it in yet. It’s something to help with maintenance, but also to help with design to see if any elements need tweaking. I know having a default style sheet, or a specific list of elements to include will make sure everything has a style, but I’m looking for other issues: how nested elements look, and how multiple elements on a page look together.

Take this page for example. It contains many, many nested lists. As long as the styles for ul or li aren’t too complex the nested lists won’t need extra consideration. But if you’ve tweaked the list styles (padding and margins and such) it might look funny when there are nested lists. Another issue is what happens when there are many headers on a page. Most pages just have the title and a sub-header, so just h1 and h2. But what happens when a document requires more sub-sections, like h1, h2, h3, and h4. How do these look on the same page?

Actually, I asked for such a style guide from N+S for the Admissions site and was told it was far too complicated to create quickly. (??? but if they have a style sheet wouldn’t it be easy to set-up a page that tells us what the styles should be on an end-page verses a section home page?)

For future discussion.