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

3 views of the same website

15 inch screen	17 inch screen	19 inch screen

General Notes on 17 inch view of the Liquid Design:

Horizontal Navigation Bar with a Sectioned Design:
Very often a horizontal navigation bar works on a home page and sub pages where the layout is blocked into section or columned (otherwise known as a newsletter layout). Take a look at the transition between the homepage and the subpage on the following design:

Home page divided out into columns of information.	Extra column on the sub page blocks in the main paragraphs into shorter lines, making the text easier to read.

Horizontal Navigation Bar with one main text area (not recommended):
When a Liquid design contains a horizontal navigation bar but only one main area for the text content on the sub pages the layout becomes difficult to populate. The only option left to the designer adding in the content is to insert large images to try reduced the length of the lines in the paragraphs. Increased image size of course would mean that your website would take longer to download and use more bandwidth. Take a look at the sample below, the homepage works nicely but the subpages become a bit awkward in layout:

The horizontal bar works on the homepage because the content is blocked into regions.	The result on the sub page is that the lines of text run across a very large area making the paragraphs harder to read.

Vertical Navigation Bar
Rather try and see if you can utilize a vertical navigation section in a liquid design (usually a column on the left hand side of the screen). It would actually be best to intergrate either a collum information or images on the right hand side to help minimise the length of each line of text. (long lines of text are harder on the eye than less-wide lines.) One can also look at using a larger font and playing around with the spacing between lines and letters of the text.