There are a number of layouts in web design. The most common are solid, liquid and elastic layouts. This article describes the main differences in the terms used to describe layouts in web design, and when each particular design requires a specific layout. So if this issue has confused or frustrated you in the past, keep reading…
Layouts in web design
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 web page / website will have the same fixed size, regardless of the size of the browser window or the font size in which the page will be written.
For example, the main column of a web page/web page can be set to 740 pixels. When a viewer accesses this web page in a small browser window, the main column will always be 740 pixels wide, and this does not change, regardless of the size or size of the browser window. This means that if the browser window is smaller than the fixed width of the page, a viewer will not be able to see everything on the page at once.
Therefore, the layout is called so because the page is set to a constant pixel width. The individual columns on the website are usually defined with a selected unit of measurement, usually the pixel.
A relative layout refers to a layout that defines the width of a web page using a relative unit of measurement. In this matter, the size of the page content is changed in accordance with the size of the browser window that users access.
For relative layouts, column widths are set to fill a certain fraction of the browser window, regardless of the actual size of the window on which the page is displayed. When a viewer enlarges or shrinks the website so that it is larger or smaller, the columns are automatically scaled so that their size remains the same compared to the size of the browser window.
Within certain limits, you don’t have to scroll horizontally to access all content with relative layouts. Relative layouts in web design are also called “fluid” or “fluid” layouts, because the page expands or contracts to fill all the available space of the container – in this matter, the browser window. The relative arrangement is also referred to as an “elastic” or “flexible” arrangement.
Why does the same layout give so many names?
The short explanation is that the names were born because different webmasters from different places tried to describe a phenomenon that did not have a technical description at that time. The web design itself is relatively new; it started in the 1990s, so there was no defined vocabulary for every phenomenon one came across. That’s why the webmasters simply gave a name that they thought was consistent with what they were trying to do.
The elements of the relative layouts are defined in relative units such as percentages or “ems”. An ’em’ refers to the font heights for fonts that are on the page. It is taken as a relative measure, since font sizes also have different heights. The percentages work the same as elsewhere, i.e. if a column is set to 60% of the page, it will occupy 60% of the available space, for example, the browser window.
Dreamweaver: Fluid, elastic and Hybrid
The way the terms were used in the first Dreamweaver deployments can cause a little confusion in understanding the layouts, as explained above. Dreamweaver is a WYSIWYG web editor (what you see, what you get) that allows webmasters to create websites with visual interfaces similar to word processors.
This web editor also provides some blank templates that can be used for web design. To meet the different needs of different webmasters, it also includes templates to manage fixed and relative layouts.
In Dreamweaver (only before and including CS4), the layouts are defined as “fixed”, “elastic”, “fluid” or “hybrid”. Fixed layouts in Dreamweaver are defined with pixels as the unit of measurement. This is the same definition as given above.
The fluid and elastic determinations in Dreamweaver are essentially relative determinations. Probably, the developers of Dreamweaver just wanted to give webmasters the freedom to define their page widths with percentages or EMS, which are used for smooth layouts. Here, the elastic layout uses the em as the unit of measurement, while the fluid layout uses the “percentage”.
The hybrid layout uses a combination of “percent” and “em” to define the page widths. So how do you know which unit of measurement to use for which page design?
When to use Fixed Layouts
Fixed layouts are useful for designs that contain multiple elements that need to have a perfect alignment on the page. For example, you can have an image in one column that requires perfect alignment with the text or another image in another column. Fixed layouts provide greater control and ensure that all elements are displayed exactly as you had planned at the time of design.
When relative layouts are to be used with Em
This is the same as elastic layouts if you use Dreamweaver CS3 and CS4 and scale the columns according to the font sizes used on the page. Now this is still considered relative, although theoretically a designer can define font sizes, effectively fixing column widths. This is because users can overwrite their settings in their browsers. Usually this is done by those who need to use larger fonts, for example, if their view fails.
So if a user specifies larger fonts, the columns of the page will expand. The opposite is also true – smaller fonts reduce the column width. The elastic layout is ideal if you only display text, because the text will be displayed in exactly the same position when the size of the column is changed according to the changes in the font.
However, it is limited in the sense that a user can specify a font size that is larger than the width of the browser window can not allow it without scrolling. This will automatically create an annoying horizontal scrollbar for users. However, with the right design, you should be able to meet the needs of the majority of your users.
If you want to use relative layouts that use the percentage
Specifying the page width as a percentage binds it to the width of the user’s browser window. Provided that the total width of all columns together is no more than 100%, most users will never come across the horizontal scroll bar. However, images still pose a challenge because they have fixed widths defined in pixels. You can create a design that will not display horizontal scrollbars for most users under normal circumstances.
With this information, you are now sufficiently equipped to make an informed decision on the best layout option, taking into account the end goals of your website or your customer.