The parts of a page

The strip across the top holding the site name and the main links.

Use it for

Any site with more than one page or more than three sections.

Wrong for

A single announcement page, where it only adds clutter.

Say Put a top menu with the name on the left and links to [sections] on the right.

The first screen. Usually one large claim and one action.

Use it for

Telling a first-time visitor what this is within three seconds.

Wrong for

A portfolio or catalog, where visitors came for the list and a hero just pushes it down.

Say Open with a statement of what we do and who for — not a centered headline with two buttons.

Text on one side, an image or form on the other.

Use it for

When one photograph does as much persuading as the words.

Wrong for

Narrow screens, where it stacks anyway — check it still reads when it does.

Say Make the opening a split layout: the claim on the left, the photograph on the right.

A thin colored line above everything, for one temporary message.

Use it for

A closure, a deadline, a one-off event.

Wrong for

Anything permanent. If it is always true it belongs on the page.

Say Add a dismissible notice strip at the very top saying [message].

A bordered box grouping a title, some text and sometimes an image.

Use it for

Things that are genuinely separate and comparable — products, articles, people.

Wrong for

Three features with an icon each. That layout is the most over-used on the web; a list or a table usually reads better.

Say Show these as cards with an image, a title and one line each.

Full-width bands where the image swaps side each time.

Use it for

Explaining three or four things properly, with room for a real sentence each.

Wrong for

More than about five items — it becomes a very long page.

Say Explain each one as a full-width row, alternating which side the image sits on.

Rows and columns with aligned values.

Use it for

Prices, specifications, opening hours, anything being compared. Underrated.

Wrong for

Narrow screens with many columns — say how it should behave when it stacks.

Say Lay the prices out as a table with the numbers aligned, not as pricing cards.

Pairs — a term on the left, its value on the right.

Use it for

Specifications, credentials, facts. Dense and scannable.

Wrong for

Anything needing more than a short phrase as the value.

Say Show the specifications as a label-and-value list, not as paragraphs.

Several images together.

Use it for

Work, places, products — anything visual.

Wrong for

A grid of identical squares, which flattens everything. Ask for varied sizes.

Say Add a photo set with varied sizes — one large image and several smaller, not equal squares.

A numbered sequence in order.

Use it for

How something works, what happens after enquiring, a history.

Wrong for

Things with no real order — that is just a list.

Say Show how it works as numbered steps: [step, step, step].

Two to four large numbers with short labels.

Use it for

Real, verifiable figures — years in business, projects finished.

Wrong for

Anything you would have to invent. A made-up statistic is worse than none.

Say Add a row of key figures: [number — what it means, repeated]. Only real numbers.

Headings that open to reveal their content when clicked.

Use it for

Questions and answers, where most visitors want one of many.

Wrong for

Content people need. Hidden text is not read, and does not help you be found.

Say Put the questions in expanding sections, with the first one already open.

Several panels sharing one space, one visible at a time.

Use it for

Alternatives to the same thing — monthly versus yearly, by category.

Wrong for

Sequential content. People will not find tab three.

Say Use tabs to switch between [option] and [option].

A panel over the page that blocks everything behind it.

Use it for

Confirming something, or viewing one image large.

Wrong for

Anything unprompted. A pop-up on arrival is the most disliked pattern on the web.

Say Open each photograph in a pop-up panel when clicked, closable with Escape.

One item at a time, with arrows to move between them.

Use it for

Honestly, very little. Most visitors never see past the first slide.

Wrong for

Anything important. Put it on the page instead.

Say Avoid a slider — lay them out so they are all visible at once.

Fields a visitor fills in, stored for you to read.

Use it for

Enquiries, bookings, applications. Ask for the least you need.

Wrong for

Long forms up front. Every extra field loses people.

Say Add an enquiry form asking only for [fields], and store the submissions.

The one thing you most want a visitor to do.

Use it for

One per section, named as an action — "Book a table", not "Submit".

Wrong for

Two equally prominent buttons side by side. That is a choice, not a direction.

Say Give each section one action button labeled with the actual action.

Your name, address, phone and opening times, marked up so search engines read them.

Use it for

Every business a person physically visits. Put it high, not only in the footer.

Wrong for

Online-only businesses with no address to give.

Say Add an address and hours block with schema.org markup so it shows in search results.

The bottom strip: contact details, small print, secondary links.

Use it for

Everything necessary but not urgent.

Wrong for

A second navigation menu with fifty links.

Say Keep the footer short: contact details, hours, and a copyright line.

A small piece of text marking status or category.

Use it for

One or two per view — "Sold out", "New".

Wrong for

Rows of filled color pills, which shout at the same volume as the content.

Say Mark availability with a small outlined label, not a filled pill.

A line showing where you are: Home / Services / Roofing.

Use it for

Sites more than two levels deep.

Wrong for

Flat sites, where it states the obvious.

Say Add a breadcrumb trail above the page title.

What shows when a list has no items yet.

Use it for

Any list that can be empty. Say what belongs there and how to add it.

Wrong for

Never wrong. A blank area looks broken.

Say When there is nothing to show, explain what will appear here and how to add it.

Gray shapes standing in while content loads.

Use it for

Content that takes a moment, so the layout does not jump.

Wrong for

Instant content — it adds a flicker for nothing.

Say Show a loading placeholder in the same shape as the content it replaces.

A thin line separating two things.

Use it for

Separating sections without a heavy background change. Often better than a card.

Wrong for

Between every list row, which turns a page into a grid of boxes.

Say Separate the sections with a thin dividing line rather than alternating backgrounds.