Liquid Design

What is a Liquid Design?

Do you often find that webpages seem too small? A liquid design is a design that fits onto a 15inch screen but also stretches horizontally to fit a 17inch screen. The result is an adaptable webpage that stretches to fit the users screen width.

As users, we often see the monitor screen as a square box which displays information, images etc. We perceive it as a fixed medium, at standard resolution, which never changes. For web designers the monitor screen does not have fixed width or height because these variables change, at times in unpredictable ways. People might have larger buttons, toolbars such as Yahoo or Google, they open the Favorites page on the left, they have a double task bar and so on. Therefore the width and height of the screen is different from user to user.

Liquid design means that the web site adapts itself to the available space, the same way water takes the shape of the glass it is in.

Ice Sites, Jelly Sites and Liquid Sites

According to design style, web sites fall into three categories:

• Ice web sites: are very rigid sites. The box that holds the content is fixed to the left. On higher resolutions appears a blank space stripe on the right causing a lack of equilibrium in the design.
• Jelly web sites: are the middle solution between rigid and flexible. The box holding the content is centered at any resolution thus preserving equilibrium, while still not using up all of the available space.
• Liquid web sites: are the utopia of flexibility, a site with no constraints whatsoever. Liquid sites expand or shrink to the available space on the screen monitor, no matter what browser window size or resolution the user might be using.
• Combination liquid and fixed layouts: Similar to liquid layouts, except one or more of the containers on the page have fixed widths.

In order to make a decision whether liquid design is suitable for a web site, factors such as type of content, structure, amount of information must be taken in consideration. Liquid design is ideal for sites with a lot of information. The elasticity of such sites increases readability.

Unfortunately, in order make liquid web sites, you must think the layout around the concept of elasticity.

If you're using tables the way to make them liquid is to specify the width in percentages (e.g. 100%). Hence the copy inside the table will expand along with it.

The problem arises when the content of the table cell is graphics. It is difficult, but not impossible to apply liquid design to graphical sites. When creating the graphics bear in mind that they have to "stretch". The way to achieve that is to create a section of graphics that, if repeated (either horizontally or vertically) it can still give the impression of continuos and unified design. Once you've done that, you will use the respective section as background of the table.

Take this very site for example. You will notice that the header at the top expands in the middle until it fills the entire screen, no matter the resolution. That is liquid design. What we did was to create the impression of continuity by repeating the background over and over again until we achieved the desired effect.

3 views of the same website

15 inch screen 17 inch screen 19 inch screen