For a while now, I’ve wanted to have a crack at a ‘liquid layout’ web site; that is, a site that grows and shrinks with the browser window. Where I work, they insist on centred fixed-width sites of 760 pixels, which is fine, but it gets a bit boring after a while!

I think that the reason for a fixed 760 pixel width layout is that people tend to view web pages with a viewport of 800–1000 pixels, and it’s acceptable to have a 100 pixel margin on either side of a page. It does make life easy, especially when you’re converting a Photoshop concept into a reality, and there’s no worrying about making things work or look good at different widths. But I wanted to try a liquid layout (a) because I think they can look good, and (b) because I wanted to see what sort of problems I’d come up against.

Problem number one was creating a round-cornered liquid box. I ended up with three nested DIVs and an H2 with the four slices as overlapping backgrounds, and P and/or UL content — not pretty, but considering all the styling was in CSS, the HTML was not difficult to read either.

Problem number two was a liquid masthead, but this was easily fixed with an over-large background graphic, anchored to the top-left corner.

Problem number three was box illustrations. This was my biggest worry, as fixed-width designs make extensive use of bookmatched graphics and photos. I ended up creating an over-wide Photoshop template for photographs, with a background colour and transparent overlay. The resulting images were then anchored in the centre, so that more of the template is revealed when the page widens. The result was satisfactory, but I think this needs a bit more investigation.

On the whole though, I was quite please with the result. See the LetsGo website, a singles club in Northern Ireland, here.