Fluid elastic design
Posted in Design, Tech/Development on: Friday, May 23, 2008 by
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.
4 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
I like how your website has layout examples for clients. What a smart idea.. if you got paid for how many smart ideas I “steal” from you.. well I would be poor.
With the advent of “zoom” (opera, IE, FF3 and soon Safari have it), will the text size issue of fixed width layouts become mute? I haven’t really done any testing, just at thought, but to me it seems that zooming a fixed width layout makes it behave like an elastic layout.
Hey, I did the XHTML and CSS (not the design, though) for the old Think Vitamin (I think that a new design might be in the works) – ’tis an honour to have my work mentioned as an example here!
(pointless comment, I know, but I’m supposed to be working at the moment :))
I’ve been looking at the fluid elastic design that you guys were talking about and having a bit more difficulty implementing it that I’d imagined!
From what I cans see on Roger Johansson’s site he uses a two column layout set by percentages. The thing is when one of those columns has a defined width (by say a picture) – and you resize smaller one column will fall under the other. Is there something that I’ve missed?
I was playing with the zoom too, but its a browser preference isn’t it? Don’t think we can invoke it automatically?
if(this.is_a_really_big_monitor[and_theres_lots_of_space_to_my_right){
zoom(to_window_width);
}
It’s like the Cntl++ for text sizing, 90% don’t know it’s there =/