Web Design: Liquid Layout

The Myth of 800x600
http://www.andreoni.com/articles/publish/screen_size.shtml
Average Screen Resolutions of Web Surfer (Feb 2001)

• 640x480: 7%
• 800x600: 53%
• 1024x768: 31%
• 1152x864: 2.5%
• 1280x1024: 2.5%
• other: 4%

So 93% of web population can view 800x600 without unnecessary scrolling.


However Viewable Browsing Area is less than 800x600
1. Browser not completely open
2. Standard toolbar areas
3. Windows status bar
4. Sidebar areas
5. Browser companions

Web page designers often account for this by developing pages that are about 770x430.

Techniques
1. Centered content
2. Placing less important content on the right
3. Fully flexible pages ("liquid" pages)
4. Variable number of columns
5. Axis-oriented pages
6. Modular page components
7. Compressing/Expanding features
8. Variable surface areas
9. Combinations       

Liquid Layout
http://www.maxdesign.com.au/articles/liquid/
All containers on the page have their widths defined in percents – meaning that they are completely based on the viewport rather than the initial containing block. A liquid layout will move in and out when you resize your browser window.

Basic Rules:
1. work out a basic layout grid before you begin coding
2. include gutters so that your columns will not spread too wide
3. use percentage units for widths of all containers and gutters
4. do not define containers that use the full width of a page – allow for browser rendering issues (such as percentage rounding)