Designers who come from a printed-media background can have difficulties making the transition to web design. With printed media, the designer essentially has full control over the design. An esoteric type family can be used to effectively convey the character of the content. The designer can precisely specify colors from well-established standard color palettes. The design's dimensional relationship to the size of the printed medium is fixed. For all intents and purposes, the reader sees exactly what the designer intended.

A web designer's control over web design is quite limited by comparison. While a web designer can specify any number of different type families, the font that is rendered depends on several factors outside her control. The font family that is displayed depends on the typefaces installed in the user's device. Typeface substitution is likely if the designer specifies an uncommon font. The font size can be adjusted larger or smaller by the user. Even though the web designer can theoretically specify among nearly 17 million different colors, the color-depth that the user agent supports is not known. Even if a color is supported by a user agent, the actual rendering of the color is not necessarily consistent across all displays due to color fidelity and variations in color calibrations amongst displays.

Arguably the biggest challenge web designers face is creating an aesthetic design that will be rendered at different display sizes. This is particularly true for browsers on computer displays, since the browser window can be adjusted to any size up to the width and height of the typical monitor; sizes ranging from 640 x 480 pixels to 1600 x 1200 pixels.

Nearly every web page design falls into one of three types: fixed-width, liquid (aka fluid), and elastic layouts. Each of the three types has benefits and disadvantages. From a layout perspective, an advantage to a designer can often be a drawback to a user, and vice-versa, as you'll soon see.

Fixed-width Layouts

In a fixed-width design, the page content's width remains the same, regardless of the browser window's width.

Many fixed-width designs are around 760 pixels wide to accommodate 800 x 600 pixel displays. However, more and more designers are producing fixed-width sites that are around 960 pixels, assuming that users have 1024 x 768 pixel monitors.

Many designers prefer fixed-width layouts because they are more consistently rendered. Regardless of the browser window's width, the width of the page's content remains constant. The designer needn't be concerned with how the page will render if the browser window is narrowed or widened. This is especially true for designs that use a lot of floated elements, where changing the width of a column may cause an element to fall out of its arrangement in the flow of the column.

A fixed width layout gives you the most control over how your design looks, but can be an inconvenience to some users. Users with small monitors have to scroll to the right to see the entire page, and those with wide monitors don't have the option of utilizing the full width, resulting in excessive vertical scrolling.

Examples of Fixed Width designs

You have been working with a number of fixed-width designs already. In week eight, we created two- and three-column designs that were fixed-width layouts.

Let's look at them from a user's perspective now.

3-Column Fixed In the Three-Column Float with Header/Footer Open in a New Window design, the page is jammed against the left edge of the viewport. This fixed-width layout uses floating columns.

Resize the width of the browser window and observe what happens to the page. It is completely unaffected by the changes to the width of the browser window. If you narrow the browser window past the width of the page, the right-hand portion of the page is obscured, and a horizontal scroll bar appears to allow you to view the obscured portion of the page.

2-column Fixed design In the Two Columns with Header and Footer Open in a New Window design, the page is centered in the viewport. The navigation and main content column are both floated.

When you resize the width of the browser window, the page remains centered within the viewport. This is generally considered more aesthetic. However, regardless of the browser window width, the width of the content in the page remains constant. Only the left and right margins for the page change as the browser window changes.

Liquid Layouts

A liquid layout adjusts to fill the browser's width. Liquid columns have their widths defined in percentages. The page content gets wider or narrower as the user resizes the browser window; thus taking full advantage of the browser window width.

Advocates of liquid design argue that web accessibility requires designs to be liquid, since fixed designs do not accommodate varied viewport sizes.

Liquid layouts are more challenging to design, since there is less control over the width of the page's content area. While liquid layouts make the best use of the browser's viewport, it's trickier to ensure that the design does not fall apart at different widths. If the browser window is narrowed too much, columns may overlap; or design components could crowd one another, causing floated components to fall out of arrangement. If the browser window is too wide, the line lengths in the content may become too long, impairing the readability of the content.

Use the max-width and min-width properties to circumvent the drawbacks of liquid layouts.

Examples of Liquid Designs

In week eight, we created a number of liquid designs.

Two Column Basic Design The Two-column Basic Open in a New Window design features a navigation column with a fixed-width, and a content column on the right that is liquid. The navigation column is absolutely positioned while the main content column is prevented from encroaching into the navigation column by applyng a left margin setting to the main content.

3-column Basic Design The Three-column Basic Open in a New Window design is comprised of a fixed-width navigation column on the left, fixed-width sidebar column on the right, and a liquid center column for content. Narrowing your browser window will reveal one of the issues with a liquid design. You can narrow the browser window far enough to cause the columns to overlap. The side columns are absolutely positioned, while the main content is in the normal flow. Right and left margins are applied to the main content to prevent it from overlapping the side columns.

3-col with Header The Three-column with Header Open in a New Window design is similar to the Three-column Basic layout. In this example, the header is fixed-width. Like the Three-column Basic design, this design is comprised of a fixed-width navigation column on the left, fixed-width sidebar column on the right, and a liquid center column for content. Narrowing the browser window excessively will cause the columns to overlap. This also uses absolute positioning for the side columns, similar to the preceding three-column basic design.

3-column design with Header and Footer The Three-Column Float with Header/Footer Open in a New Window design is an all-liquid layout; i.e., all of the columns are liquid, as are the header and footer. Resize the width of the browser window and observe what happens to the columns in the layout. Though the left column is liquid, the navigation appears to be fixed only because the nested "links" DIV containing the navigation elements is fixed. It actually spills out of the "column1" containing block when the width is too narrow. All three columns are floated, and percentage values are applied to the width of each column for liquidity.

This lecture page is an example of an all-liquid design. The min-width for the BODY is set to 680 pixel to ensure that the width is not reduced to an unacceptable level.

A survey of web pages will reveal that many liquid designs are actually a hybrid where a side navigation column is fixed in width, but the content columns are liquid. This gives the designer a little more control over the design while making the page accessible where it counts, in the content columns.

Elastic Layouts

Elastic layouts are essentially fixed-width layouts. The column widths do not change according to the width of the browser window. Elastic layouts are also referred to as em-based or em-driven layouts.

In elastic layouts, all containers on the page have their widths specified in ems. The containers will scale according to the user's current browser font size. Elastic designs keep everything on your page in the same relative proportions. This enables the page to adjust for a user with poor vision who needs larger text.

Elastic Lawn design The Elastic Lawn Open in a New Window design in the CSS Zen Garden is a good example of an elastic design. If you increase the base font size in Firefox using CTRL++ [or Cmd++ on a Mac], or decrease the base font size using Ctr+- [or Cmd+- on a Mac], the width of the columns increase or decrease accordingly. However, when you change the browser window width, the width of the content does not change.

This is considered an accessible design because it works very well for sight-impaired users who use large font sizes in their browsers. However, a liquid design is considered more accessible because it allows the user to adjust the page width to a finer degree.