Tips for fluid design

After getting a few comments about the site design, and in particular a few of the fluid nature comments about it being tricky to get right. I’ve found myself tending to develop fluid designs more often that not over the last few years and thought I’d do a short series of posts about some of the techniques I use. I’ve generally found it pretty easier to find discussions about the pro’s and cons and the basic principles but less so on actual techniques. I’ll try cover some or all of the following over the next few weeks or so:

• extendable background images
• using overflow hidden
• use of fluid flash banners
• min-width and max-width (and javascript)

I’ll kick off with tricks for background images.

This techniques makes extensive use of the background CSS property which is used as following: div\#iBackground { background: url(path/to/image) center top no-repeat; }

I’ll assume some familiarity with this and CSS in general, basically all we are doing is setting a background image to the div with an id of iBackground which is set to align to the top vertically and centered horizontally.

Moving the image to the background has a couple of interesting effects, the one that we are interested in here is that the the size of the div is not affected by the size of the image (as it would be if the image was placed inside it). It acts as a kind of viewport into the world of the image. By specifying the width of the div in percentages (or em’s if you are dealing with an elastic design) the size of the viewport can change dependent on the size of the browser window. An example is inorder:

joshuaink.com makes use of a large background graphic that stretches the full width of the site. This means the space can be used for pretty large imagery but without breaking the experience (sideways scrolling!) for those with lower resolution displays. Note that the flower background is 2000px wide.

The only problem with this technique that I have come across is generating the images in such a way that they degrade gracefully. You need to make sure real content (logos or text) appear in a smaller area that the whole image and live with the fact that not everyone is going to see the whole thing. In my mind this is a small price to pay for asthetically interesting fluid layouts.