Layouts

Which one is right for your project?
From:

[|A Guide on Layout Types in Web Design]
Jul 22 2010 by Alexander Dawson

Fixed Layout
Commonly regarded as one of the least flexible methods of laying out a web design, the use of pixel-based measurements has almost a digital resonance associated with it that transfers across from the print industry, in that the medium relies on fixed/static measurements. This unit of measurement is accurate and leaves little guessing as to how a web design will appear across different web browsers and has become exceptionally popular among sites that favour control and predictability over optimizing the layout for the audiences’ particular viewing situation. A fixed width layout is used on Six Revisions. We all know that problems can arise from having to scroll in all sorts of directions, and the fixed measurement of a px-based layout has this general issue in spades. While many people seek out some sort of ideal width to ensure maximum compatibility, it’s worth mentioning that if you use a lot of elements that require fixed layout rules like non-repeating background images or borders with other non-relative elements, fixed measurement layouts can do the job well and act as the best all-around solution.

Elastic Layout
One of the most used methods of laying out a design’s content is using the relative em unit of measurement. Commonly referred to as an elastic layout design (due to the way it flexes by growing and shrinking to meet the content’s needs), it has shown a great deal of appreciation within the web design community due to its ability to scale content, text sizes, and such. Unlike with fixed units of measurements where absolute-unit elements like images are best suited (due to maintaining without distorting), elastic layouts work best when flexible content (such as text blocks) takes the front seat (though there are ways to have [|images scale elastically as well]). Popular for its elastic nature, em measurements are recommended for font sizes. Of all the methods listed, the elastic layout type is the most subservient to your content as it gives the content itself the deciding position as to how the layout should scale. Making the text smaller in such a design will reduce the width or height, and enlarging the text will have the opposite effect. This unique attribute allows the layout to resize based on the content rather than the needs of the layout. Using an elastic solution is perfect if you want the layout to be determined by the content, but it can have issues if the text scales beyond the viewport (causing unwanted horizontal scrolling).

Liquid (or Fluid) Layout
The most relaxed method of providing a dynamically expanding or contracting design makes use of the ever-popular percentage (%) unit measurement. This layout type has gained mass popularity because it is the ultimate way of allowing the total opposite of a fixed layout where the content will simply take whatever space is available to it. Percentages require careful calculation as you can’t give more than 100% without issues! The limited guarantees you hold on the viewport being used goes beyond screen resolutions (imagine your site on a 6-inch screen versus a 100-inch screen, even just at 80% width). Though it goes without saying that a liquid layout is useful in almost every web-based situation because it adjusts its width depending on how big or small the user’s viewport is — so it’s definitely worth looking into.