The Reboot Story: Part Two

posted on November 3rd, 2005 by Anthony

Things have been live now on the Reboot for a good day or two. I’ve had thousands of hits on the site and so far the response has been incredibly good! Thanks to everyone who has dropped a comment so far, it’s really appreciated!

Anyway, I’ll get back to the story of the design…

In the last post I talked about the inspirations behind the new look, in this one I’m going to ramble on about the more fundamental aspects of the layout and stuff like that.

The Old Fixed v Liquid Debate

Now I’m not going to bore you with what’s right and what’s wrong, there are far brainier and more respected people to argue the toss about this thorny issue than me.

Personally I believe strongly in the theory of liquid pages, and when a liquid design works it can be fantastic. I think that aiming for liquidity is an admirable thing, and I try to shoot for it whenever I can.

But (and you knew that was coming), frankly they are a right pain in the arse to make pretty.

In the early design stages most of my sketches where with liquidity in mind, but as admirable as it is, it does limit what you can do with graphics. I think it was aiming for liquidity that stalled my early doodlings.

Once the ideas started flowing I had to make the choice of which road to take – liquid of fixed?

In the end I took neither, and ploughed my own path somewhere to the right of fixed.

Fixedquid Street

So the design that eventually popped on to my Fireworks canvas is mostly fixed, the main post and navigation areas are built to fit on an 800×600 screen.

However, the third column is too much information to stuff into the small 800×600 pixel real estate. So you’ll notice that it disappears off the page when viewing in a small window. I designed it that way deliberately because I didn’t want to completely dump people with small screens completely, yet I didn’t want to neglect the amount of space my 1280×1024 resolution affords me.

So what I’ve got is a flexible “Useless Information Board” (which is based on the type of thing you see with tide times and stuff on by the sea). The board is absolutely positioned with a left margin equal to the width of the fixed areas (plus some extra for breathing space) and a min-width of 150px like this:

#outer {
  position: absolute;
  left: 780px;
  top: 180px;
  right: 0px;
  min-width: 150px;
}

This means (in good browsers) it will resize itself up to a point, before eventually dropping off the page entirely – ideally before looking completely stupid. I think it works reasonably well – but I acknowledge it’s not without drawbacks.

For a start at 800×600 there is obviously going to be the horizontal scroll bar, and if you do scroll across the design loses its integrity – but overall I’m happy with this state of affairs as the few unfortunate souls having to use 800×600 still get to experience most of the design as I intended.

Float the Boat

I’ve also tried to make the header as flexible as possible. You’ll notice that the ferry moves towards the left, as the screen resizes.

This was fine until it reached the quay tie thing (technical term that) then things started looking funny as it disappeared behind an invisible wall. So I decided to employ a PNG with some nice alpha transparency to achieve the effect of the boat travelling behind. Along with that there is also a healthy amount of z-index jiggery pokery to make everything work.

As you know, IE6 can’t handle the alpha channel, so it outputs a horrible grey block instead of nothingness. I looked into employing JavaScript hacks to make it work. There are a couple of good examples out there, but in the end I opted for an exploitation of IE’s (lack of) CSS rendering to serve a not so good transparent GIF to it instead.

I did this by using:

#quay {
  background: url(images/quay.gif) no-repeat left bottom;
  height: 120px;
  width: 200px;
  float: left;
  z-index: 2;
  position: relative;
}

body>#header>#quay {
  background: url(images/quay.png) no-repeat left bottom;
}

IE doesn’t understand the > selectors so completely ignores them and everything inside them too – which is nice.
Ideally I would have liked to extend this idea into the railings, but I felt at the time it was more hassle than it’s worth because the screen is so small by that time that it isn’t worth reading… but it’s probably worth it in the future.

More to Come

So that’s why things are laid out like they are. In the next instalment I’ll explain some of the ‘features’ that are around the site, and probably a few other things too!

• The Reboot Story: Part One

Posted November 3rd, 2005 9 Comments »