Dreamweaver Workbook: Fixed Layout

Fixed Layout

A fixed website layout has a wrapper that is a fixed width, and the components inside it have either percentage widths or fixed widths. The important thing is that the container (wrapper) element is set to not move. No matter what screen resolution the visitor has, he or she will see the same width as other visitors.

A 960-pixel width has become the standard in modern Web design because most website users are assumed to browse in 1024×768 resolution or higher.

Many designers prefer fixed layouts to fluid ones because they’re easier to make and provide more assurance that what the designer sees, the user sees. However, the pros and cons come out even with fluid-layout design.

Pros

Fixed-width layouts are much easier to use and easier to customize in terms of design.
Widths are the same for every browser, so there is less hassle with images, forms, video and other content that are fixed-width.
There is no need for min-width or max-width, which isn’t supported by every browser anyway.
Even if a website is designed to be compatible with the smallest screen resolution, 800×600, the content will still be wide enough at a larger resolution to be easily legible.

Cons

A fixed-width layout may create excessive white space for users with larger screen resolutions, thus upsetting “divine proportion,” the “Rule of Thirds,” overall balance and other design principles.
Smaller screen resolutions may require a horizontal scroll bar, depending the fixed layout’s width.
Seamless textures, patterns and image continuation are needed to accommodate those with larger resolutions.

If you've decided on a fixed page design, you should know these few tricks to get around the cons of this layout and create a successful design.

All this being said, most designers choose a fixed width of 960 pixels.
A layout 960 pixels wide looks good for users with a 1024×768 resolution or above, with a bit of room for margins.

Always Center the Layout

When working with a fixed width design, be sure to at least center the wrapper div to maintain a sense of balance. Otherwise, for users with large screen resolutions, the entire layout will be tucked away in the corner.

Choosing between a fixed and fluid website will depend a lot on the type of website itself. Weigh the pros and cons above to determine the right solution for your website.

A portfolio website would probably be best shown in a fixed-width layout, so that you have more control over the design. Not only will you be able to better control the layout of individual elements in the design, but the images in your portfolio showcase will be better handled with a fixed width. Many designers, not just those with portfolios, may prefer fixed-width layouts for the ease of use and assurance it gives them.