On fixed vs. liquid design

Apparently, there’s been some huff and commotion (3, 4, 5, …) out there about SimpleBits and Stopdesign dropping liquid layouts in favor of fixed-width designs. This probably wouldn’t have been as big an issue if we both hadn’t changed (by chance) the very same week.

While I’ve been in contact with Dan since his move, I’m not entirely sure of his intentions, so I can’t speak for him. What I’ll say about Stopdesign is that it’s merely an experiment. A temporary test to explore the strengths and weaknesses of fixed-width layouts. I’ve used both for various projects, and I know the benefits and drawbacks of each. I’m not biased toward either, and don’t think one is absolutely superior over the other.

After launching the liquid-width Wired News last year, we got flack from both ends because we did use the max-width property to control column width, and thus, line-length of the text inside. Since IE doesn’t support max-width, the IE crowd complained about hard-to-read pages that suffered from long lines of text. But because Mozilla and Opera do support max-width (Safari didn’t exist then), the crowd armed with these browsers thought it was “stupid” that we were not taking full advantage of the width of their browser window. We tried to go down the middle, but found controversy because of browser inconsistencies.

To solve the line-length issue, some have suggested setting column widths in “ems” so they will expand and shrink with text size. However, em-width columns can quickly extend beyond the width of the browser window after just a few increments of text-resizing, resulting in the awkward horizontal scroll bar. And even though this solves the line-length problem, we still have a “fixed width object inside liquid container” problem.

Without complete support of min-width and max-width properties, designers using CSS are left stuck in the middle of the debate. We have no reliable means to control line-length, nor prevent content overlap or layout weirdness when a fixed-width object (i.e. an image) is inserted into a liquid-width container (i.e. a fluid column). When an absolute column width is not known (as in a liquid layout), images inserted into the column must be kept reasonably small, so as not to cause any problems with the layout in narrow windows.

This, I believe, is one of the issues CSS advocates (including myself) don’t cover that often. Truth be told, table-based layouts are currently more capable of handling this issue than CSS layouts are. I’m certainly not advocating a move back to tables for layout. But unless dimensions are heavily manipulated by CSS, tables do work well at “containing” any objects placed within their cells. This, without needing to worry about content from one cell overlapping another, or a cell suddenly getting re-positioned below a cell instead of beside it. With the current abilities of CSS, I can see why some designers have chosen fixed-width layouts. Fixed-width columns provide a maximum width to which images and other inserted objects can be sized. It mimics the predictability and reliability of table-based layouts in this sense.

Honestly, I think the liquid layout of Stopdesign has worked rather well over the last year or so. The design was intended to be anchored to both sides of the browser. Column proportions and margins were carefully chosen to work optimally in a wide range of browser window sizes. I had somehow achieved a perfect balance of relative widths, proportions, type sizes, and leading where line-length was never an issue, even for users with very large monitors. But I’ve been missing the ability to use larger, more dramatic images embedded within entries because of unpredictable column widths. So I always relegated to smaller thumbnail-size images which linked to the isolated full-size image file. A fixed-width layout gave me the opportunity to try a large image that spanned the full with of the main column, as well as three independent images sized and padded to fit perfectly beside each other in the same column.

I’ve intended to write an entry titled “fixed vs. liquid” for at least six months now, but never got around to it. The urge to experiment got the best of me, and preceded the time I had to write about it. There are a whole host of issues with both liquid and fixed-width layouts. Some I haven’t been willing to write about because they spark too many debates. Whatever your preference or belief, keep in mind that the fixed-width test on Stopdesign is temporary. Certainly, it does not herald “the death of liquid layouts”. More experimentation to come. Remember, change is inevitable, but me thinks this fixed-width stuff won’t last long here…

Update: Liquid is back. You may need to refresh this page to grab the new style sheet.