Short answer: A good website layout puts the most important content where people look first and keeps text in a column narrow enough to read. NN/g’s eyetracking shows people scan in patterns such as an F or a layer cake. web.dev recommends letting the content decide when the layout changes.
How people scan a page
In NN/g’s eyetracking studies, people often scan in the shape of an F: many fixations at the top and the left side of the content, and more on the first words of each line. It is rarely a perfect F, and it appears on both desktop and mobile.
NN/g calls the F-pattern negative for users and businesses, and says good design can prevent it. It also describes other patterns. In the layer-cake pattern, people fix on headings and subheadings, which is by far the most effective way to scan apart from reading almost every word.
In the spotted pattern, people skip big chunks of text looking for something specific, such as a link or a number. In the commitment pattern, they read almost every word, which usually leads to the best comprehension.
Common layouts and where they fit
Most pages use one of three layouts:
| Layout | Good for | On a phone |
|---|---|---|
| One column | Long reading and step-by-step content | Stays one column |
| Text with a sidebar | Long pages with a list of sections or related links | The sidebar moves above or below the text |
| Grid of cards | Choosing between several items, such as services or articles | Fewer cards per row, often one |
Our summary; the phone column follows web.dev’s responsive design basics, read November 5, 2026.
Make the text easy to scan
NN/g suggests including the most important points in the first two paragraphs, and starting headings and subheadings with the words that carry the most information. It also suggests grouping small amounts of related content visually, and using bullets and numbers for lists and processes.
Keep text columns readable: web.dev puts the ideal at 70 to 80 characters per line, citing classic readability theory. Our line spacing guide covers the space between those lines.
Let the content decide where it changes
web.dev’s rule is to let the content decide where the layout changes, and to keep pages from scrolling sideways, since people expect to scroll vertically. Our guides on responsive web design and WCAG reflow cover how.
How to plan a page layout
- Write down what the page has to do, and put the most important point in the first two paragraphs.
- Start each heading with the words that carry the most information.
- Pick the layout for the content: one column for reading, a sidebar for long pages, a grid for choices.
- Keep text columns to about 70 to 80 characters per line on large screens.
- Plan the phone version first, then change the layout only where the content needs it.
- Check that nothing scrolls sideways and that images fit the screen.
- Look at the page the way a scanner would: headings, bold words and lists should carry the message.
How our own guides are laid out
On November 5, 2026, we measured one of our own guides, the one on Google Ads manager accounts, in English and Spanish.
On a 1,440 px screen, the text runs in a column 640 px wide. The Chapters list sits in a 280 px column to its left, both starting at the same height. The lines average about 64 characters in English and 66 in Spanish, a little under the 70 to 80 that web.dev cites.
On a 390 px phone, the Chapters list moves above the text, and both take the screen’s width minus 20 px on each side. The lines drop to about 38 characters in English and 39 in Spanish, and nothing scrolls sideways.
Before you publish a page
- The most important point is in the first two paragraphs.
- Headings start with the words that carry the most information.
- Lists and steps use bullets or numbers.
- Text lines stay around 70 to 80 characters at most on large screens.
- Nothing scrolls sideways on a phone.
- Breakpoints follow the content, not device names.
RememberPeople scan before they read. Put the message where their eyes land first, and keep text columns narrow enough to read.
Our web design service plans and builds pages like these. Write to us through the form or on WhatsApp. For the first screen of a homepage, see our homepage guide.
Quick answers about website layout
What is the F-pattern on a website?
A way of scanning NN/g found in eyetracking: many fixations at the top and the left side of the content, and more on the first words of each line. It is rarely a perfect F, and NN/g calls it negative for users and businesses.
What is the best layout for a website?
A long read works in one column, a long page with sections can add a sidebar, and a set of choices fits a grid. On a phone, most of them become one column.
How long should a line of text be?
web.dev puts the ideal at 70 to 80 characters per line, citing classic readability theory. Lines get shorter on a phone; on our own guides they drop to about 38 characters.
What is the layer-cake pattern?
A way of scanning NN/g found where people look mostly at headings and subheadings, like stripes in a layer cake. NN/g calls it by far the most effective way to scan a page, apart from reading almost every word.
Do people scan differently on phones?
NN/g found the F-pattern on both desktop and mobile. It also saw marking, where the eyes stay in one place while the page scrolls, more on mobile than on desktop.
Sources
Read on November 5, 2026. Nielsen Norman Group: F-Shaped Pattern of Reading: Misunderstood, But Still Relevant and Text Scanning Patterns: Eyetracking Evidence. web.dev: Responsive web design basics. Our case: one of our own guides, measured on November 5, 2026.