DEV 1.7 Create flexible width design if possible and appropriate
NDA checkpoints: 2.5, 2.6, 2.27 (P2)
Recommendations
A fluid rather than a fixed width design permits increased flexibility for changing aspects such as text size, line spacing, length of lines of text, etc.
The above can all assist with ease of reading for some people. They can choose which visual representation will best meet their needs.
In addition, a fluid design has inherent flexibility that can help avoid horizontal scrolling, even for the thin widths that some people choose to browse at.
- If possible and appropriate, design with flexible width:
- It is not appropriate in all cases (i.e. these guidance pages - see below).
- Test the design at a range of resolutions:
- Optimise the design for 800x600 and 1024x768 resolution but try to make sure it works reasonably at different widths too.
Why aren't these guidance pages flexible width?
Because of the default design of these pages - text on the left panel (largely in short 'bullet' points or short sentences) with related examples (mostly images) on the right - it was decided that the most appropriate design would be a fixed width of 724 pixels.
With this design, sentences are generally presented in sufficient horizontal space for pleasant reading (roughly 7 words per line) and the images maintain close visual association with the text.
Flexible width design was tried but it did not work as successfully for this site as fixed width - for instance:
- on some pages, the example images could appear very remote from the associated text - poor for screen magnification users;
- on others, there were long, single line paragraphs - which prove more difficult to read.
For sites with largely text based content (e.g. most government sites) it is usually more appropriate to have fluid width, whereas for sites (like this one) make frequent use of graphics, it can be more appropriate to fix the width.
Examples
