On websites we have a browser window. Is the design supposed to fill in the browser window or should the width be set? This is one decision that web designers have been plagued by for hundreds, if not thousands of years — back in the days when we used tables for content on the web page.
Fixed Width
You probably work towards a fixed-width layout if you start your layout with the 1200px Grid System. Both definitions are bundled with a div, which is pixel-based (1200 pixels, for example), and placed in the body tag style=”margin: 0 auto;”. You will see a body section to the left and right of the container; and if it is narrower, you have a horizontal scrollbar. Fixed layouts are easier to design and maintain, since you build exactly what you design in Photoshop.
Pros:
- Give the designer more control over how the content looks like
- Allows for space expected
- Improves narrower text blocks readability
Cons:
- Can appear smaller in a large windows of the browser
- Removes the user control
Fluid Width
A fluid layout is designed to expand the container with percentage-based widths when the browser window is resized. These are more thoughtful in planning, because you must foresee problems that could occur at any width. The idea is to show the user the same degree of horizontal content that fits your screen. Sometimes, pixel width columns are mixed with proportion column into a fluid layout. Fluid layouts typically take advantage of CSS’s minimum width and maximum width characteristics to ensure the container is not narrowly or ridiculously wider.
Pros:
- Adapts to the majority of computers and devices
- Reduces scrolling of users
Cons:
- Difficult to read when text extends over a wide area
- More challenging to execute effectively
- Whitespace restricts or imposes
Responsive Layouts
It was said that there is an exception for every rule. It is also true in the world of the web, and designers have created many versions, combinations, and architectures for the dynamic and fixed-width and fluid-width layout structures. Recently, I saw articles listing up to ten different types of layout. However, most of these may be listed as fixed or dynamic for the purposes of this chapter. However, in a recent article A List Apart, a new layout type was introduced that I think we will see more of.
I highly recommend that you check the entire article instead of repeating it here. The idea is that, as the mobile market makes browser window widths increasingly irregular, it is increasingly important that our layouts be smooth and tailored to different widths. The technique uses some sophisticated fluid scaling and CSS3 media queries to adjust the layout entirely.