Web standards and guidelines

Standard page layouts

Why we use standard page layouts to build web pages

We use three standard page layouts across the LTS Online Service. This is so that our website pages are consistent, recognised as belonging to LTS, and easily developed by our content, design and technical teams.

The three main styles of page layout used by LTS are:

  • three columns
  • two columns
  • a single column.

Three-column layout

The three-column layout is the default layout for LTS web pages. Whilst other layout styles are available, they should only be used if there is a genuine need to deviate from the three-column layout.

The LTS editorial style is to present the content to the user, and also to provide the user with related information or links. The three-column page layout is designed to allow you to use the first column for navigation, the second column for the main content, and the third (interactive) column for related information and links.

The three-column layout is used on index pages for each of the areas of the website and also for generic web pages found throughout LTS sites.

Graphic representation of 3 column LTS page

This is what the three-column layout looks like when overlaid on an LTS web page:

 

Graphic representation of 3-column page template laid on top of LTS web page

Two-column layout

In a two-column page layout, the interactive (right-hand) column is dispensed with. The first column is used for navigation and the second column is used for content.

Instances where it may be necessary to use a two-column layout include:

  • when you have a content-rich page, and dispensing with the interactive column on sub-index pages can allow more of the options in the main content area of the sub-index page to be seen
  • when pages are created using a ‘mini search’ (where content is automatically pulled onto a page based on metadata), and the third column is not used in order to allow more of the main content to be seen. An example of this would be the results of a search in a resource finder.
Graphic representation of 2 column LTS page

This is what the two-column layout looks like when overlaid on an LTS web page:

 

Graphic representation of 2-column page template laid on top of LTS web page

Single-column layout

This layout is most commonly used when you are creating a stand-alone resource which does not use the site navigation and takes up the whole screen, such as a Flash animation for use on a whiteboard. This page layout may be used only in exceptional circumstances, and its use should be agreed with the LTS web content team on a case-by-case basis.

As this layout does not include left-hand navigation, any resource using it should have clear internal navigation. In addition, it is essential that every page of content displayed in a single column layout includes an option to return to the web page the user was referred from. For example, if a user opens the resource from a page titled ‘Games’, the user should be able to navigate back to the ‘Games’ page from every page of the resource without using the browser’s ‘Back’ button.

Graphic representation of 1 column LTS page

This is what the one-column layout looks like when overlaid on an LTS web page:


Graphic representation of 1-column page template laid on top of LTS web page