Fixed Versus Fluid
Most users may have their screen resolution set to 800 x 600 but as graphic cards and monitors become more advanced and cheaper the average resolution increases. This means that it is necessary to cater for users running their desktop at higher resolutions. There are two main ways a website can be constructed with regard available screen resolution: fixed and fluid. Each method has advantages and disadvantages.
Fixed
The layout is fixed to the centre or one side of the screen and the remaining space is filled with a colour, gradient or pattern.
Example of a site with a fixed left layout.
Advantages:
- Easier to design and code.
- Great degree of control over the final design.
- Rendered consistently across all resolutions, browsers and platforms.
Disadvantages:
- On monitors with very high resolutions a lot of dead space is produced.
- Increasing font size through operating system or browser settings can break layout.
Fluid:
The layout expands to fill all available space.
Example of a site with a fluid layout.
Advantages:
- Dead space is eliminated as the design fills out the entire available area.
- Increased font sizes work well at high resolutions.
Disadvantages:
- Harder to design and code as thought has to be given to how elements will stretch to fill space.
- Studies have proven that text is harder to read in long lines rather than narrow columns.
With each type of design a bit of thought has to be given to how the dead space or the elements that stretch will be styled.
For fixed designs, the designer must consider how to fill the dead space. This can be done using solid colour, a pattern or a gradient (as in the fixed example above). For fluid designs, the elements that stretch need to to be catered for. In the fluid example above the header is such an element: the main part is filled with solid colour and the background image is set to the edge of the screen.