Layout Decisions - Fixed, Fluid or Elastic ?
Tuesday, August 26th, 2008 | css
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.
Fixed width:
Pros
-
Developer more control over layout and positioning.
Cons
-
Doesn’t make good use of available space. On large resolutions, designs created for 800 x 600 screens can appear tiny and lost in the middle of the screen. Conversely, a design created for a 1024 x 768 screen will cause horizontal scrolling on smaller screen resolutions.
-
Line lengths and legibility. Fixed width layouts usually work well with the browser default text size. However, you only have to increase the text size a couple of steps before sidebars start running out of space and the line lengths get too short to comfortably read.
- when the reader increases the text size, the text will sooner or later may break out of a narrow column and lead to an overlap that can render the page unreadable.
Liquid Layouts:
Pros
- very efficient use of space.
- the reader will never have to scroll sideways, regardless of his or her monitor size.
Cons
- At small window widths, line lengths can get incredibly narrow and difficult to read. However, you can use the min-width css property to prevent the layout from becoming too narrow.
-
At large window widths (on large resolutions), line lengths can become long and difficult to read. There is a max-width css property but unfortunately ie6 does not support it and ie6 is still too popular a browser to ignore. There are other more complicated potential solutions that exist.
-
more time and effort involved (and more difficult to get consistent results across browsers)
Elastic Layouts:
Pros
-
Solve the problem of line lengths becoming uncomfortably long or short
Cons
-
Layout can become wider than the browser window, forcing the appearance of horizontal scroll bars.
-
more time and effort involved (and more difficult to get consistent results across browsers)
Hybrid
Pros
-
can utilise the advantages of each method it uses.
Cons
-
introduces the disadvantages of each method incorporated
-
difficult to implement
-
certain issues can present themselves. For example, if a portion of your page uses fixed-width layout and another portion uses an elastic layout, you may get undesirable results when the user increases or decreases their text size.
In my opinion, if you can justify the extra time and effort required to build a liquid or elastic design, there are significant usability benefits evident. Just be prepared for some long nights, with plenty of coffee as you become acquainted with some glorious browser inconsistencies never encountered before.
References
- Jakob Nielsen 2006, Screen Resolution and Page Layout, 26/8/2008, http://www.useit.com/alertbox/screen_resolution.html
-
Patrick Griffiths 2004, Elastic Design, A list Apart, 26/8/2008, http://www.alistapart.com/articles/elastic
- Tommy Olsson 2004, Fixed vs Liquid vs Elastic, 26/8/2008, http://www.autisticcuckoo.net/archive.php?id=2004/07/21/fixed-liquid-elastic
- Andy Clarke 2004, Fixed or Fluid you decide, 26/8/2008, http://www.stuffandnonsense.co.uk/archives/fixed_or_fluid_you_decide.html
- Budd, A. 2006, CSS Mastery Advanced Web Standards Solutions, 1st Edition, Friends of Ed.
No comments yet.