Fluid elastic design | Boagworld - Web & Digital Advice

Web & Digital Advice

Digital and web advice from Headscape and the addled brain of Paul Boag... tell me more

Ed Merritt Posted by: Ed Merritt On Friday, 23rd May, 2008

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

Design Development:
The estimated time to read this article is 3 minutes

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.

Become a web expert with our newsletter

Receive invaluable advice every three weeks and get two free video presentations for subscribing. You can unsubscribe in one click.

Blog Updates

You can follow all my posts by subscribing to my RSS feed or signing up to my email newsletter above.

Podcast Updates

Subscribe to the podcast via itunes or RSS. You can also subscribe to my quick tips via itunes and RSS too.

Social Updates

I am completely addicted to Twitter so try following me there. I also have a Facebook page which contains considerably less waffle.

Comments

Boagworld is a community, not just the voice of one blogger. You've read the post, now its time to get involved.