Elastic Design

This new website layout is a Gas. Actually I’m not sure what to call it, besides my personal experiment to attempt to answer to the question of Fixed versus Liquid.  (Edit – I recently redid my CSS and I think I left this out; only because most browsers now have zoom features that grow images and page-widths too.) Update: And here I thought I was being clever and creative. I ran across the term “Elastic” layouts today. They are exactly what I was trying to explain. Heh, great minds think alike I suppose? I just wish I would have found this info earlier (google for “elastic layout” and observe the results), but I did learn alot in my attempts so I guess I’m glad for the learning process. Anyway, so I think my article is silly now in comparison to the information out there, but you’re welcome to read it anyway. – VELDA, 2005-02-09


In the web design world we have become familiar with the terms ICE and LIQUID to describe different methods to lay out a webpage. As a brief overview, an ICE layout is a solid, fixed width that may be dwarfed by a too-large container (high resolutions) or too large for the lowest resolutions, resulting in too-wide right margins in one case and dread horizontal scroll bars in the other.

LIQUID layouts mean simply that the content can be poured into whatever size container it’s given. These, at least by my perception, are more widely accepted for usability. Most designers I know (myself included) don’t particularly like the look. Most programmers I know laugh about designers not liking the “look” of something, but this gut reaction to poor form is actually based in functionality.

At larger resolutions you can end up with entire paragraphs stretching across the screen as one line. Low resolutions will often take the text from columns or headers and wrap it at just a few words per line.

So a
in a
header or
like this.

Text blocks that are too wide OR too narrow look funny and can give your reader a headache. The dread horizontal scroll bars are replaced by having to scroll constantly (vertically or horizontally) with our eyes.

I know the solution to this is to wrap the lines at a comfortable width regardless of resolution and even user defined text size (the ability to control text size is a great boon to me when I don’t have my contacts in so I can imagine it’s good for others too). The method: EMs.

The experiment is simply this: instead of focusing on how my content fits the size of it’s container, I’m concentrating on how the container fits the size of it’s content. The container is the layout itself and it should scale with its contents, like a balloon scaling to fit the gasses inside it as they react to their environment.

Here are the problems I’ve run into so far, so if anyone has ideas on how to solve them, point me in the right direction.

1. At the lowest resolutions or largest text sizes, with more than one column of text, I can get horizontal scroll bars. But the reason they’re taboo is a user might have to scroll back and forth to read a paragraph. In this case, they might not be able to fit the whole site (columns and all) but they still shouldn’t have problems reading one column. Even if they did, they could always resize their text, but only if they know how.

2. Without the support of min-width, fixed elements like logos and contextual images can potentially break the layout.

I’ve tried to address these issues by designing around them on my site, but they can be more difficult to address if the client wants three columns or larger images in the layouts.

At any rate. If you want to see how I made this site, go ahead and have a look at the code and the imported css. Let me know what you think of it and whether it worked for you. 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s