Split screen

Two halves sit side by side, one making a bold statement and the other giving the detail, so the reader gets the point and the proof together.

Copy the idea

See it live

A labelled wireframe of the pattern, made for this explorer. Switch the width to watch its regions reflow from phone to desktop.

Copy the idea

Take the pattern with you as a brief for a person or as instructions for an AI assistant: its regions, how it reflows and the rules for using it.

# Split screen — layout recipe

## The idea

- Two halves sit side by side, one making a bold statement and the other giving the detail, so the reader gets the point and the proof together.

## Use it for

- Sign-up and welcome pages
- A single product or event introduced on one screen
- Before and after or this and that comparisons

## Avoid it when

- The content is long enough to need many sections
- Both halves would hold the same weight of text

## Regions

- Statement — Carries the one big claim or picture the page is built around.
- Detail — Explains the statement and holds the action the reader should take.
- Footer — Spans both halves with small print and links beneath them.

## How it reflows

- Phone: The statement sits on top and the detail follows below it, each the full width of the screen. (1 column)
- Tablet: The statement and the detail sit side by side in two equal halves. (2 columns)
- Desktop: The two halves stay side by side and grow taller, the statement filling its half edge to edge. (2 columns)

## Principles

- Give each half one job: one says, the other explains
- Keep the action in the detail half, close to the explanation
- On a phone, put the statement first so the point lands before the detail
- Let the footer run under both halves, not inside one

Lay out the page with the "Split screen" pattern.

The idea: Two halves sit side by side, one making a bold statement and the other giving the detail, so the reader gets the point and the proof together.

It suits:
- Sign-up and welcome pages
- A single product or event introduced on one screen
- Before and after or this and that comparisons
It is a poor fit when:
- The content is long enough to need many sections
- Both halves would hold the same weight of text

Build the page from these regions:
- Statement: Carries the one big claim or picture the page is built around.
- Detail: Explains the statement and holds the action the reader should take.
- Footer: Spans both halves with small print and links beneath them.

Reflow it at each width:
- Phone: The statement sits on top and the detail follows below it, each the full width of the screen. (1 column)
- Tablet: The statement and the detail sit side by side in two equal halves. (2 columns)
- Desktop: The two halves stay side by side and grow taller, the statement filling its half edge to edge. (2 columns)

Follow these principles:
- Give each half one job: one says, the other explains
- Keep the action in the detail half, close to the explanation
- On a phone, put the statement first so the point lands before the detail
- Let the footer run under both halves, not inside one

Apply the idea and the rules above; do not copy any existing website.

Download brief (.md)

Regions

The parts of the page and the job each one does.

Statement: Carries the one big claim or picture the page is built around.
Detail: Explains the statement and holds the action the reader should take.
Footer: Spans both halves with small print and links beneath them.

How it reflows

Phone 390 · 1 column: The statement sits on top and the detail follows below it, each the full width of the screen.
Tablet 768 · 2 columns: The statement and the detail sit side by side in two equal halves.
Desktop 1440 · 2 columns: The two halves stay side by side and grow taller, the statement filling its half edge to edge.

Where it fits

Use it for

Sign-up and welcome pages
A single product or event introduced on one screen
Before and after or this and that comparisons

Avoid it when

The content is long enough to need many sections
Both halves would hold the same weight of text

Principles

The rules that keep the pattern working at every width.

Give each half one job: one says, the other explains
Keep the action in the detail half, close to the explanation
On a phone, put the statement first so the point lands before the detail
Let the footer run under both halves, not inside one