Rabbit Redesigned

Voila! Welcome to the newly designed Skin the Rabbit, the fruit of over three weeks of labour. If you're reading this on Facebook or an RSS feed then I'd ask that you visit the main site here. Otherwise this post isn't going to make much sense.

Part of my new role at work involves clueing up a lot more on Web technology than I have in the past. With all the my research and studying I slowly developed a drive to put some effort into the design of this blog. The old girl hasn't had a face lift in the five years I've been posting here, so I guess it was about time to give this old format a make over.



The first thing I wanted to address was the layout of the blog itself. Sites with the two column format (posts and widgets) or three columns (posts, widgets and ads) still seem very much in vogue, but I've found myself growing tired of the look. While I think the model works well for printed media where the eye can flick around columns quickly, I'd started to think that it didn't quite fit what I want on a weblog. My argument is that having extra periphery content on the side while the reader is trying to read a post vertically becomes a distraction. Potentially a welcome one if I these were revenue generating ads, but in my case I simply had an assortment of widgets with no real purpose. At best this restricted the horizontal real estate, at worst it forced the reader to scroll back up to review sidebar content.

What I've gone for here, as you can see, is more of a sandwich approach. Images and tweets along with a menu bar are at the top but quickly give way to full width posts. The old archives and tags are in their own section at the bottom, with shortcuts in the title menu to jump down and shortcuts at the end of each post to bounce back up to the title. My hope is that this new format will give me the flexibility to play around with new post layouts and include larger images or embedded movies in future posts.

I wasn't just content with shuffling things around to widen the post area though. It's a convention in web development to design sites with a minimum resolution in mind, padding out the rest of the site with filler (note the stylish dark grey bars on the left and right). The previous layout for Skin the Rabbit was just as guilty of this, though a little less noticeable with the white on white. The old "minimum resolution" was set at 800 pixels, which was all well and good for 2005, but in the year 2009 I think I can safely bump this up to accommodate 1024x768 as a minimum resolution with a modest 990 pixels. I'm sure this will just keep going up as the years go by.

When I sat down with pen and paper to design the new look I had a pretty solid concept in my head.



My problem was that I've never really been a decent artist. No false modesty there, I just can't seem to draw or paint free hand on account of some cross-wired signals between the image I have in my head and my shaking hand. Maybe it was the stark and clean iPod commercial look I knew I wanted, but I thought I'd give vector based drawing a try with Inkscape and I'm rather chuffed with the results. I think it's something about being able to tweak a bezier curve for minutes until I'm satisfied that it bears some resemblance to what I'm going for. I have no illusions about quitting my day job to draw portraits on the street, but at least I can say that all the art on this site is original (aside from logos), something I'd never thought I could do.

Just as strong as my vision of the style was how interactive the site would be. I've always been a sucker for Flash based websites with funky slideouts and transitions. Unfortunately I've never really taken to ActionScript or Flash in general, not to mention there's the whole issue of Flash containers and plugins which annoy me. Thankfully I didn't have to go down that path thanks to advances in Javascript (particularly in modern web browsers) and particularly jQuery.

Oh I could gush on and on about the wonders of jQuery. Most of the things that made me decide not to go down the Web Development route originally in my career have been neatly put aside thanks to this miraculous plugin. It makes programming behaviour and manipulating the DOM an absolute joy. Even more so when you combine it with jQuery plugins! The photo slideshow you see at the top is made with Cycle. The funky scroll effect you get when you click the Archive/Tag or the Top link at the end of this post comes courtesy of ScrollTo. Then there's ThickBox, just click on one of the images in this post (or any other post for that matter) to have a look at that.

Right next to jQuery on my list of wonderful web technology is CSS. I never really got how powerful this was before but I can definitely say I'm a fan now. I was still a little naughty here and made use of some inline styles towards the end as my stamina flagged, though I'm sure I'll come back later to clean it up.

Other parts of the design that I'm quite happy with are the expanded photo section (click the carrot) and the archive section, both done with just jQuery and Javascript. The archives were tricky as I wanted to be able to navigate through all old posts while keeping a sense of quantity of content, all in a fixed amount of space. Hopefully the bar denoting post ratio gets this across. The expanded photos came out pretty sweet I think. Kinda wish I could link directly to the photos hosted on Flickr, but that change is going to require a little more research into the Flickr API.



Of course to make an omelette you often find that you have to break a few eggs. Getting the new layout to work across multiple browsers was definitely a challenge. One big casualty in this big redesign has been support for Internet Explorer (at least those prior to the current version 8). Much has been said on the net about the horrors of Internet Explorer 6 but I think this article here sums it up pretty nicely. To quote:

Since there were no universally accepted web standards in the early days, Microsoft created a browser that attempted to force the web to behave like any other Microsoft product. Nearly 15 years later, in spite of the development of widely accepted web standards, Microsoft has still not entirely abandoned this approach. Even today, Internet Explorer is to web standards what Ebonics is to standard English.

You can try the latest web browser acid test here. Chances are if you're using a non-Microsoft browser then you're going to get a decent score. To avoid all the extra work involved in getting a site working well with IE6 and IE7, I've just decided to drop support entirely. There are many free standards compliant browsers out there, which you'll see if you try and visit this site with an Internet Explorer version older than 8.



I'm sure I'll be tweaking things a little over the next few weeks. There are a few bugs still that I know about but figure they're minor enough to ignore for now. Do drop me a line if you notice the site breaking though as I've only tested this with the latest versions of most browsers (the usual four; Firefox, Safari, Chrome and Opera).

Hope you all like the design. I normally don't solicit comments but do let me know what you think if you have the time. I never thought when I first started a blog that I'd have the discipline to keep going this long. Here's to another five years of banal accounts of my life. *clink*

Edit: Grrr... looks like I failed to sacrifice some sacred cow for a smooth release or something. Lots of things seem to be broken including ThickBox on Blogspot images, Archives prior to July 2008 and who knows what else. Will have to fix these up through the week. Curses.