The main motivation for updating the site was really a nit. The right sidebar looked liked crap on Safari and when I started tinkering with the HTML, I discovered my table-based layout was just not up to snuff.

“Standards”, I thought, “XHTML and CSS. That’s the ticket.”

Random notes from the experience:

Let me first suggest that site redesign is not something that you can do in your spare time unless web design is your chosen profession. The reworking on the site had been on my to do list since October, but it wasn’t until late December when I had any sort of time to focus.

The original nuts and bolts came from sites out there which provided handy templates for common weblog layouts. In a brief search this morning, I was unable to discern which site I actually used, but there are lots out there and they’re doing a fine, fine job.

Given the presence of the template, I figured most of my work would be fine-tuning look and feel rather than hacking on XHTML. This is a common (and dangerous) Incrementalist assessment which occurs during a project, it’s the “looks good, ship it” call which is made well before the project is remotely close to being done. Normally, you’ve got QA to tell you you’re insane, but when it’s just me, I’ve got absolute veto power over the voices in my head, so we blindly proceeded with fine-tuning.

I embraced a lot of CSS during the last revision of the site, but hardly enough. My adoption of XHTML Transitional and CSS (plus usage of templates within Movabletype) made prototype of ideas really stupidly easy. When I did run into some rendering problems in other browsers, simply validating my prototype solved a lot of rendering problems which resulted from my inability to correctly close tags.

Now before the design gurus of the world start jumping up and down proclaiming standards goodness, a brief sidebar. Once I started moving the site over to my templating scheme in Movabletype, I discovered a problem. On pages with very little content in the center , the footer on my page overwrote the right column. “Surely, this is a result of blindly adopting someone else’s template,” I think, “Surely, this is easily overcome.”

Wrong.

After multiple hours of tweaking, tinkering, and pulling my hair out, I broke down and looked to Google for sympathy. Turns out my relatively simple design exposes a significant issue in CSS which, simply put, is that good footers are hard. You need to assume that one column is going to be the longest or else you start to get overlaps. People who know a lot more about this stuff than I have been bitching about this for some time. Many alternatives have been proposed and I’ve tried a lot and consistently found the results to not meet the requirements.

Bummer.

(Note: If you think you have a layout which works, I’d be more than happy to prove you wrong. Two columns — either can be longer than the other — footer at the bottom — always.)

Fortunately for me, I am an Incrementist with only minor Completionist tendencies, so I was able to overcome this after only a half day of screaming at my monitor. The resultant hack was a dollop of transparent gifs to push things around at the right time… which smells a lot like a table-based layout to me.

Once I had the site up, I had to go through each article and see how it looks. This process turned out to be an expensive operation as I hadn’t accounted for various tags I’d infrequently used such as lists, blockquotes, and others. I really wish I’d done some type of style guide beforehand so I could make and see all my design decisions early on rather than when the site was live.

Checking the layout against other platforms and other browsers yielded a couple of puzzling frustrations in the form of a significant bug using floats in Internet Explorer 6. There are a couple more problems I’ve found with cursory testing against IE6/PC that leads me to believe their support of standards is good, not great.

Lastly, I am pleased with my use of CSS. The more I looked at live samples from various respected design weblogs, the more I respected the simple flexibility of CSS. I took pleasure in cleaning up my original generous usage of custom DIVs in favor of replacements of existing, more readable, tags. There’s more work to do here, but it’s a good start.

[Update 1/11/04]: It looks like A List Apart might solve my column insanity issues.