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.

Father's Day Purchases

There was a bit of excitement in the Liley household this Father's Day. Granted, most of the clapping giggles came from Alison and myself (though I detected a hint of enthusiasm from the parents) but I think to whooping was justified. I'm proud to say... that we've dragged John and Sheena kicking and screaming into the Audio/Visual 21st Century.



Gone is the behemoth of a TV that blemished their living room and enter a modestly sized Sharp 32" Aquos. Not only can we watch TV in Toowoomba without cringing at the cropped widescreen programming, but as the "family tech support guy" I no longer have to wrestle with a boulder when I need to plug in new equipment. Even though my joy is mired by a parthian shot from the old CRT, as I've pulled my left arm helping John carry it to the garage, it was so worth it. The event would have been even sweeter if we'd picked up a DVR to complete the package but I guess there's always next time.

While Alison and I hadn't explicitly planned on coercing John into buying AV equipment, we did predict potential for growth in electronics and remote controls in the lounge eventually. With the knowledge of John's distaste for clutter we picked up a Logitech Harmony 515 universal remote for him for Father's Day. I've been using one of these for a while now and it's amazing how easy it is to program compared to universal remotes of old.



Unfortunately I did run into a few issues getting input switching to work on the Aquos (how ironic). Unlike most TVs I've worked with, the Sharp doesn't have specific IR commands for each input source, rather relying on OSD menu navigation to change between them. Given that state isn't available to the remote, this meant that changing from TV to DVD was only possible with dirty hacks (ie, switching channels to force TV input followed by moving down input sources a known and static number of notches before hitting enter). Not quite the straight forward experience I had when working with our Hitachi, but I got there in the end.

Now armed with universal remote and decent TV I'm sure that John and Sheena will be able to enjoy their TV watching with gusto. At least once we get rid of the four (yes count 'em, FOUR) VCR players they have with the aforementioned DVR. The struggle continues.

As an aside, we've had some success with our little fruit and vegies we planted. The strawberry plant had a few flowers which were chomped repeatedly by some garden pest, though we now have a growing and thus far uneaten strawberry! The assumption is that our fruit stealing nemesis has either given up or merely biding time while the berry ripens under our care. Our real success story however is the lettuce.



Look at the bunches (what's the collective noun for lettuce anyway?)! They're practically overflowing out of the barrel so I think it'll be another week before we start clipping off the young leaves for a little salad. Thoroughly satisfying for amateur green thumbs.

Our other achievement was finding the right succulent for our rusty watering can turned planting pot. We've been hunting high and low for something I'd seen in a magazine once. Finally found them at a nearby nursery and learned they're called Burro's Tail (sedum morganianum). We punctured the bottom of the can and filled it with potting mix and the crassulaceae (isn't Wikipedia wonderful?).



As we packed the mix pretty high in the can I employed what I thought was a delightfully ingenious method of watering while avoiding overflow. I put the spout of the can under the tap and let 'er rip with the can tilted on an angle. The role reversal amused me to no end. Seemed to do the trick though I've reverted to more traditional methods since.

I've been working on a something special for this little blog for the past few weeks, though it's taking a lot longer than I thought it would. Hoping to reveal the results sometime in the next week or so. Watch this space!

We got a dog!

Well... kinda. Encouraged by the Ekka show holiday falling midweek, we decided to extend our break to the weekend and check into The Tin Dog for a bit of R&R. To explain the title of the post, we picked up a new friend for the house to help us in the garden and help scare off pesky vermin that may savage our fruit and vegetable pots. Rusty isn't especially lively but we think he's made of strong stuff.



It should come as no surprise that most of our time was once again spent eating and shopping. We've walked past a little hole in the wall fish and chip shop in Byron that I've been keen on trying so that became our first stop. I'd never seen it so busy before but the asian in me figured that anywhere with people queueing out the door for food would be worth checking out. For a gourmet fish and chippery the menu wasn't as pretentious as The Fish Monger's Wife so I decided to order something on the "simpler" side for a change, and the baby octopus and chips with a side serving of corn certainly satisfied. The little suckers were oh so succulent.



Our stay at The Tin Dog itself was gorgeous once again, though it was a shame to discover that the owners plan on closing down in the next month to take a much needed break. Breakfasts were of course the highlight as Sue and Mark know how to put on a great spread with local produce. Als and I were also happy to see that Sesame, the ageing bovine we met on our last trip, was still kicking on strong.

Shopping efforts were largely directed at checking out funky clothes for Alison (a diminished ordeal thanks to handy audiobooks on the iPhone) as well as scouring antique stores for odd bits and bobs for our upcoming outdoor area. We ended up being quite successful on both fronts and more besides. One vision Alison has for the garden is to have eclectic containers and barrels to grow plants, and I'm sure it'll take us a happy lifetime of hunting to collect enough to satisfy.



Though most of the work in the garden will have to wait for our renovations to finish, we just had to get started on something small to slake our enthusiasm. A quick trip to Bunnings and we now nurture small barrels of strawberries, tomatoes, lettuce and lavender in the hope that we won't kill them too quickly. Rusty would help out but he's been placed on guard duty at the front door until we can find a more settled home for him in the finished backyard. At least we have a friendly face to greet us when we come home. Isn't that why most people get dogs?