The Old Days

I don't want to belabor this point because much has already been written on this topic. Yes, there was a time when sites were horrible and I'm sure many sites still are horrible. By "horrible", I mean the maintainability of the content "source." How legible is it? How easily can it be revised to give your content a different style or look?

It's usually easy to tell an old (pre-CSS) site. These are the markers, the "code smells" (as M. Fowler would say) of a site in need of an overhaul:

  • Liberal use of non-breaking spaces ( )
  • Use of the deprecated font tag
  • Blank GIF images used to generate margins and padding
  • Nested HTML tables
  • A high markup:content ratio
  • Table rows with liberal use of colspan and rowspan attributes
  • Empty table cells (used for their padding/margin side-effects)

Of course, you don't have to really look for any of these smells. Your body will tell you: you'll get a nauseating feeling, or a feeling of immense frustration, or maybe despair..you'll know.

CSS gives us the necessary tools to transform such old sites into ones that are maintainable, easily revised. Moving a sidebar from one side of the screen to the other can be performed by revising a float: left style specification to float: right. But we need to remain cautious and make sure that when we use CSS we are still moving in the direction of more readable, more maintainable.

I've seen CSS employed in a way where the designer has to calculate the position of a block in order to place it in a proper location, for a given static content. Such designs are fragile, and expensive (they require style changes when content changes).

How does one go about improving a pre-CSS site? One way to do this is to apply principles of refactoring. I've recently employed refactoring on a site that I maintain. You'd be amazed how much smaller, cleaner, and more readable the resulting site has become. I was able to make small, piecemeal changes over weeks, at my own pace. The look and behavior of the site was maintained throughout the process of cleaning up the markup. This particular site had been designed and implemented by someone else; making small, iterative changes worked well in this situation.

The other option of course requires a little more gumption but will often end up taking less time. Here is the recipe:

  • Extract the content from the existing site into a separate set of pages;
  • Make sure the content is complete and can be viewed in a plain old browser. Sure it's lacking some style and layout and a look and feel but that's coming;
  • Make some basic layout and "look and feel" decisions, possibly slightly revise the structure of the content to match the structure;
  • Link in a new stylesheet to the header of the pages using either the link tag or @import CSS directive;
  • Start building the stylesheet. Begin with global styles: document margins, base font, colors;
  • Proceed with any additional styling necessary to give specific types of blocks the look and positioning necessary to effect the end result;
  • As you go, you'll have a general idea of what you want to do. The feedback you'll get in the process of styling the document will help you make the finer, more detailed decisions.

I've employed this latter method to redesign a separate site. In this case, I didn't care to maintain the same look and feel, so it made more sense to start from scratch. Also, the former site had been created using automated WYSIWYG tools, which introduced a large amount of unnecessary markup, making it difficult to edit the existing content.