Layouts

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

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

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">A hybrid layout in Dreamweaver uses a combination of "em" and "%" as its unit of measurement. <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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.

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 1.1em;">When to Use a Fixed Layout with the Pixel as a Unit of Measurement
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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.

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 1.1em;">When to Use a Relative Layout with the Em as a Unit of Measurement ("Elastic" in Dreamweaver)
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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?"

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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. <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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 continue 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.)== > > <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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).

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 1.1em;">When to Use a Relative Layout with the Percent ("%") as the Unit ("Liquid" in Dreamweaver)
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">If you specify your page width in percent, its width is tied to the size of your visitor's browser window. <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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).

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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 probably describes 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.)

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 1.1em;">When to Use a Hybrid Layout
<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">Hybrid layouts are basically layouts that use a combination of different units of measurement to specify the width of various columns on the site. <span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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.

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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.)

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px;">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.)

<span style="background-color: #ffffff; font-family: Arial,Helvetica,sans-serif; font-size: 16.363636016845703px; line-height: 1.5;">Copyright © 2009-2012 by Christopher Heng. All rights reserved.