# Screen sizes

We design for a variety of screen sizes across mobile, tablet and desktop.

# Mobile first

The majority of our website traffic comes from mobile, so we design our experiences in a mobile-first approach. Designing in this way allows us to prioritise the mobile experience to ensure we're meeting the needs of our mobile users.

This approach forces the designer to really focus on what the most important features are in the interface. It helps us consider what the customer needs, removing a lot of the noise and clutter that can be found on desktop designs.

Mobile first doesn't mean "mobile only" - we design for mobile first and gradually work up to larger screen sizes. This ensures our customers have a consistent experience regardless of the device they're using.

# Designing for speed

When designing, it's important to be considerate of page load time. Certain elements, such as videos, may have an impact on page performance, causing friction for the users. Page performance is one of the factors that search engines consider when indexing webpages. It's important for SEO purposes to ensure load time is optimised.

Delivering an optimal load speed is crucial to ensure users can complete their tasks quickly. Images are optimised, text sizes are considered and the number of elements on a page is kept to a minimum to achieve this.

# Screen sizes and platforms

When designing, our standard screen size is 375px wide as this is the most common screen size for our web traffic. Additionally, we also design for smaller (320px. 360px) and larger (414px) mobile screens to ensure the designs work on these devices. On smaller screen sizes, special considerations need to be made such as text wrapping to ensure the page doesn't break.

Breakpoint (px)	Columns	Margin / Gutter-X / Gutter-Y
320	8	16 / 16 / 24
* 360	8
375	8
414	8
768	12
1024	12
1366	16
1920	16

In responsive design, breakpoints denote the pixel value at which the website's content will adapt in a certain way to deliver the best experience. Think of the difference between viewing a webpage on a mobile vs. on a tablet. Our breakpoint values are 768, 1024 and 1366px.

Different screen sizes require different layout grids, which are used by designers as a guide to position content such as text and images on the page. Layout grids can consist of 8, 12 or 16 columns, depending on the screen size. Margins and gutters remain the same at all screen sizes. Breakpoints are responsible for setting the number of columns, margins and gutter space. See layouts for more information about column grids.