fixed
Layout Decisions - Fixed, Fluid or Elastic ?
Tuesday, August 26th, 2008 | css | No Comments
When you commence the planning of a web project, many of your first design decisions will be related to your page layout. Essentially, you will need to decide to incorporate one (or any combination) of the following design styles:
- Fixed width - A fixed-width design is one in which the widths of the pages elements and various components are defined in an absolute unit of measurement (almost always pixels). The main characteristic of such pages is that the user cannot adjust the width of the page elements, either by resizing the browser window or by changing the text size. Despite this, fixed-width layouts are still the most common in practice.
- Liquid – a liquid (or fluid) design is characterised by the width of all page components being specified as a percentage of the user’s viewport width. In other words, liquid layouts scale in relation to the browser window. If the user makes their window wider or narrower, the design will adapt.
- Elastic – an elastic design works by setting the widths of page elements relative to font size rather than browser width. This layout will expand or shrink as the reader changes their text size, but will remain unaffected by any changes in the user’s browser window size.
- Hybrid – any combination of the aforementioned layout styles.
There is a plethora of detailed material on the web that gives detailed descriptions of the disadvantages and advantages of each design style. Instead of reproducing that here, I aim to give a succinct summary of what I consider to be the pros and cons of each method.