COI Toolkit Beta


1a Basic layout of page templates  
Home / index
1c Basic design/styling dos and don’ts


1
Page Layout

The basics of how to design and structure clear and effective page templates, and how to design the way your content appears within those templates so that it will be easy to read and act upon

Test:Page Layout: test yourself!

1b Layout of contents in a page


Position the most important content at the top of the page so it is visible without vertical scrolling

  • For content this will often be in a middle of the page in a clearly recognisable ‘contents pane’

Use a clear page title and clear sub-headings to visually group sections and give contents a natural hierarchy Group related items together to create pages that look uncluttered and that have clear sections and subsections

  • Use white space liberally between items
  • Place related items closer to each other than unrelated items
  • Use different colours, backgrounds and borders to group related items together
    • ...but don’t overdo it otherwise it can look busy and cluttered
  • Use bullet points and numbered lists to create clear visual groupings

Use a single column contents pane for text documents and forms to create a clear reading path. This also avoids the need for upwards and downwards scrolling that a multi-column layout might require

  • Exceptions to this include: site maps, indexes, major landing or category pages, which all can work well in multi-column formats

Additional considerations:

Avoid ‘scroll stoppers’ – items of content that can make people think the page has ended when in fact there is still more content below that could be reached by scrolling down:

  • Often caused by content boxes or images which end neatly at the bottom of the browser window and so make the page look complete
  • To avoid scroll stoppers:
    • Design pages so that items that would be just below the bottom of the browser window peep just above it and so indicate that there is more valuable content below
    • Be careful with large vertical blocks of white space in the contents
    • Test it with people: You should test designs to make sure they do not cause scroll stopping (particularly at 1024 x 768 resolution using popular browsers)

Notes and discussion points

What if I just provide copy into a template or a Content Management System (CMS)?
Hopefully your page templates should be set up so that they can style and layout content according to the above basic guidance (if not this should be fixed). It is important that you use the appropriate template markup (these are bits of code that tell the web browser how to style different content such as headings, sub-headings and lists). Different systems have different ways of applying markup and you should seek advice on how to add content to your templates in the correct way. You should avoid applying your own visual styling (some content management systems let you do this) rather than using the built in template styles as this will lead to inconsistencies, make it difficult to apply changes and it removes intended meaning (semantic coding) that some of the styles may be intended to convey.

View references for this page
 
Cluttered difficult to read text converted into well structured and easy to read text using a clear title and sub-titles, a background to highlight the summary, bullet points and good spacing. Illustration of scroll stopping. None of the contents in the visible part of the page extend through the bottom of the browser. This makes it look like the page has finished even though there is more content below. Snapshot of how this guidance page looks with just the browser default styles (CSS styles removed). Because it has been structured using the appropriate template markup (HTML elements) it is still visually well structured (and maintains semantic meaning too).

© Crown Copyright 2004-2010