Provide a consistent page layout with clear and recognisable sections. Place important links and elements consistently
- Make it easy for your audience to predict where things are for each new page or section
- Note: The homepage can be different but it is a good idea to set the basic style [see 8a]
- Use the following common main page sections (unless there is a good reason not to):
- Header with clear logo (positioned on the left)
- Navigation bars [see 2a]
- Contents pane (clear and dominant)
- Footer
- Area for related links and information
- If available, use templates and defined layouts and conventions for your organisation
- If applicable see specific guidelines for Directgov, Business Link and NHS Choices
Devote as much page space as possible to content rather than navigational elements (sometimes called page chrome)
- When setting font size and column size, aim for between 12 and 15 words per line for quick and comfortable reading for most people
Optimise for 1024 width resolution
- Design for a width of around 960 pixels to ensure there will be no need for horizontal scrolling at 1024 pixels width resolution
- Ensure that essential information is visible and usable at a width of around 760 pixels. This is the visible width at a resolution of 800 pixels width
Notes and discussion points
Fixed layout versus fluid layout or somewhere in between?
1024 x 768 is currently the most popular screen resolution (in early 2009). Ideally pages should be fluid so they can still be fully viewable and usable at a resolution of 800 x 600 (and also larger resolutions) but this is not always possible or desirable. If you are using a fixed width you should try to ensure that important content is viewable at 800 x 600 without the need for constant horizontal scrolling
Your decision should be based on the contents of your site and knowledge about your audience (web analytics will show you the resolutions that your audience is using to view your site). For example, these guidelines contain many bullet points and fixed width images so we chose fixed width of 1024 to maintain side-by-side viewing and good line length for readability of the text. In addition, we know that the vast majority of the intended audience will be viewing at a resolution of 1024 x 768 or higher
CSS versus tables for layout
Ideally you should use CSS to control all layout and styling – this is standards compliant and the most flexible and accessible method
View references for basics of page layout