Layout

The layout is currently based on only three columns, giving us a total of six variations.

This restricts the possible page layouts so that it doesn’t allow for too many variations in order to create consistency across different pages, regardless of the user’s viewport size. The layout must prioritise a comfortable reading experience.

We offer two types of pages: (1) with a side navigation on the left, or (2) without. If we find that these choices are too restrictive, we can easily update it (e.g. use six columns instead of three).

All content (text, images) must be left-aligned (no justified or centred text).

No sidebar

Without a sidebar allows for four different types of content blocks using thirds or two-thirds of the page.

To avoid long lines of text in large and medium screens, full-width content will not be allowed.

With sidebar

With a sidebar allows for two different types of content blocks using full-width (two-thirds) and halves (thirds) of the remaining space.

The sidebar area (in red) should be mainly used for in-page navigation. It takes up the whole width of the page on smaller viewports (e.g. mobile devices). Examples of uses of the sidebar include:

• a list of filters for the search tool;
• a table of contents for an information page that has many sections, like the FAQs;
• some sort of promotion space (upcoming events, partnerships);
• a Twitter or news feed.

This layout is meant to encourage the use of white space and to allow for the text and images to breathe.