Reboot

I hesitate to say "ta-da", but... but wait, no I don't. Do you know how long it's taken me to do a redesign?

"Ta-da!" (Go on, take a peek outside your RSS reader :-) )

When I say it's taken a long time, that's less in the sense of the time taken to implement this design (a few days, on and off) and more in the sense that it's well over 18 months since I first started fiddling with redesigns. I think this is the fourth or fifth redesign since February 2003, and the only one to actually make it from my hard drive onto the server.

It's not the most accomplished design — it's not even the most accomplished of my designs, at least in my head — but I wanted to show off the pretty background photo of the (bent back) tulips that Kevin got me for Valentine's Day last year (previously seen here and also in my favicon).

This was the first time I'd sat down and seriously CSSed for at least a year (save only for the nine-page CSS tutorial I wrote for the web team I worked with last year and, by God, one day I'll put it up on bentbacktulips too) so I was pleased to find I still had the knack. What I had forgotten, though, was how much of a pain Internet Explorer is. It's not as though I was sitting there trying to come up with snazzy under-used unsupported features to use, but there was quite a large range of things that IE completely borked at (well it would, since it has no support for them). Things such as:

• min-width
• max-width
• position: fixed;
• PNG alpha transparency
• background-attachment:fixed; (on more than one element other than the body)
• :before and :after
• in conjunction with the content property

It wasn't too wild about some of my floats either. I decided not to sacrifice any design bits because they don't work in IE or cause the design to break — I just added a small handful of extra CSS rules at the bottom of the stylesheet just for IE.

The wide-ranging sets of supported CSS by various browsers, and the fact that I also used the proprietry -moz-border-radius property (a proprietry property? there's got to be a better way of saying that), means that the website looks reasonably different in at least Mozilla/Firefox, Opera 7/8, Opera 6, IE6 and IE5, probably Safari too. But I don't mind because I didn't spend hours and hours hacking my way to find workarounds for all of them, and though it may not be perfect it's certainly good enough.

You can see I still have my penchant for floating boxes and fixed backgrounds :-) I was trying to avoid the all-too-ubiqitous Wordpress look which seems to be all the rage au courant, and also the annoying (to me) trend of teeny tiny fonts. It seems like I'm seeing it more and more frequently now, particularly on web designers' websites. When I encounter the phenomenon it usually makes me bump up my font size at least twice in protest (in much the same way as a car tailgating me while I'm doing 32mph in a 30 zone is always guaranteed to make me slow down to exactly 30mph). (Was that a weird analogy? I can't tell; it was 3:30am when I wrote it down.)

There's one effect that I rather like — on the left, the floating boxes seem to be semi-transparent when they float over the tulips photo (not for you, IE users) but opaque when they travel over the logo. I had tried using semi-transparent backgrounds, or even the Mozilla and IE transparency filters, but the logo in the background showed through too much and was annoying when trying to read the text over it. So, what did I do? Well, obviously, I cheated :-) It's a complex spiral-type thing — the second image makes the boxes seem semi-transparent.

In summary, then — thank you, CSS Reboot, for finally motivating me beyond my eternal laziness.