Liquid design : Importance and Considerations

The term “liquid” implies that a Website should flow smoothly into whatever space it is given. If you use a high resolution monitor, this may mean that you need to re-size your browser a little, which most people in that situation do. If you have a low resolution monitor, you will still see the information, it will just be a little more compact.

If you do Liquid Design right, you should be able to make your pages display on almost anything and still make sense to the user.

Not everyone has perfect vision, and many of your potential customers may indeed be blind. If you build your site using relative font units and percentage based widths for common elements, you’ll already be making life a lot easier for a portion of your visitors. Maybe even many of them.

Importance of ‘liquid design’ in creating web design
The goal of liquid design is providing similar experience to people and eliminate possible irritating design flaws such as too much white space, disappearance of certain sectors of information due to lack of space etc.

Resolution statistics and interpretation
A web designer’s task is to predict the available space the web site can use to display. One must consider first of all what the web site’s target audience is. For example, people who work with computers every day (programmers, other designers etc) often like to have a “bigger picture” of things hence they are more likely to have high resolutions – 1024×768 or even higher. People who access the Internet from universities or educational institutes are likely to use older computers and may use 480×640 or 600×800 resolutions.

Recent statistics show that most people use 1024×768 resolutions (nearly 44%) and 600×800 resolutions (50%). Until recently, the number of those who used 1024×768 resolutions was much lower, while 480×640 resolution was the preferred resolution by users. As technology evolves, the percentages change. Nowadays, web designers have started designing for the 600×800 and above.

The effective screen space is smaller than the actual number of pixels (e.g. width of 800 pixels and height of 600 pixels for 600×800 resolutions). The reason is that people use up space by adding toolbars and different additional buttons to their browser window. For example, when designing for a 600×800 resolution the web designer should in fact design for 409×741 (width of 741 pixels and height of 409 pixels) although this is not fail-proof for every situation.

The secret of liquid layouts

  • work out a basic layout grid before you begin coding
  • include gutters so that your columns will not spread too wide
  • use percentage units for widths of all containers and gutters
  • do not define containers that use the full width of a page – allow for browser rendering issues (such as percentage rounding)

Liquid Design: Can it be Done?
Yes, without a doubt! Fixed layouts are slowly becoming a thing of the past. And the principles and considerations involved in creating a liquid layout (rather than a fixed layout) are very easy to implement on your site.

However, the whole liquid idea does require a shift of focus. Stop thinking of the Web as a medium you can control, stop thinking for your users, and you’ll be happier, your visitors will be happier, and the Web will be just a little more pleasant for everyone.

Is liquid design adequate for any web site?
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.

Pros and Cons of Liquid design..
Pros: The major benefit of a liquid design is that the layout will adjust to fill a variety of resolutions. You can create a site that will work well at both low and high resolutions without all the empty space outside of the design. A liquid layout with it’s use of ‘em’ or percents instead of pixels will be more accessible to viewers with poor eyesight as they can more easily resize the text. It can also be easier to fit all of your content into the design for those viewers with higher resolution monitors.

Cons: A liquid design does have it’s drawbacks though …. It is time consuming. You do lose a certain amount of control over how everything will look and some of the empty space of a fixed design will work it’s way internally into the liquid design. There is also the issue of line length growing to wide which will make you text difficult to read. Using max-width is an option for browsers outside of Internet Explorer. IE will need it’s own workaround to keep your lines of text from becoming too wide. A liquid layout can often be more difficult and time consuming to develop and test.

Click here to download sample application on liquid design.

3 Comments

  1. We all who are involved with web application development often don’t think about design.
    Our main concentration would be with programming.
    but my dear friend you don’t leave anything and move beyond our thought.

    nice to see you post about Liquid design.
    keep moving forward ….

  2. Thanks you for your posting. I read your bolg with convention related blogs and learnt lots of things. Thanks again for your posting..

Leave a Comment