farblog

The last few days, I’ve spent my spare time here and there updating the website for my brother’s Caterham motorsport business, trying to turn it from a Geocities-inspired linkfest to something resembling a useful website. He’d told me that people had phoned him up and said, “Well, I looked at your website, but I’m still not sure what it is you do…”. This was deemed to be unhelpful.

The new version certainly won’t win any design awards (and the thought of me being involved in anything involving the mere idea of ‘graphic design’ would have very much amused my school art teacher). I basically just replaced the front page with something more organised and set up a consistent navigation and style. I won’t claim that it’s pretty, but it should be usable, and hopefully be simple to update (which is a good thing, as the webmaster still uses FrontPage for everything).

The one thing that really became clear to me was just how easy this stuff is to get working nowadays across multiple browsers. I didn’t do anything that I’d call complicated: I wrote some semantic HTML for the front page and navigation bar, added some straightforward CSS to make the navigation list a navigation bar, and used Levin Alexander’s image replacement method for the page title, a sprited CSS image rollover technique for the home icon, and some basic floats for the sections on the front page.

It’s nothing special, but it just worked, first time (or near enough). I suppose this shouldn’t be too much of a surprise, since those techniques are over five years old now (yeah, five years, wow), and also because I cheated slightly: I ignored IE6 (hey, I’m doing it for free, I remember the pie chart).

But it works in IE7 (and IE6, I think, even though I ignored it), in FF2 and Chrome, and looks okay on my G1 (WebKit again). I did run into one odd IE bug (needing to use text-align instead of margin: auto to centre a block-level element), but it’s possible that IE is in quirks mode for some reason — I didn’t check, and it seemed easier to just use the (well-known) workaround.

Sure, it’s not perfect. There are some font-size issues on my Linux box, resizing isn’t great, and I’m sure many of the interior pages aren’t strictly valid HTML… but it works.

In many ways, this post might seem like a non-event: “I wrote some simple HTML and CSS using some well-tested techniques and it worked in some modern browsers”. But I distinctly remember trying (and failing) to get the same kind of layout working sometime around 2004, and it was a complete nightmare (“Okay, I added an inline element and suddenly all the margins collapsed in Mozilla, wtf?”). Compared to that, these ‘web design’ kids today, they have it easy.

… and you can get off my lawn now.