What is Liquid Design?

The Internet is still in its infancy as a medium but, slowly -- very slowly -- designers are coming to terms with it. Well, a small contingency of designers anyway.

The sad fact is that the vast majority of Websites you'll come across, especially small-medium sized business sites, would be better off being made into a print brochure.

You know what I mean: A 720x400 pixel "window" sitting in the middle of the monitor looking lonely and unloved. Possibly sporting "chunky buttons" "flashing knobs" and the legendary "Spinning Logo".

<shudder>

This article will introduce you to the basic concepts of creating a fluid Web page layout with CSS, and withTables. If you've not really explored this area before, it's high time you did!

The Web is Not Print

People who find themselves faced with the task of creating or commissioning a Website tend to think in terms of print. It's what we know, after all. The fact that the Internet can be accessed with many different variations of browser, platform, settings or even devices often escapes these, our potential Web design clients, entirely.

Your visitors can use almost anything to access your information, from simple variations on popular themes such as:

• Browsers with large fonts
• Browsers with Javascript and images turned off
• "Alternative" browsers such as Opera, Mozilla, or Netscape

...to the more extreme ends of the spectrum such as:

• Web TV
• Text-only browsers
• Screen readers and braille browsers
• Hand held devices

So, trying to impose strict, rigid, pixel-perfect design on such a fluid and unpredictable medium is futile.

What is Liquid Design?

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 resize your browser a little, which most people in that situation do. If you have a low resolution moitor, 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.

But it's not just about making a page 'flow' with the browser window. The principle of Liquid Design goes hand in hand with the principles of accessibility.

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.

Enough With The Theory!

Ok, so how do we implement liquid design principles on our Websites? Well, the first thing you'll need to do is to change the way you think about the Web. The whole Liquid Design concept is a mindset...

• Throw away the need to have your pages look exactly the same on every device
• Be prepared to compromise your ideals
• Start thinking about accessibility issues as you design
• Hold your head high, you're making the 'net a better place!

There are two major ways to tackle Liquid Design:

1. With Tables


2. With CSS-P

I'm a great advocate of CSS (Cascading Style Sheets) and for accessibility and Liquid Design (not to mention speed, good markup and SEO issues) it's a clear winner. Clean, uncluttered markup will not only make your pages load faster, but you'll also find the whole process of writing liquid layouts much more intuitive.

....and before anyone starts shouting about NN4, yeah, I know: if your audience comprises a high proportion of NN4 users, you may well be best off with a tables-based approach.