The Death of the Liquid Website Design

The liquid layout for websites is dead, thankfully. Actually, it’s been largely dead for a few years now. Liquid layouts, for anyone who’s not sure what I’m talking about, are website layouts that scale horizontally 100% to the width of your browser window. I’ve had some arguments over the years with people who didn’t understand why we were “wasting all that space” by designing fixed width layouts. I usually tell them it’s for the same reason you don’t read books with 20 inch wide pages, or why newspapers have columns. It’s just plain difficult to read long lines of text. “You don’t have enough good content to fill all that space,” would be another acceptable response.  Back when screen resolutions were mostly maxing out at around 1024 pixels (probably 3 or 4 years ago), you could get away with using liquid layouts. But today’s jacked up screen resolutions create painful liquid layouts at higher resolutions of 1600+ pixels.

Even our friend Jacob Nielsen has gone against his earlier recommendation to use liquid layouts. I was surprised when I first noticed he had changed Alert Box to have a fixed 800 pixel wide layout. To his credit, he’s just adapting his guidelines to changing technology.

In the past I’ve told people who wanted to use liquid layouts to go look at 10 of their favorite sites and tell me if any of them are using that type of layout. Now I ask tell them with a lot more confidence. I just now randomly went to 10 popular sites to verify that they’re all using fixed width layouts. They are. And here are the pixel widths of their layouts.

  1. Yahoo – 972 pixels
  2. CNN – 980 pixels
  3. NY Times – 972 pixels
  4. MTV – 977 pixels
  5. NFL – 986 pixels
  6. University of North Carolina – 970 pixels
  7. MLB – 990 pixels
  8. Bank of America – 750 pixels
  9. Home Depot – 796 pixels
  10. White House (.gov) 976 pixels

You’re next question may be, how do they decide how wide to make their layout? Hopefully they find a consultant, pay them loads of money to come up with an arbitrary number in their head, and bingo – there’s the magic number. Alternatively, they look at the most popular screen resolutions for their site (say 1024 x 768) and take off enough pixels to account for other display elements like scroll bars. If you’re unsure how wide to make your site, do what I just did. Pick some top-tier sites and see what they’re using.

Lastly, just because your site is a fixed width doesn’t mean the design needs to be. The trend for good design over the past few years has been to create subtle, scaling (liquid) backgrounds to enhance the design. Or at least create a background image that fills enough space so that the design doesn’t look bare at higher resolutions.  Whitehouse.gov is a good example of a subtle background design that enhances the design without adding clutter.

Follow Discussion

One Response to “The Death of the Liquid Website Design”

Trackbacks

  1. Website Screen Resolution – Bigger is not Better - iaWerks - Making the Web Usable One Site at a Time™  

Leave a Reply