Alternating rows

Rows of text and picture swap sides as the page goes down, so a long page keeps a gentle rhythm and each point gets its own moment.

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.

# Alternating rows — layout recipe

## The idea

- Rows of text and picture swap sides as the page goes down, so a long page keeps a gentle rhythm and each point gets its own moment.

## Use it for

- Feature tours and how-it-works pages
- Step-by-step stories
- About pages with a few chapters

## Avoid it when

- There are more than five or six points to make
- There are no real pictures to pair with the text

## Regions

- Header — Opens the page with its title and a short promise of what follows.
- Text — Makes one point per row in a heading and a short paragraph.
- Picture — Shows the point the text beside it makes.
- Footer — Ends the run of rows with the next step and small print.

## How it reflows

- Phone: Each row becomes a picture above its text, every row in the same order, all in one column. (1 column)
- Tablet: Text and picture sit side by side, swapping sides from one row to the next. (2 columns)
- Desktop: The rows stay two across and swapping, with more space between rows. (2 columns)

## Principles

- Make one point per row and no more
- Swap sides every row so the eye zigzags down the page
- On a phone, keep the same order in every row rather than swapping
- Keep three to five rows before changing the pattern

Lay out the page with the "Alternating rows" pattern.

The idea: Rows of text and picture swap sides as the page goes down, so a long page keeps a gentle rhythm and each point gets its own moment.

It suits:
- Feature tours and how-it-works pages
- Step-by-step stories
- About pages with a few chapters
It is a poor fit when:
- There are more than five or six points to make
- There are no real pictures to pair with the text

Build the page from these regions:
- Header: Opens the page with its title and a short promise of what follows.
- Text: Makes one point per row in a heading and a short paragraph.
- Picture: Shows the point the text beside it makes.
- Footer: Ends the run of rows with the next step and small print.

Reflow it at each width:
- Phone: Each row becomes a picture above its text, every row in the same order, all in one column. (1 column)
- Tablet: Text and picture sit side by side, swapping sides from one row to the next. (2 columns)
- Desktop: The rows stay two across and swapping, with more space between rows. (2 columns)

Follow these principles:
- Make one point per row and no more
- Swap sides every row so the eye zigzags down the page
- On a phone, keep the same order in every row rather than swapping
- Keep three to five rows before changing the pattern

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.

Header: Opens the page with its title and a short promise of what follows.
Text: Makes one point per row in a heading and a short paragraph.
Picture: Shows the point the text beside it makes.
Footer: Ends the run of rows with the next step and small print.

How it reflows

Phone 390 · 1 column: Each row becomes a picture above its text, every row in the same order, all in one column.
Tablet 768 · 2 columns: Text and picture sit side by side, swapping sides from one row to the next.
Desktop 1440 · 2 columns: The rows stay two across and swapping, with more space between rows.

Where it fits

Use it for

Feature tours and how-it-works pages
Step-by-step stories
About pages with a few chapters

Avoid it when

There are more than five or six points to make
There are no real pictures to pair with the text

Principles

The rules that keep the pattern working at every width.

Make one point per row and no more
Swap sides every row so the eye zigzags down the page
On a phone, keep the same order in every row rather than swapping
Keep three to five rows before changing the pattern