Last update : June 24, 2014
Web-page layouts can be grouped into four categories based on how their width is set: fixed-width, fluid (or liquid), elastic and hybrid. Creating web pages without fixed-width is considered as flexible web design.
The width of the overall layout of a fixed-width design is set to a value in pixels that’s decided by the designer, based on common screen resolutions, such as 800 by 600 or 1024 by 768. A recommended page width for 1024 by 768 pixel screens is 960, which is divisible by many numbers (2, 3, 4, 5, 6 and multiples). Fixed-width designs are rigid: they don’t change size based on any variations in the user’s setup. Because some people don’t browse with their browser window maximized, the screen resolution doesn’t match the browser window width all the time. Fixed-width designs are always going to result in some segment of the audience seeing a design that is either too wide for their windows (necessitating the dreaded horizontal scrolling) or too narrow (leaving oceans of space on one or both sides of the layout). Many people get almost as distressed about “wasted space” in their browser as they do about horizontal scrolling.
Fluid layouts, also known as liquid layouts, change in width based on the size of the user’s viewport (the viewable area of a page in the user’s device). If fluid layouts don’t have a width assigned with CSS, they will fill up the user’s viewport no matter how big or small it is. If a designer does assign a width to a fluid layout, it will be measured in percentages, not in pixels. The percentage refers to the portion of the viewport it takes up. When a fluid layout changes in size, all of the content within it has to shift around on the page to fill up the space. Horizontal scrollbars are the sworn enemy of readability. After all, scrolling continually back and forth to read across several lines of text does not make for the most enjoyable reading experience. With a liquid layout, horizontal scrollbars almost never happen, because users can size the window however they like to produce lines of text that they find the most comfortable to read and understand.
Elastic layouts change in width based on the text size set in the user’s browsing device. A user who has set a larger default text size will see a page where not only is the text bigger, but the entire layout is bigger proportionally than that seen by people with the default text size. Like fixed-width layouts, elastic layouts always have a width assigned to them, but that width is set in a unit of measurement called an em. One em is equal to the font height, which in turn equals roughly two characters in width, since most characters aren’t nearly as wide as they are tall. Elastic layouts are the rarest type of layout because before CSS became usable for page layout, they were simply impossible to create with tables. In many browsers, you can use the zoom feature to make all pages act like elastic layouts, which reduce the interest to use real elastic layouts.
Most web layouts are built using the idea of columns, whether or not the columns are explicitly visible in the design. Each column can have its own unit of measurement and be thought of individually as fixed-width, fluid or elastic. Mix them together, and you’ve got a hybrid layout. For example, a common type of hybrid layout has a fixed-width sidebar with a liquid main content area.
A resolution-dependent layout is a page that uses JavaScript to switch the CSS and thus the layout of the elements on the page by detecting browser window size. The CSS properties min-width and max-width allow you to set limits on how far a flexible layout will expand or contract.
More informations are available at the Peachpit website and at baekdal.com.