Fluid elastic design
Published on: May 23, 2008 by Ed Merritt
When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages.
When it comes to planning the layout of your new website there are just three commonly used website layout structures to choose from: Fixed; Fluid & Elastic width layouts. None of these are perfect; each comes with its own advantages and disadvantages.
Existing solutions
By looking at what works with these existing solutions and identifying the key problems they encounter, we can start to build a checklist of what an ideal layout would offer...
Fixed layouts are too restrictive and are not designed to cope with varying text size.
Fluid layouts are close to what we need, but the changing line lengths make designs hard to control and inconsistent. Max-width must be set to prevent line-lengths becoming too long on wider screens.
Elastic designs are beautifully consistent when the font size is changed, but don’t expand to use the available space until the text size in increased...
In an ideal world
An ideal solution would combine the advantages of both fluid and elastic layouts
- We need a layout to cater for users with smaller screens
- We need a layout to make the most of available space on wider screens
- We need line lengths to remain readable irrespective of screen size or text size
- We need a layout which will not break the design when screen size or text size are changed
An elastic layout which utilises free space like a fluid layout would best suit our needs.
What’s the solution
We need to combine the advantages of the fluid and elastic layouts while avoiding as many of their respective disadvantages as possible... So how about:
A layout which is fluid up to an optimal line length, then becomes elastic, allowing the line length to remain intact as the text size is increased. This should also be contained by a max-width of 100% to prevent the elastic layout expanding beyond the browser window.
The HTML
<div id=”container”> <!—this sets the max-width of the layout in em’s -->
<div id=”container2”> <!—this box contains the rest of our layout -->
</div>
</div>
The CSS
* {font-size: 100%; margin: 0; padding: 0;}
body {font: 75% Helvetica, Arial, sans-serif; text-align: center;}
#container {text-align: left; margin: 0 auto; max-width: 80em;}
#container2 {float: left;}
And that’s it...
The idea is pretty simple: use a container with a max-width measured in a scalable unit (like em’s) and our otherwise fluid layout becomes far more controllable and arguably more accessible.
Sites which use similar techniques
There aren’t many around, but those which do work incredibly well.
You may also want to see the Headscape site which has a demonstration of the different layout approaches.
Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
Post by Aaron Mills on May 24, 2008 8:42 PM
Post by John B on May 27, 2008 2:36 PM
Post by Stuart on May 29, 2008 11:49 AM
Post by Richard on July 14, 2008 8:25 PM