Posted by Vince Wadhwani on Feb 22, 2007

At the moment I run two websites (besides this blog). One, buyindie, uses a fixed layout while the other, railfood, uses a liquid layout. The difference is that the fixed layout stays the same size regardless of how big the browser window is while the liquid layout stretches to accommodate the size of your viewport. I read a bunch of sites each saying that there's no wrong way to go. For simplicity sake I started off in a fixed format but now, I've decided that the wave of the future is in liquid layouts. Here's why.

The first and foremost reason is that screen resolutions are changing wildly. Most visitors to urbanpuddle use 1280 X 1024 while buyindie sees mostly 1024 X 768. Railfood on the other hand, has a surprising amount of visitors at 800 X 600. To further complicate things, I have no idea whether the folks at 1280 X 1024 (that's you!) actually have their browser maximized. I doubt it. Most of you are smart enough to use the extra space on your screen for other things like email, instant messenger, or whatever.

But unfortunately, some clients of mine DO surf with their windows maximized. Or, more to the point, they're concerned that some of their clients surf at these resolutions with their browsers at max. When that happens, the fixed layout starts getting an awful lot of dead space in places you don't want to see it. Depending on the background color or pattern it can really overwhelm the page and detract from the purpose of the site. That's no good.

Enter the liquid layout. Whether you use a repeating pattern, solid color, or an image (see railfood for an example of the latter), everything stretches to meet the ends of the screen. There's still dead space here but, if you layout your contents wisely, it will be a lot more forgiving at higher resolutions.

I'm in the midst of redoing Buyindie now to use a fixed layout. So if you're reading this article sometime after April 2007 and don't see the fixed layout I'm talking about.. trust me. It was there. And it was f-ugly at 1440 X 900 (my resolution).

So how do you make a liquid layout? I'm going to point you to two great articles.

  1. First, here's an article that tells you about good coding habits. Pay particular attention to the bit about starting everything at a good default. Priceless!
  2. Presenting a piece from a website that needs no introduction for those who do more than dabble with html or css. There's an entire section on Liquid Layouts, which is the foundation of the next Buyindie CSS.

Regardless of whether you choose Fixed or Liquid, the above two articles will do you good. Personally, I've kissed Fixed layouts goodbye and encourage you to do the same. Feel differently? Comment below!