At the very beginning of laying out a website, we are presented with two choices. Shall we make the design fixed width, or fluid? For those not familiar with the terminology, fixed width is this and fluid is this. The first has a fixed width regardless of the browser window and the second stretches as browser window gets wider. Try resizing your window to see what I’m talking about.

Fixed width layouts look fine in your average-sized browser window, but there are two extremes to consider. On really narrow windows (cell phone browsers for example), one might get a horizontal scroller, which nobody is really fond of. It makes reading a website a real pain, especially when text itself is wider that the window. And when it comes to really wide browser windows (wide-screen 24″ monitors are just sexy), the layout’s background is stretched far left and far right. Usually this results in large white areas to the left and right. And I’ve had people going “I spent all that money on my display and now I can’t benefit from it”.

On the other hand, fluid layouts look fine in your average-sized browser window, but we have to consider two extremes (oh the irony). In really narrow windows they usually get very useless with each word of the text falling in a new line, objects overlapping, etc. And how would you like reading text stretched all the way from the far left of your new 30″ display (let’s not be modest with the 24″) to the far right. I’m sure your neck wouldn’t like that.

For some theory - Long time ago, people have realized that line length does matter in printed material. Short lines require most of our times jumping from one line to the next, which, I know it mind sound funny, but is time consuming and requires some concentration. And when lines get longer, reading requires much moving of the neck and finding the next line gets a bit tricky. So it was agreed that the length of the lines (or width of the text block) must fall within some optimal limits. And it’s no different with web sites. Ideal length of a line on the web is said to be about 30 to 35 em, where 1 em is “equal to the pt size of the current font”. So, with 12px fonts, 1em is 12px. Why am I talking about typography and text layout all of a sudden? Because with most web pages, text is the central part of the site, and therefore plays a big role in our original question.

Ideally, I would recommend using fluid-width layouts, but don’t let them get too wide or too narrow. CSS min-width and max-width rules come in very handy here. Problem is, guys at Microsoft don’t agree. I’m not sure about IE7, but IE6 just ignores the two, which makes them useless, really… So I usually go for a fixed width design, due to the points I described in the previous paragraph. It’s just way more readable. I usually make text lines a bit longer than the ideal 30-35em though, but compensate that with a bigger line-height, which improves readability. I also tend to make designs fit 800×600 resolution. There are still people using it, as well as people who are not so fond of full-screen browser windows. I still can’t understand how one buys a 24″ display to run everything full-screen on it. Multiple windows side-by-side, anyone? I don’t think there are many applications that would benefit from so much space, but having more windows displayed on the screen can be quite nice. So for people “not benefiting from their big 24 inch display”, try this. Websites are a bit narrow so you can use the screen space for something else, not so you can complain about the white space.

Fixed width layout comes with another question - where to align the content? Left, center, or right. Believe me on this one, but you don’t want to use right if your language uses a left to right writing system. I do think that designs aligned to the left usually look very nice (example), but I don’t recommend them since the problem of large white areas is even bigger here. And usually we look at the center of our display, rather than to the far left edge. So a centrally positioned fixed-width layout would be my choice. But I do think fluid layouts can be very nice when done properly. Just don’t let the text boxes get too wide. For a good example of such a layout, see Web Standards Project. Looks nice and reads very well on different browser sizes.