I’ve been doing some consulting with someone who is learning to maintain a website in Dreamweaver. We keep bumping into the concept that fiddling with new styles every time you create a new page of content is a bad idea.
Remember Virginia’s Law Against Unintended HTML? It goes like this:
Play with the way your content will look before the content is on the page, not after.
In looking around desperately for a concept or metaphor that will bring home the point to this Dreamweaver user, I’m wondering if thinking of a website as being like a technical book can help. I could use one of my own books as an example. Here’s what I’m thinking.
If you look through a technical book you see all sorts of formatting: headings, paragraphs, lists, images, tables. Every time you see something, for example, a chapter title, it uses the same formatting and appearance. You don’t see a different size title for chapter 6 or a different color title for chapter 8. The appearance for chapter titles is consistent throughout the book.
A web site should have the same consistency. Every page’s main heading should use the same formatting and appearance as every other page. This applies to other parts of the site, such as links, lists, images, etc. You decide before the book is printed what kind of styles will be used for the content. Then you stick with that decision for the entire book. A website should be thought of in the same way. You plan a look – the styles – and you stick with that look throughout the entire website.
If something changes in the future (because, after all, the web is a changeable medium as opposed to a book), any changes to the stylesheet affect the entire website, not just selected parts of it.
Does this metaphor work or is it confusing? How do you teach students that a website should have a consistent set of style rules and not a page-by-page mix of freshly hatched classes?
I’ve used this metaphor for many years in my web design classes. It helps if web design best practices have already been discussed and students have already evaluated existing websites — noting the use of consistent headers, page layout, etc. When I introduce CSS, I discuss how when a new book or magazine is created, one of the first things that is done is to create a style guide that shows examples of how each component (such as the headings, subheadings, figures, lists, will look). That’s similar to what a web designer does when they configure styles for a website. You also might find http://styletil.es useful — kind of a visual style guide for a website.
Great approach, Terry. Thanks for sharing.