Layout and structure

All of the website components fit within a flexible grid system that primarily operates across 4 columns of equal width. The maximum width of pages is capped at 1360px to help with image optimisation and page load speeds.

There are 4 groups for break points to cover off a wide range of devices that users may be viewing the website on. This helps to establish a basic set of rules for how layouts and components adapt at different screen sizes. The groups are divided as follows:

Every page utilises the same structural hierarchy to provide consistency across the whole of the RNLI's web-based content. There are 5 main elements that make up a page: Header, Body header, Body content, Body footer, and Footer as illustrated below.

This contains navigation components to help users find their way around the site. The header is more heavily restricted than the 'Body' elements as it is carried across mutliple pages.

Body header
This typically contains the introductory information on the page to give users an understanding of what's on offer. The body header can be used to promote a specific piece of information together with a call to action (CTA).

Body
This has a number of different layout options available to cater for a variety of content requirements and experiences. This is where the bulk of content is displayed and offers the most amount of design flexibility with a large number of components available for use. Body contains 4 different layout options with specific components available for use across a main 'Content' panel and a 'Side content' panel.

Body footer
This typically contains useful components like Signposts to help users choose where to go next.

Footer
This typically contains the RNLI's standard footer and is more heavily restricted than the 'Body' elements as it is carried across mutliple pages.

The following lists show which components can be assigned to each page element.