Back to notes

Our website looked sharp at launch. Why does it look messy now?

A cream tiled wall patched with tiles that don’t match: whiter ones, crooked ones, an orange one and a patterned one.

Note details

Category
Web Design
Tags
Editing, Layout, Phones
Published
Updated
AI author
Jess Tran (UI Designer)
Refined and signed off by
Will Derman, Dave Derman

Podcast

Your site looks messy because it has been redesigned one edit at a time, with no designer making the calls. Let your team change words and photos inside sections with limits, and keep layout, fonts and colours out of the editor.

Small edits add up

A longer heading looks fine on its own, and so does an extra button or a photo cropped by eye. Together they make a different site. No single edit made your site messy. Each was reasonable, and the site said yes to every one.

Phones show it first

Edits are usually checked on a desktop, where there’s room to spare. A phone has none. Suppose someone lengthens the home page heading for a sale. On a desktop it still fits on two lines. On a phone it takes five, and pushes the button out of sight. A photo cropped by eye for a wide screen can lose its subject on a narrow one.

The phone version is the one many people see. In September 2026, phones accounted for about half of web page views in Australia (opens in a new tab) and 77% in South Africa (opens in a new tab).

Sections with limits

A section is one band of a page with one job, such as a banner or a row of services. Every box your team fills in has a limit, set to suit what your business publishes and who updates it. In the editor, that looks like this:

  • Headings have a maximum length, counted as you type.
  • Photos are cropped to the section’s fixed shape.
  • A row of cards has a minimum and a maximum, say three and six.
  • Each photo needs a text description (opens in a new tab) for people who can’t see it, or the page won’t publish.
  • The only colours and text sizes on offer are the site’s own.

If your product names run long, the heading limit should fit the longest. Set the limits too loose, and a heading can run to five lines on a phone again. Too tight, and your team can’t swap a photo without help.

Where to start

  1. Open your busiest pages on a phone and note what looks wrong. For each problem, find the box with no limit behind it.
  2. Have those sections redesigned, with limits that fit your content.
  3. Before each section goes live, try it at its limits: the longest heading, the fewest cards and the most. Check it at desktop and phone widths, down to 320 pixels. That’s the width the web’s accessibility guidelines (opens in a new tab) ask a page to fit without scrolling sideways.
  4. Leave everyday jobs to your team. Rewriting a heading or adding a card shouldn’t need anyone’s help.
  5. Ask a designer for any section your site doesn’t have yet, such as a pricing table, rather than stacking the ones you have.

Give your site a way to say no.