Layout and structure

Our web pages are built on a flexible grid with multiple layout options. This adapts depending on the device the website is being viewed from.

Grid sizes

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.

Break points

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:

Grid group Width Margins Gutters
Group 1 (desktop) 1101px+ 40px 60px
Group 2 (tablet landscape) 901px - 1100px 40px 40px
Group 3 (tablet portrait) 601px - 900px 20px 30px
Group 4 (mobile) 0px - 600px 20px 30px

Page structure

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: HeaderBody headerBody contentBody 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).

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.

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

Layout and hierarchy

Component assignment

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

Need a little extra help?

Contact Us
Back to top