David Emery OnlineThe Archives
29 March 2009
As some of you may know I have a rather severe case of redesign-itis – this site has hardly kept one design for more then 6 months since I started writing here. Total design itchy fingers.
Don’t worry RSS readers, I haven’t redesigned again – you can rest easy. However, my css-tourettes has finally paid some dividends. If you were at SXSW Interactive (oh how I wished to be there… maybe next year!) you may have caught Paul Annett’s presentation entitled ‘Oooh, that’s Clever! (Unnatural Experiments in Web Design)’ which was all about interesting and unusual tricks, gems and easter eggs hidden in websites:
It’s very much worth a listen to – if you don’t have time, at the very least skim through the slides and open up all the referenced sites as there’s a lot of really inspiring sites in there. You’ll also notice that Paul very kindly referenced a couple of the versions of this site (thanks Paul!) which is very flattering – the goal of every redesign I do it to try and elicit an ‘Oooh, that’s Clever!’ type of response, so it’s lovely for that to have been picked up on.
As prep for his talk Paul asked me if I had any of the older versions of my site online so he could link to them – the answer was no but luckily I’ve been fairly good at versioning my css/js so with a little bit of help from the Wayback Machine so I’ve got them all online. I thought – after going to that effort – that it might be good to link to them all from here (and add a little description of each along the way):
Version 1 Mid 2005
The first iteration of this blog, it features a slowly changing background colour (powered by a 1px x 1px animated .gif) and a small amount of semi-transparent .pngs so the colour could show through.
Version 2 Aug 2006
A complete change, which moved to a completely fluid design including per-post images scaled to fit via javascript. The look was inspired – if I remember correctly – by the adverts The Economist were running at the time.
Version 3 Early 2007
I think I was the only person that liked the red background in the last version, so I switched to a white background with red text instead, and dropped the serifs.
Version 4 April 2007
A further iteration which moved the sidebar up to the top, mostly to show off the per-post images more but also because the sidebar+js image scaling caused an occasional crash in Safari(!).
Version 5 Sep 2007
One of my favourites, this one – it takes the last design but improves on it by bringing back the colour-changing gif trick (although this time with more subtlety) which pervades through most of the elements on the page (by judicious use of the opacity property).
Version 6 Feb 2008
A much bigger change this time round, with the introduction of per-post background images that change as you scroll down the page (so you always see the image related to the current post). It also makes use of a load of the new at the time Webkit-specific CSS-transisitons, so the background switches fade between each other, and there is subtle movement on roll over for lots of items.
Version 7 July 2008
I guess this one is the most different, aesthetically, moving all the content into a wide sidebar leaving more space for the background images. I also tried my hand at some @font-face embedding but I’m not sure it really worked…
Version 8 Jan 2009
The current version. I quickly grew a bit tired with the last design and its lack of ‘design’, so with this version I really wanted to add a bit more texture and interest to it. Part of that came in putting a huge, full browser latest post image – complete with an individually styled title graphic. I also gave into the inevitability and implemented sIFR for post titles – hopefully at some point soon I’ll be able to replace it with something a bit quicker.
So, that’s it – for now. I wonder what to do next; it’s been almost 4 months already…
UPDATE
Version 9 Feb 2010
A whole new design, although not a massive departure – still keeping the large images on blog posts for example. There’s a new look – of course – and the reintroduction of a sidebar with photos, twitter and a bit of article nav. Full post about it here.
Version 9b Late Feb 2010
A tweak of the original v9, losing the rounded header – which felt a bit unbalanced – and gaining a floating square header/nav block