Redesign complete (more or less)

14 August 2005

One crash course in cascading style sheets (CSS) has made it possible to dump the default templates supplied by LivingDot and MovableType and go for my own on this blog. Changing the design was only half the reason for doing this as I needed to learn a bit more about how MovableType itself worked. Having used a couple of Perl-based site-management systems in the past, it turned out to be quite straightforward. But, then again, I haven't tried to do anything fancy in PHP yet.

There are still a few rickets in the design when it comes to how it renders on different browsers. This was designed on a Mac, so works best in Safari. Firefox has a little problem with the size of the search box, which presumably can be overcome with a quick hack. I had to change the design for IE 5.2 for the Mac as the original design ran into the one bug in the renderer that has no workaround. D'oh. Opera seems to be happy enough with the CSS except for a problem with handling underlines in the headline links in the left-hand panel.

The look is slightly different on IE for Windows - this seems to be down to the way that Microsoft messed up the box model in CSS. The problem only affects the link boxes at the left-hand side so the text alignment is a little off, but I have made no attempt so far to use hacks to make the designs match up. Given that none of the versions of IE that I tried (including IE 5.5 for Windows) didn't leave chunks of text busting out of boxes in bizarre ways, I'm considering myself to be quite lucky. Then again, it is only a two-column design at this point, so there isn't that much that can go wrong.

I'm trying to keep the overall design very simple and clean. I'm not a big fan of sites that litter links all over the front page. You're just asking people to get lost in the structure. Instead, I'm inclined to put a blogroll and similar stuff on a dedicated page. Right now, I can't see a good reason to have a forest of links in a column with no explanation of what they are for.

The banner image underneath the logo by the way is a small stack of DVD-R disks shot with a macro lens and then oversaturated in Photoshop. Once cut out, the image just happened to have the right shape and had the benefit of forming a vague link to both the media and technology.