A fixed-width Composr site with a solid colour background

(Click to enlarge)

Fixed-width is available as a theme option in Composr, and is off by default. This tutorial explains the implementation and pros & cons of it.

Traditionally a topic of regular disagreement in web design is whether 'fixed-width' designs or 'fluid' designs are better. A fixed-width design is one where the horizontal width of the website is fixed, so that it doesn't change when different resolutions are selected.

Proponents of fixed-width argue:

• that fluid designs (non fixed-width designs) can not function well, because things will always break down when the width significantly exceeds what was tested
• that fixed-width designs are easier to implement
• that fixed-width designs are easier to read from
• that fixed-width designs are more attractive, because it allows more artistic control

A fluid-width Composr site with a relatively thin browser window. Composr's default theme defines a minimum width of 1024, hence the scrollbar.

(Click to enlarge)

A fluid-width Composr site with a relatively wide browser window stretching the layout

(Click to enlarge)

Opponents of fixed-width argue:

• that fixed-width designs make unreasonable assumptions about how websites should be viewed; for example, mobile devices would fail to have enough width for a typical fixed-width design yet are prevented from automatically performing adjustments
• that people with large resolutions can always make their browser window smaller
• that using fixed-width is done by those that are applying traditional design skills to the new online medium without adjusting them properly for that medium

A fixed-width Composr site with a pattern background.

(Click to enlarge)

A fixed-width Composr site with a fixed background.

(Click to enlarge)

There are a few options available for the background when using a fixed-width layout:

• The solid colour background uses a solid, slightly-seeded colour.
• The pattern background uses the backgrounds/outer_background theme image; if the image is smaller than the browser window, then it repeats in a pattern.
• The fixed background uses the backgrounds/outer_background theme image. The image does not scroll even when the page is scrolled.
• The scrolled background uses the backgrounds/outer_background theme image and will scroll when the visitor scrolls the page.