Main content and supporting information
A two-column page works well when the main subject needs plenty of room while related information remains visible alongside it.
The main content area is where visitors follow the subject from beginning to end. The second column can then provide useful supporting information, links, downloads or actions without interrupting that flow.
Tip: Give each column a clear job. Use the main area to explain and the second column to support.Start with the important information
Visitors should be able to understand the purpose of the page from its opening content.
A useful introduction often answers:
What is this?
Who is it for?
Why might it be useful?
What should I know first?
Once those questions are answered, you can provide more detailed information further down the page.
Make longer content easy to scan
Use descriptive headings to divide the main content into logical sections. Someone scanning the page should be able to understand its structure without reading every paragraph.
Explain
Introduce the subject clearly and provide the information visitors need.
Demonstrate
Use examples, images or media when showing something is more useful than describing it.
Guide
Make the next step obvious when the visitor has enough information to continue.
Use images to support the subject
Images can provide useful context within longer content. They might show a product, location, finished project, person, process or important detail.
Choose images that add something to the information around them rather than using photographs simply to break up the page.
Ask what an image tells the visitor that the surrounding text doesn't. That's usually a good test of whether it belongs on the page.Keep additional details accessible
Some information is useful but doesn't need to be visible all the time. An accordion can keep these details available without making the main content unnecessarily long.
Additional information
Use this area for useful detail that supports the main subject but doesn't need to interrupt the overall flow of the page.
Common questions
Answer questions visitors regularly ask before contacting, booking, visiting or buying.
What happens next?
Explain the next stage of the process so visitors know what to expect if they decide to continue.
Use the second column for supporting content
The secondary column works best for information that complements the main page rather than competing with it.
Good examples include:
Key facts or summary information
Contact details
Opening or availability information
Downloads
Useful links
Calls to action
Related navigation
Social links
More substantial information should usually remain in the main content area.
When this layout works well
Services
Explain the service in the main area while keeping contact information or an enquiry action nearby.
Guides
Keep the article easy to read while providing downloads and useful resources in the second column.
Information
Present detailed information while keeping important facts or navigation within easy reach.
Don't make the columns compete
If both columns contain long, unrelated pieces of content, visitors may be unsure which one they're supposed to follow.
The main column should remain the natural reading path. Keep the secondary content shorter, more scannable and useful alongside it.
A simple rule
Main content explains. Supporting content helps.
Use the main area for the story of the page and the second column for the things visitors may need while they're reading it.
