Article
What is Liquid Design?
And Now With Tables
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Bare Bones 3 column Liquid Tables Layout</title>
</head>
<body bgcolor="#FFFFFF">
<table cellspacing="0" cellpadding="0"
border="0" height="120" width="100%">
<tr>
<td align="center">
<h1>Bare Bones 3 column Liquid Tables
Layout</h1>
</td>
</tr>
</table>
<table cellspacing="0" cellpadding="20"
border="0" width="100%">
<tr>
<!-- Left column -->
<td width="200"><p>This is your left panel.
Generally used for navigation and
with this kind of layout, getting in
the way of the content!</p></td>
<!-- Content column -->
<td><p>This is your content area
and flow with your browser just the same
as the CSS layout above. The content
is pushed down the code flow a bit
by the tables layout but the end result is
preferable to a fixed width page. You
can see I'm biased, right?</p>
</td>
<!-- Right column -->
<td width="200"><p>Right column - fixed width at 200 px
again for the purpose of this demo. Just adjust the
widths to suit and don't be afraid to experiment!</p>
</td>
</tr>
</tr>
</table>
</body>
</html>
As you can probably tell, I'm not as used to writing tables layouts as I am CSS layouts. Despite its limitations, though, the above example gives you another building block for liquid design if you prefer -- or need -- to build your layouts with tables.
What About Fonts?
Good point! Well, if we stick with our liquid design principles we'll need to use relative font units. Our choices are:
- Em's
- %'s
- ex's
- CSS keywords (larger, smaller, etc)
- The dreaded <font> tag
Using relative units will give your users the opportunity to adjust their fonts to suit. I must admit to not always following my own advice, but on most of my sites I opt for em's. A detailed discussion on this would make a whole new article so I'll leave it with you to decide for now.
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 pleasent for everyone.
If you like the ideas I've touched upon but just can't implement them all, then don't worry. Neither can I all of the time. If you love the idea, hate the idea, or feel that I'm talking absolute rubbish (it's been known...) then follow the 'discuss this article' link at the bottom and to tell us why. The Web is a cool place -- it has room for all kinds of opinions and ideas, and I'd love to hear yours! Have fun!