Make the most of the space

Combine strong content with simple, purposeful layouts.

A flexible layout for important pages

A full-width content area gives you plenty of freedom to organise a page around its purpose.

That doesn't mean every part of the page needs to stretch from edge to edge. Sections, containers, grids and split layouts can be combined to control the width and presentation of individual parts.

Tip: Think in sections. Give each part of the page one clear purpose and let the layout support the information within it.

Start with a clear introduction

The beginning of a page should quickly answer the visitor's most important questions:

Where am I?
What is this about?
Is it relevant to me?
What should I do next?

A heading, short introduction and clear next step are often enough.

Example call to action

Break important information into sections

A grid can turn several related points into information that's easy to scan.

Explain what you offer

Give visitors a clear description of the product, service or information available on the page.

Avoid making them work out what you do from vague marketing language.

Show why it matters

Focus on useful benefits and outcomes rather than simply listing features.

Help visitors understand why the information is relevant to them.

Make the next step clear

Decide what you want someone to do after reading the page and make that action easy to find.

Combine words and images

Split layouts are useful when visual content and written information support one another.

Let the image add information

Use photographs and other media to show something that's difficult to communicate as effectively with words alone.

A useful image might show:

A product in use
A finished piece of work
A location or environment
A person or team
An important detail
The result of a service

If the image is mainly decorative, don't allow it to compete with more important information.

Give important sections room to breathe

A full-width section can create a clear change of pace within a longer page.

The background separates this content from the sections around it, while the container keeps the text itself at a comfortable reading width.

Keep it focused

Each section should communicate one main idea.

Keep it consistent

Use the same visual patterns for similar types of information.

Keep it useful

Choose components because they improve the content, not simply because they're available.

Add detail without making the page difficult to scan

Accordions are useful when supporting information should be available without dominating the main page.

What information should I include?

Include the information a visitor needs to understand the subject and decide what to do next. Common examples include features, benefits, practical details, pricing guidance, delivery information or answers to common questions.

How long should a page be?

There isn't an ideal length. A page should be long enough to answer the questions that matter and no longer than necessary. Break detailed pages into clear sections so visitors can scan them easily.

Should every section use a different layout?

No. Repeating a small number of layouts can make a page feel more consistent. Introduce variation where it helps communicate a different type of information.

Help visitors continue

A page doesn't necessarily need to end when the main subject has been explained. You can use existing content to help visitors explore related areas of the website.