Deciding on a liquid or fixed layout is a decision that should be based on design, technique, and whether or not we are willing to take into account the nature of the web as a “liquid” medium.

In the term “liquid layout”, I’m not referring to web sites where only the background colors / background images extend to the bounds of the browser window but the content and page layout is not affected.

Why you may not want to use a liquid layout.

  • Dificulty
  • Aesthetics
  • Usability

Difficulty

Simply put, liquid layout are more difficult to construct than static layouts. For each element of the layout / design you must take into account the ability to extend it vertically as well as horizontally. In terms of CSS Layouts, this factor can be a nightmare, especially if you have, for example, one static column and one “liquid” column. CSS was obviously not developed to handle the “pixel / Percentage” combination very well because the only efficient means of succeeding in this are basically work arounds. I found a great site titled Layout gala that helps out a lot with this technique, and I actually used as a basis for the layout of this site.

Aesthetics

Aesthetics and design principals sort of have to go out the window when it comes to creating a liquid layout especially since you have to compensate for an individuals with high screen resolutions. Design and “visual harmony” on the web, or in any media for that matter is based very much on proportions and when a liquid layout is used, these proportional rules need to be extended to a point where they just don’t work anymore. This is especially the case when trying to get a layout to “look nice” stretched out horizontally on a 30″ monitor.

Usability

The optimum readable width for a section of text on the web has been proven to be about 450px 65-85 characters (source) . This width is almost always exceeded on large monitors with high screen resolutions when a liquid layout is implemented, unless of course the content section is a static width.

Why you should consider using liquid layouts.

  • Extensibilty
  • Usability
  • Taking advantage of the medium

Extensibilty

With a liquid layout, there is no need for a re-design when a larger screen resolution has become the most popular… your site will conform to any size browser window size.

Usability

Websites that fit your browser are often easier to read and interact because all the content is always visible and there is rarely any need for the horizontal scroll bar regardless of the browser window size. There is an obvious exception to this if you implement a minimum width on your containing element.

Taking advantage of the medium

I read this article by Thomas Baekdal where he writes about the redundant debate between liquid vs. static layouts. His response is:

“There is an amazing amount of articles on the net on how to make the overall layout. But, none of these gets it right. They are all trying to solve the wrong problem.

These articles define the problem as either having too much space – i.e. large empty areas outside your content – or too little space that forces horizontal scrolling and lack of whitespace.

I understand why this is a problem, and why people want to eliminate it. But, you are not solving the right one. The real problem is; how do you optimize the visual presentation of your website? How do you make your content look amazing? How do you make it easy to see – to read?”

He is correct, and this article is probably another one of those articles about the debate between liquid and static layouts but I think reasons for using liquid layouts extend beyond the bounds of making sure content looks great. What I want to bring to attention with this article is the question of whether or not, as WEB designers, we should develop websites to cohere to ALL of the unique aspects of our medium. Should we make a point to implement all the tools and techniques available to us so that each of our web-sites takes into account the fact that the size of our medium is not static at all? With a static layout, for the most part, we are basically replicating design techniques seen on print and television media but that is not our medium.

In television, there are two aspect rations, thats basically it 4×3 and 16×9, so designing for television is easy when it comes to choosing a size. The same is true for print. In the web, there are different screen resolutions, screen sizes, and then the window size. By ignoring this aspect of our medium are we are taking the easy way out? Should we be taking the easy way out? If we ignored the size of the medium in any other application, things would look awkward and would not be received correctly. This is the same situation in the web and is also the reason why I think there is so much debate about this topic.

Some nicely implemented liquid layout sites: (more to come)

  • w3.org.
    This site has been adapted with a liquid layout and manages never to become “awkward”. With that said, it isn’t to high on the “flashy design” totem poll
  • vivabit.com
  • smashingmagazine.com