Page Layout Standards v1.1
Note
As of January 2008, if you are developing new websites you should be following the Visual Language Guidelines and the Barlesque implementation standard. This standard is only relevant to websites that are being maintained in Barley.
1. Introduction
This document is aimed at producers, designers, and coders who need to know how to design bbc.co.uk web pages.
Each bbc.co.uk page is made up from a number of different elements, whose design, size and inclusion on a page can be defined by the designer to give it a particular look and feel, whilst retaining enough common elements to enable users to feel like they are still in a bbc.co.uk website.
bbc.co.uk World Service sites may look different from these page patterns due to the needs of languages which do not read left to right, top to bottom.
2. The two design patterns: left-navigation or no left-navigation
Two are two main design patterns for bbc.co.uk pages, depending on whether or not they include a left-navigation (left-nav) region.
Example of a page with left-nav.
Example of a page without left-nav.
2.1 When you can use no left-nav
Although a standard page layout template with a left hand nav MAY be used, you MUST only use the page layout template with no left hand navigation, when the primary purpose of such a page is one of navigation.
3. Elements of a bbc.co.uk page
The page layout structure is composed of a number of distinct regions.
Regions of a bbc.co.uk page.
3.1 Toolbar
The toolbar region at the top of the page provides global site navigation.
It can be stretchy or set to a given page width:
- If the stretchy option is chosen, the grey bar will stretch to the full width of the user's browser window.
Example of a stretchy page.
- If the non-stretchy option is chosen, the right edge of the search tab should align with the right edge of the main content area.
Example of a non-stretchy page.
Search
The colour of the search tab may be specified to complement the overall page design for a site.
3.2 Banner
The banner region below the toolbar provides branding or identification for the site section.
The banner can be a height of between 40 and 100 pixels. Its width will be governed by the gutter and main content settings. This space can incorporate either a simple image or an HTML table structure.
Example of a 60 pixel high banner
Example of an 83 pixel high banner
Top left area (date)
The top left area of the LHN template provides a site-wide date reference, a link to Accessibility Help website and a link to dynamically produced text-only version of the page.
The only allowable exception to this is the News site (bbc.co.uk/news) which displays the time and date under the banner at the top on the contents region.
When using the page template that includes a left hand nav, the links in the top left area will look like this:
Example of a top left area on page with left-nav
- NB. If you're using the bbc.co.uk Barley Page Templating tool to implement your pages, you cannot include a graphic background for the top left area.
When using the page template without a left hand nav there is more flexibility in placing these links but you SHOULD place these near the top left of the page to assist accessibility.
Example of a top left area on page with no left-nav.
When using the template with no left hand nav, site producers MUST take responsibility to implement global changes to the links, within 5 working days, whenever these are rolled out across bbc.co.uk because they cannot be updated centrally.
3.3 Left-navigation
The left-navigation (left-nav) provides global and local navigation, and is an opt-in element (see section 2.1).
If this element is required, its width MUST be specified as a fixed width of 110, 125 or 140 pixels.
This area comprises of 3 sections: the crumb trail (incl. the BBC Homepage link, for all sites except radio sites); the local navigation area; and the services navigation.
Crumb
The crumb trail element provides the site's current location within the bbc.co.uk site hierarchy.
Local
The local navigation element provides links for the current level within the site hierarchy.
The local navigation element SHOULD include only text links. Where there is sufficient editorial justification, graphic local navigation MAY alternatively be used to provide image links.
Examples of local navigation using (from left to right) text, graphic file and graphic links
Services
The services navigation element provides standard site-wide links. These include 'Contact us' and 'Like this page, send to a friend'. On no LHN pages, the services nav is not part of the template. The services navigation links MUST therefore be included and maintained by the site owner.
The News site (bbc.oc.uk/news) does not have services area. The usual contents of this area are found in the footer area on news pages (see the example shown in section 3.6). This is the only allowable exception to this standard.
3.4 Gutter
Usually, a 10 pixel wide gutter separates the navigation and content regions.
Unless you opt-out, all pages inherit a 10-pixel gutter by default. The gutter is part of the sum of the whole width of the page. If the opt-out is chosen, the overall page width will be 10 pixels narrower and the template will adjust the toolbar width automatically (e.g. a 770 wide page becomes 760 wide).
Example of page with no gutter
Example of page with gutter
3.5 Content
The content region contains the main content of the page.
It is normally left aligned to the navigation region, but may be set to align centrally within the remaining browser window.
The content region MUST be specified as:
- a fixed width of 480, 620, 635, 650 pixels, or
- a flexible width to fill 100% of the remaining browser window.
The valid combinations of left-nav width and content region width are:
| Left-Navigation region width | Content region width |
|---|---|
| 110 | 480, 650 or 100% |
| 125 | 635 or 100% |
| 140 | 620 or 100% |
If you opt for a content width of 100% you MUST ensure that the page scales down to fit within a 770 width (for good display on 800x600 resolutions).
Examples of content width options
3.6 Footer
The footer provides links to 'About the BBC', 'Help', 'Terms of use' and 'Privacy & cookies policy'. These are mandatory and MUST be clearly visible on every page.
Example of footer
The news pages are the exception to this – their services content appears in the footer area.
Example of the footer on News
4. Triggers for updates of this standard
Still to discuss (for future versions):
- Use of contextual nav in the left-nav [as used in
/lifestyle] - Defining the services nav
- Standard position of services nav links on portal pages
5. Document history
| Date | Version | Change | Author |
|---|---|---|---|
| 31/07/2006 | v1.1 | Revised to extend use of no left-hand nav template and updated graphics. Amended 2.1, 3.2, 3.3 and 3.6 as agreed by Design Forum on 28/7/06. | Adam Powers/Tred Magill |
| 25/03/2005 | v1.00 | Renumbered as v1.00 on final approval from Standards Exec | Jonathan Hassell |
| 18/02/2005 | v0.13 | Updates done live in Design Forum 18/02/2005 (still couple more updates required for approval) | Jonathan Hassell |
| 17/02/2005 | v0.12 | Bringing in loads of example screenshots from old tutorial doc | Jonathan Hassell |
| 12/01/2005 | v0.11 | Continuing to get this doc in order | Jonathan Hassell, Nick Holmes |
| 20/09/2004 | v0.1 | New document created in Barley meeting on 20/09/1004; includes v0.2 of left-nav Portal Standard [discussed at Design Forum 22/10/2003 ] | Jonathan Hassell, Nick Holmes |
Document editor: Editor, Standards & Guidelines. If you have any comments, questions or requests relating to this document, please contact the Editor, Standards & Guidelines.
Like all other Future Media Standards & Guidelines, this page is updated on a regular basis, through the process described on About Standards & Guidelines.
© MMIX