Subject: Advanced Internet Technology

Topic: Responsive web design with HTML5 and CSS3

Difficulty: Medium

Fixed Width Layouts

• In Fixed layouts, the width of the site is generally set in the number of pixels.

• Generally fixed width layouts are usually used in the web because the rigidity of the layout provides steadiness and control.

• Fixed width layouts allow a designer more direct control over how the page will look in most situations. They are often preferred by designers with a print background, as they allow the designer to make minute adjustments to the layout and have them remain consistent across browsers and computers.

Benefits of Fixed Width Layouts

• A fixed width layout allows the designer to build pages that will look identical no matter who is looking at them.

• Fixed width elements such as images will not overpower text on smaller monitors because the width of the entire page will include those elements.

Drawbacks to Fixed Width Layouts

• Fixed width layouts can cause horizontal scrolling in smaller browser windows.

• They can also result in large expanses of whitespace in larger monitors, resulting in a lot of unused space and more scrolling vertically than might otherwise be necessary.

• Fixed width layouts don't handle customer changes to font sizes very well. For small increases in the font size, they can be okay, but for larger increases, the layout can become compromised.

Liquid Layouts

• Liquid layouts are layouts that are based on percentages of the current browser window's size. They flex with the size of the window, even if the current viewer changes their browser size as they're viewing the site.

• Liquid width layouts allow a very efficient use of the space provided by any given Web browser window or screen resolution.

• They are often preferred by designers who have a lot of information to get across in as little space as possible, as they remain consistent in size and relative page weights regardless of who is viewing the page.

Benefits of Liquid Layouts

• A liquid width layout expands and contracts to fill the available space.

• All available real estate is used, allowing the designer to display more content on larger monitors, but still remain viable on smaller displays.

• Liquid layouts provide consistency in relative widths, allowing a page to respond more dynamically to customer-imposed restrictions like larger font sizes.

Drawbacks to Liquid Layouts

• Liquid layouts allow for very little precise control over the width of the various elements of the page.

• They can result in columns of text that are either too wide to comfortably scan, or on smaller browsers too small for the words to show up clearly.

• Liquid layouts can have problems when a fixed width element, such as an image, is placed inside a liquid column. If the column is rendered without enough space for the image, some browsers will increase the column width, disregarding the designer's instructions, while other browsers will cause overlaps in text and images to achieve the correct percentages.