What's The Difference Between Liquid, Elastic, Relative, Fluid, Flexible and Fixed Layouts?
by Christopher Heng, thesitewizard.com
One of my visitors recently asked me what the difference between a "liquid" layout, an "elastic" layout and a "fixed" layout was. He happened to be using a web editor that used these terms in its templates list. This article attempts to explain the difference between such words, as well as other terms like "relative", "fluid" and "flexible" often used in articles dealing with web design.
What is a Fixed Layout?
A fixed layout in web design is one that uses a unit of measurement that does not depend on other factors, such as the size of the font or the dimensions of the browser window, to determine the width of a web page. To put it another way, the website appears with a constant size no matter how big the browser window is, or what sort of font is chosen for the page.
An example will hopefully make it clearer. Take a look at the Feedback Form Script Demo Site. The main column of that site has a fixed layout, set at 730 pixels wide. Try viewing the site with your web browser maximized to its largest size. Notice that the column continues to be only 730 pixels wide, even though your browser window is now much wider than the page. Now shrink your browser window so that it no longer occupies the whole screen. Again, observe that the column retains its size. If you reduce your window below a certain size, you will not be able to see everything on that page, but will have to scroll horizontally in order to see the right hand side.
Since the width of the page is fixed, such a layout is called a fixed layout. The width of the various columns of such a page are often specified using a unit of measurement like the pixel, which doesn't change depending on the circumstances.
What are Relative, Liquid, Fluid, Flexible and Elastic Layouts?
A relative layout in web design is one that uses a relative unit of measurement to specify the width of the page. The content of the page resizes to adapt to the size of the browser window displaying it or the font used on the page.
Take a look at any page on thesitewizard.com, including the one you're currently looking at. The right hand column of thesitewizard.com uses relative units, and should resize to fill your browser window no matter how large you make it. For example, if your brower window is opened to a width of 1024 pixels, the right column should extend right to the right hand side of the window. Expand the browser window so that it is now 1200 pixels wide and you will again see that the browser resizes the main content to fill the extra space. Within limits, if you reduce your window, the content should also be shrunk so that you do not have to scroll horizontally to read the article. (Of course if you shrink it beyond a certain limit, the window will become too narrow to display the content properly, and everything will go askew.)
Such a page layout, which stretches or shrinks to fill the browser window according to its size, is called, among other things, a "relative" layout. Other names for such a layout include a "liquid" or "fluid" layout, since the page spreads itself to fill the width of a browser window the way a liquid spreads out to fill the entire surface of its container when poured into it. It is sometimes also called a "flexible" layout and an "elastic" layout.
Why are there so many different terms for the same thing? Basically, it's the result of different webmasters all over the world trying to describe a situation that did not originally have any technical name assigned to it. Remember that web design only started in the 1990s, and the webmasters writing about it did not have a set vocabulary to fall back on, so everyone just coined something in an attempt to describe what they were doing. Who knows, give it another decade or so, and things may well settle down. Or maybe all these commonly used terms will just be accepted as is and be used interchangeably.
Relative layouts are accomplished by using a relative unit like the em or the percent ("%"). The em is basically the height of the font being used on the page. It is considered relative because a 16 point font has a different height from, say, a 12 point font. The percent has the normal meaning you are used to from mathematics. That is, if the width of the page is set to 80%, it means 80% of the maximum width it can have. It's regarded as relative since the maximum width varies depending on how big your browser window is.
Liquid Vs Elastic Vs Hybrid in Dreamweaver
Muddying the water somewhat (although not entirely) is the use of the terms in early versions of Dreamweaver. This is a WYSIWYG (What You See Is What You Get) web editor that allows webmasters to create sites using a visual interface that works somewhat like a wordprocessor. (See my Dreamweaver tutorial if you want more information.) The editor includes several blank web design templates which web designers can use if they wish. To accommodate webmasters with different needs, they have included templates that handle fixed layouts as well as relative layouts.
The editor labels its layouts "fixed", "liquid", "elastic" (Dreamweaver CS4 and earlier only) and "hybrid" (Dreamweaver CS4 and earlier only).
The "fixed" layout in Dreamweaver uses pixels as its unit of measure for specifying the width of your content. As such, it has the same meaning as that mentioned in the above section on "What is a Fixed Layout?".
Both the "elastic" and "liquid" layouts in Dreamweaver are actually relative layouts. The developers of Dreamweaver probably wanted to give users the freedom to choose between "em" and "%" as the unit of measurement for a fluid layout. As such they decided to call the relative layout that uses em an "elastic" layout, and the layout that uses percent a "liquid" layout.
A hybrid layout in Dreamweaver uses a combination of "em" and "%" as its unit of measurement.
I know that the above explanation only raises new questions for most of you, like "what's the significance of using 'em' and '%'?" and "When do I use a fixed layout? When do I use a liquid layout? (etc)". If so, read on.
When to Use a Fixed Layout with the Pixel as a Unit of Measurement
You will want a fixed layout for your web page when you have many items on your web page that need to be aligned with one another. For example, you may have a picture in one column of the page that must be aligned with another picture or some words in another. Using a fixed layout gives you a greater measure of control, making sure that the things in your page will appear in the same position as you designed it, since your page width will not change even if your visitor resizes his/her browser window.
When to Use a Relative Layout with the Em as a Unit of Measurement ("Elastic" in Dreamweaver)
When you create a web page that uses the em to specify the width of a column, or what is termed "elastic" in Dreamweaver CS4 and CS3, the size of your columns depend on the size of the fonts used on your page. Some of you may be wondering at this point, "In what sense is such a layout relative? Can't I specify the font and thus effectively create a fixed width page?"
While it's true that you can specify the font that you use on your web page, remember that users can (theoretically) also override your font selection in their browsers. Few people do this of course, but the few who do are often those who really need to, often because their eyesight is poor and they need larger fonts. With today's extremely small laptops and netbooks, it is also possible that some people specify larger fonts because their monitors are too small for them to read the text.
As such, if the user chooses a larger font, your columns on your page will be wider. If they choose a smaller font, the columns will shrink. In other words, your page width, specified in em, is relative to the size of the font.
- Possible Advantage of Using Em for Your Relative Layout
If the column on your web page contains only words, with no pictures or other elements, and your visitor specifies a larger font for the page, your page will appear to be perfectly zoomed in, with every sentence appearing in the exact relative location you designed it. That is, if you have a sentence that says "This sentence spans from the left margin to the right" that occupies the entire width of the column when you designed it, it will contine to occupy the entire width in the user's resized window. It will not have some portions of it moved to the next line or anything, since both the width and the text that appears is tied to the font size.
- Possible Disadvantage of Using Em for Your Relative Layout (Compared to Percent)
Depending on how many ems you specified for your page width and how small your visitor's window is, it's possible for a user to specify a font so large that your page width becomes larger than their browser window.
Note that this is not as significant a disadvantage as it appears, even though it creates a horizontal scrollbar which users hate. If you design your web page well, and not be too ambitious in specifying a gigantic number for your page width, the situation will not occur for most visitors using your site normally. (Don't worry about the minority who create very small browser window sizes: those are usually the power users who will automatically be able to figure out what the problem is and know how to resize the window bigger to read your content.)
In view of the disadvantage mentioned above, I tend not to use "em" as a unit of measurement for my website columns. Dreamweaver has also removed their "elastic layout" in the newer versions of their web editor (although probably not for the same reason).
When to Use a Relative Layout with the Percent ("%") as the Unit ("Liquid" in Dreamweaver)
If you specify your page width in percent, its width is tied to the size of your visitor's browser window.
Its advantage lies in the fact that if you make sure that the total width of your page adds up to less than 100%, the majority of your visitors will never see a horizontal scrollbar on your page (the bane of many users).
Note that I say "majority" and not "all". This is because, like all layouts, it's entirely possible for a visitor to resize his/her browser window so small that the browser has to display a scrollbar. This is particularly so for web pages that have images (pictures) in them, which is probably most websites. Pictures have a fixed width, specified in pixels, and thus will occupy a fixed amount of space in a page. However, it is possible for you to design your site so that the scrollbar does not show under the normal resolutions that most visitors use (usually 1024 pixels and above). (The simplest way is not to place an image so wide that it takes a large window for it to be displayed in its entirety.)
When to Use a Hybrid Layout
Hybrid layouts are basically layouts that use a combination of different units of measurement to specify the width of various columns on the site.
The hybrid layout in Dreamweaver CS3 and CS4 uses percent for the total width of the page and em for the width of the side bar (the navigation column). It has the advantage of making sure that your web page fits within the confines of the browser window, avoiding horizontal scrollbars as far as possible, while at the same time ensuring that your navigation menu is always wide enough for all the words to appear in the positions you placed them. It is an attempt to get the best of the percent and the em relative layouts and minimizing the disadvantages of either.
On the other hand, thesitewizard.com's hybrid layout, at the time this article was written, uses a fixed width for its left column (ie, in pixels) while a relative width (in percent) for the right. It was my attempt to make sure that the left column has enough space for the words in my navigation menu. (It didn't occur to me to use em for the left column the way Dreamweaver did. Anyway, everybody has their own way of solving the same problem.)
Although in theory, hybrid layouts may seem better than the other relative layouts, in practice, it has no advantages over them. Yes, none. Let's face it. In order for the space in the navigation menu column to be too small for the words, the browser window has to be resized to an abnormally small size. Real users don't surf with windows shrunk to such a small size. If they did, practically every site on the Internet would be unusable. The only people who test with such ridiculous sizes are the owners of the websites themselves. Besides, when windows are shrunk to such small sizes, even sites that use a hybrid layout will appear to have its elements skewed. In other words, the benefit of such a layout over the other traditional relative layouts is probably zero. (I'm just guessing, but this is probably one of the reasons why the latest versions of Dreamweaver no longer provide a hybrid template.)
Which to Choose
My aim in this guide is to provide enough information for you to be able to make a decision about which layout to use for your website. If you need to mull over this further, you may want to read one of my earlier discussions on the subject, The Great Fixed Vs Relative Width Page Layout Debate (which has a slightly different focus).
Note that if you are following one of my web design tutorial series, either the Dreamweaver CS5 Tutorial or the KompoZer Tutorial, you will by default create a site with a relative layout, which works well for most websites. You're not restricted to just using that layout, of course. Since those tutorials are for beginners, I had to start somewhere. If I gave this kind of detailed explanation in chapter 1 of those tutorials, your eyes would have glazed over, and you'd have given up hope of ever creating a site. However, if you are a Dreamweaver user, you can easily switch from a liquid layout to a fixed layout (and vice versa) without having to redo all your pages.
By the way, if you're reading this article out of curiosity, with the intention of creating a website but not actually having one yet, I suggest that you go on from here to read How to Start / Create a Website: The Beginner's A-Z Guide.
For people who absolutely cannot decide, let me say that in the majority of cases, it really doesn't matter which you choose. For most people, either layout will do fine. For example, thesitewizard.com will appear perfectly fine using a fixed layout as it does a relative layout. When you are a beginner, every small decision seems like a major one since you don't have enough experience or knowledge to differentiate between them. My suggestion in such a case is that if you are following a tutorial series (such as one of those I mentioned above), just use whichever layout that tutorial tells you to. You can always change it later, when you are more experienced (and confident).
Copyright © 2009-2010 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
Recent Comments