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 720×400 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:
- With Tables
- 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.
Putting Liquid Design into Practice
So how do we do it? Well, let’s start by looking at a typical 3 column page layout. First we’ll look at this in CSS, and then with tables.
A “Bare Bones” 3 Column CSS Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Bare bones 3 column CSS layout</title>
<style type="text/css">
#leftpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
left: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#rightpanel {
position: absolute;
top: 140px; /* resize these bits to liking */
right: 0;
width: 200px; /* works best with fixed
width right - left divs*/
}
#content {
position: absolute;
top: 140px;
padding-left: 220px; /* 20px to play with */
padding-right: 220px; /* 20px to play with */
}
</style>
</head>
<body>
<h1>Bare bones 3 column CSS layout</h1>
<!-- Content here -->
<div id="content">
<p>You can put your content here, under the space
for a header, or you can re-arrange the
divs in the html to put your right or left column first.</p>
</div>
<!-- Right column here -->
<div id="rightpanel">
<p>This is a good place to pop nice optimized
text into, especially if your #content div
is full of images and little text. I like to
put an 'editors note' here: Just an excuse to
squeeze optimized copy into the html flow without
bothering the user ;-)</p>
</div>
<!-- Left navigation etc -->
<div id="leftpanel">
<p>Links, come last, presuming your 'header' has
a 'main sections' navigation with regular text links
this is just fine for SE's and magic for
optimization.</p>
</div>
</body>
</html>Paste that code into vim, notepad or whatever tickles your fancy, and you’ll see that it really is a bare bones example. You’ll notice that when you resize your browser, the middle column expands and contracts to make up the difference. The left and right coloumns remain fixed.
And if you’re wondering why I didn’t make it completely fluid, the answer is simple: it just looks and works better this way, to my liking at least. Try adjusting the left and right column widths to percentages: it should work fine.
You’ll have to adjust the commented sections in the css and add a great deal more presentation rules but this basic layout should give anyone who’s new to this a good building block to start with.
Further CSS resources can be found here:
If you’re wondering if you could implement fluid CSS layouts on your Webpages, you might also like to check out these examples:
- The first is a small private fan site: Gone To Ground
- and this from the Pierce College Distance Learning department.
Good examples of liquid layout from very different sites!
And Now With Tables
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>
<html xmlns="https://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!
Frequently Asked Questions (FAQs) about Liquid Design
What is the main difference between liquid design and responsive design?
Liquid design, also known as fluid design, is a layout strategy that allows web pages to adjust to the size of the screen or browser window. It uses percentages for widths, allowing the content to expand or contract based on the available space. On the other hand, responsive design is a more advanced approach that not only adjusts to the screen size but also considers the device type, operating system, and orientation. It uses CSS media queries to adapt the layout to different viewing environments.
Why should I choose liquid design over other design approaches?
Liquid design offers a number of benefits. It provides a consistent user experience across different screen sizes and resolutions. This design approach is also more flexible and adaptable, making it easier to maintain and update your website. Moreover, it can improve your site’s SEO performance as search engines favor websites that offer a good user experience across all devices.
How does liquid design impact the user experience?
Liquid design can significantly enhance the user experience. It ensures that your website looks good and functions well on all devices, regardless of the screen size. This means that users can easily navigate your site and find the information they need, whether they’re using a desktop computer, a laptop, a tablet, or a smartphone. It also reduces the need for users to zoom in or scroll horizontally, which can be frustrating and time-consuming.
What are the challenges of implementing liquid design?
While liquid design offers many benefits, it also comes with some challenges. One of the main challenges is ensuring that your website looks good at all screen sizes. This can be difficult to achieve, especially when dealing with complex layouts and large amounts of content. Another challenge is testing your design on different devices and browsers to ensure consistency and functionality.
Can I use liquid design for my e-commerce website?
Yes, liquid design can be an excellent choice for e-commerce websites. It ensures that your products and services are presented in the best possible way, regardless of the device your customers are using. It can also improve the shopping experience, making it easier for customers to browse your products, add items to their cart, and complete their purchase.
How does liquid design affect website loading times?
Liquid design can actually improve website loading times. Because it uses percentages for widths, it can reduce the amount of code needed to create your website layout. This can result in faster loading times, which can improve user experience and SEO performance.
What skills do I need to implement liquid design?
Implementing liquid design requires a good understanding of HTML and CSS, particularly the use of percentages for widths. You also need to understand how different devices and browsers render web pages, and how to test your design on different platforms.
Can I combine liquid design with other design approaches?
Yes, it’s possible to combine liquid design with other design approaches, such as responsive design. This can provide the benefits of both approaches, offering a highly flexible and adaptable website that provides an excellent user experience across all devices.
How does liquid design impact SEO?
Liquid design can have a positive impact on SEO. Search engines favor websites that provide a good user experience across all devices. By ensuring that your website looks good and functions well on all screen sizes, you can improve your site’s visibility in search engine results.
What are some examples of websites that use liquid design?
Many popular websites use liquid design, including Amazon, eBay, and Wikipedia. These sites are known for their user-friendly layouts that look good and function well on all devices.
Nick WilsonNick Wilson runs Tioka.com and is involved in various ecommerce projects ranging from Gifts for Men to Cufflinks. Nick's latest project is Phentermine Express.
