# 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