redesign – layout

Posted on November 6th, 2006 at 7:10 pm

The time has finally come for a total redesign of this site. As well as being visually unremarkable the code is a horror to look through. So over the next few weeks I’ll be taking a detailed look at the descisions and processes used to bring this site up to date.

KingOfMyCastle Screenshot from November 2003 KingOfMyCastle Screenshot from November 2006

As you can see, there was much redevelopment from my first site to it’s current incarnation. The first used frames (top and left were fixed, right was the changing content) which is a big no-no in current web development, but it was my first site ever. The current site moved from the frame-based to it’s current three-column CSS positioning, which has been a W3C recommendation since 2001. This separates all layout information away from the content which is a good thing for many reasons including Search Engine Optimisation and Accessability.

Making a three-column website work in all browers can be a bit of a headache, especially when the middle column is liquid (i.e. it stretches to fill the gap between the left and right column.) If I could ignore Internet Explorer 6.5 then life would much simpler but there were some serious problems with the way that browser renders CSS positioning. It doesn’t understand the min-width and min-height parameters, requiring you to hack the code specifically.

Three-columns were all the rage three years ago but now it’s more de rigeur to have a tidier two-column format. A good example of this is the Warren Ellis website (below left). This has a liquid content area and all the other stuff in one fixed-width right hand section. As much as I’d like to use that style I shouldn’t really use it as I aped his old three-column layout for the current look.

Warren Ellis Screenshot from November 2006 CSS Zen Garden Screenshot from November 2006

Fixed width or not? It’s suggested that the minimum width you should have a web page is 720 pixels. Most computer screens operate at 1024 x 768 pixels so is there a need to make your website fit a smaller 800 x 600 screen? Well yes there is, and even on the bigger resolutions the browser window is often smaller than the whole screen. Will that make your website look stupid on a 1600 x 1200 display? Probably. An example of taking a fixed width website to an extreme can be seen with the Lonely Flower design at CSS Zen Garden (above right). You can cheat by looking at the user’s resolution and generating the web page specifically for that resolution but I’ve never seen the point in generating more style sheets than necessary.

My initial thoughts are to go for a 550 pixel content area (fixed) and a 250 pixel sidebar (fixed). This would still work on 800 pixel wide screens and, as long as the background was well designed, shouldn’t look too bad at higher resolutions. The lack of a liquid content area would annoy some people but everybody knows how to use a mouse wheel or scroll down these days so the desire to fill every inch of the screen is reduced. And for an incredibly techie note, it would make it much easier to push the content higher up the HTML making it much more Google friendly.

Once I’ve decided what course to take I’ll write again. I’ll be tackling the issues of colour, header and background design next, my least favourite subjects. It’ll be time to dig out my Photoshop guides and colour wheels for sure.

This entry was posted on Monday, November 6th, 2006 at 7:10 pm and is filed under Technology, Web Design. You can follow any responses to this entry through the RSS 2.0 feed.

Please add a comment