# 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