There are quite a number of layouts in web design. The most common include fixed, liquid and elastic layouts. This article outlines the major differences in terms used to describe layouts in web design, and when each particular design calls for a specific layout. So if this issue has confused or frustrated you in the past, read on…
Layouts in Web Design
Fixed layout
In web design, fixed layouts are those that use a specific unit of measurement to define web page widths – independent of all other factors, including browser window dimensions and font sizes. In other words, the webpage/site will be the same fixed sized regardless of the size of the browser window or the size of font in which the page is written.
For instance, the main column of a webpage/site can be fixed at 740 pixels. If a viewer accesses that webpage on a minimized browser window, the main column would still be 740 pixels wide, and this would not change regardless of how big or small the browser window becomes. This implies that if the browser window is smaller than the fixed width of the page, a viewer would be unable to see everything on the page all at once.
Therefore, the layout is called so because the page is fixed at a constant pixel width. Various columns within the webpage are usually defined using a chosen unit of measurement, most commonly the pixel.
Relative layouts
A relative layout refers to a layout that defines webpage width using some relative unit of measurement. In this case, the content in the page will resize according to the size of browser window users access it on.
With relative layouts, column widths are defined to fill up a certain fraction of the browser window, regardless of the actual size of the window on which the page is viewed. If a viewer expands or contracts the website to be bigger or smaller, the columns will automatically resized so that their size, relative to the size of the browser window, remain the same.
Within specific limits, you won’t have to scroll horizontally to access all content with relative layouts. Relative layouts in web design are also referred to as ‘liquid’ or ‘fluid’ layouts, because the page stretches or contracts itself to fill up the entire space of the container available – in this case the browser window. The relative layout is also referred to as the ‘elastic’ or ‘flexible’ layout.
So, why is the same layout given so many names?
The short explanation is that the names came about because different webmasters from different locations were trying to describe a phenomenon that didn’t have a technical description at the time. Web design in itself is relatively new; having begun in the 1990s, hence there was no defined vocabulary for every encountered phenomenon. Therefore, webmasters just gave a name they thought fitted what they were trying to do.
Elements in relative layouts are defined in relative units such as percentages or ‘ems’. An ‘em’ refers to the font heights for typefaces that are on the page. It is taken as a relative measure since the font sizes also have different heights. Percentages work the same way as they do everywhere else i.e. if a column is set to be 60% of the page, it will occupy 60% of the available space e.g. the browser window.
Dreamweaver: Liquid, elastic and hybrid
The way terms were used during the initial rollouts of Dreamweaver can bring a little confusion to the understanding of layouts as explained above. Dreamweaver is a WYSIWYG web editor (what you see is what you get) which enables webmasters to create websites by using visual interfaces similar in operation to word processing programs.
This web editor also provides a few blank templates that can be used for web design. To serve the various needs of different webmasters, it also includes templates to handle both fixed and relative layouts.
In Dreamweaver (before and including CS4 only), layouts are defined as being ‘fixed’, ‘elastic’, ‘liquid’ or ‘hybrid’. Fixed layouts in Dreamweaver are defined using pixels as the unit of measurement. This is the same definition as was given above.
Liquid and elastic layouts in Dreamweaver are essentially relative layouts. Probably, Dreamweaver developers just wanted to allow webmasters the freedom to define their page widths using either percentages or ems, used for fluid layouts. Here, the elastic layout uses the em as a unit of measurement while the liquid layout uses ‘percent’.
The hybrid layout utilizes a combination of both ‘percent’ and ‘em’ to define page widths. So, how do you know which unit of measure should be used for which page design?
When to use fixed layouts
Fixed layouts are useful for designs that include multiple elements that must have perfect alignment on the page. For instance, you may have an image in one column that needs perfect alignment to text or another image in a different column. Fixed layouts offer a greater measure of control, ensuring that all elements will display in the exact way you intended at the point of designing.
When relative layouts using Em should be used
This is the same as Elastic layouts if using Dreamweaver CS3 and CS4 and it sizes columns according to the font sizes used on the page. Now, this is still considered relative, even though theoretically a designer can define font sizes hence effectively fixing column widths. This is because viewers can supersede your settings on their browsers. Usually, this is done by those who must use larger fonts e.g. if their eyesight is failing.
Therefore, if a user specifies larger fonts, this will make page columns wider. The reverse is also true – smaller fonts will shrink column widths. The elastic layout is ideal if you’re displaying text only, since the text will appear in the exact same position when the column resizes according to changes in font.
However, it is limited in that a user can specify a larger font size than his browser window’s width can allow without scrolling. This will automatically create a horizontal scroll bar that is annoying for users. However, with proper design, you should be able to meet the needs of the majority of your users.
When relative layouts using Percent should be used
Specifying page width as a percentage ties it to the width of the viewer’s browser window. Provided you ensure the total width of all columns together does not exceed 100%, most users will never encounter the horizontal scroll bar. However, images still present a challenge since they have fixed widths, defined in pixels. You can create a design that won’t display horizontal scroll bars for most users in normal circumstances.
Conclusion
With this information, you are now armed enough to make an informed choice about the best layout option, given the end-goals of your or your client’s website.
