Fluid elastic design

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..

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.

Roger Johansson’s blog

Think Vitamin

You may also want to see the Headscape site which has a demonstration of the different layout approaches.

Boagworks

Boagworld