Why Fluid Designs are Usually a Poor Choice

I occasionally hear people say that web sites should be designed to stretch to the width of the browser (a fluid design), because this lets the user take advantage of whatever their screen size is. Even though they are making what is essentially a usability argument, usually these are people who are focused on technology standards and abstract goals, rather than design and usability.

Most fluid designs, however, decrease usability. For most content, it just isn't practical to create a design that works well for a wide range of screen widths. Line lengths get too long for good readability, and often ridiculous amounts of white space appear.

Take a look, for example, at the w3c site. Yes, it scales nicely to fill the browser window. But the readability of the site only decreases as you stretch beyond 1000 pixels wide, with no compensating benefit. It would be a better design if it had a maximum width of 1000 pixels.

For most sites, I believe the optimal approach today is to design for a fixed width of 950 to 100 pixels. This will fit on the vast majority of desktop and laptop screens without horizontal scrolling. For the few people still using 800 x 600 displays, they can deal with a little horizontal scrolling; look at the stats for your site, and if this is more than a few percent of your audience, be sure not to put any critical content in the right-most 200 pixels. (For a site such as Webvanta.com, 800 x 600 users are well below 1%.)

There are some exceptions. Sites that display a grid of items, such as photo thumbnails, can often make effective use of any width by adding more columns to the grid.

Taken to the extreme, some folks believe that a single page design should also scale down to mobile devices. If you want to provide a good mobile experience, this is a terrible approach. Event the w3c site completely switches its layout when you get to mobile screen sizes. You really need an entirely different layout for a good mobile browsing experience, and probably different content as well. But that's a subject for another post.