Fixed vs. Liquid Layouts

Designing for Specific Resolutions

Any professional web design project includes page prototypes, where a designer creates graphic designs of different pages, before any of it is translated into code. Before any of these prototype pages are developed a designer must decide how big the prototype will be. Since the web currently is viewed principally on computer screens, a screen resolution can be chosen and the designer can use this as the frame for the design.

So, what resolution should be chosen? A low resolution is probably better than a high resolution, since the whole page will be sure to display, though it might look pretty goofy (here's what a 640 x 480 page would look like on your computer with its current settings).You can also use the "typical" resolution, which is growing as monitor technologies advance. According to w3shools, the most typical resolution for visitors to thier site is 1024 x 768 or higher (49%) by a pretty close margin over 800 x 600 (46%) as of July 2003. (You can view these stats here, though you may have to scroll down depending on your screen resolution). Today, designing for 800 x 600 is probably one of the most popular strategies, since it will display on most screens, though there may be some space wasted on many.

"Liquid Layout"

On the other hand, Jakob Nielson emphasizes the importance of "resolution independent design", which means that the best way to design a page is so that it will work in any resolution. One of my favorite web design writers, Jeffrey Zeldman refers to this as a "liquid layout". Such a flexible layout will become even more important as the web moves from the typical computer screens to other types of devices. For creating prototype pages this is not an issue, since you must select some resolution for your drawing. As soon as you start displaying your work in .html, however, in many cases the size of some component of the page can be specified as a percentage, rather than as a fixed number of pixels. You can also easily create different versions of your page that will display differently in different media using cascading style sheets. An interesting example of both a fixed and liquid layout is the University of Missouri-Rolla's current site. If you resize your browser window, you'll notice that the the the navigation on the upper right moves with the window, but the content layout remains fixed (designed for 800 x 600 resolution).