The Close Band We Built Sixty Times

What we found on our own site

This site has ninety-seven public pages in three languages. Almost every one that sells something ends the same way: a dark band with a heading, one sentence, a filled button to book a call, and a quiet text link to the free audit. It is one block. It should have existed once.

It existed sixty times. Each page carried its own copy of the markup, and fifty-five pages carried their own copy of the layout rules for the two buttons. They were identical, until one page was written without them. On that page the two buttons sat pressed against the sentence above and against each other. A reader noticed before we did.

We counted the rest. The page header is hand-built on thirty-five pages. The section wrapper with the small label on the left appears a hundred and eighty-six times across forty-five pages. The numbered grid of points is on thirty-nine. Real, shared components carried far fewer: the blog card list on thirty-three, the subscribe band on eighteen.

Why a visitor notices

Nobody reading a policy institute's website is thinking about components. They are thinking about whether the organization seems competent. Consistency is one of the oldest findings in usability research; it is the fourth of Nielsen's ten heuristics, and it says that the same thing should look and behave the same way everywhere.

The reason is not aesthetic. People build a model of an interface within seconds and then stop looking closely. When a button that was blue and square on the last page is blue and slightly rounder on this one, the model breaks, and the reader has to look again. They will not name what changed. They will register that something is off, and that feeling attaches to the organization, not to the page.

That is why the retainer page with the cramped buttons mattered more than two missing pixels. The page before it had the buttons spaced. The reader arrived at the one that sells the service and found it built by someone in a hurry.

Why it costs speed

A shared block is written once and its styling is written once. A copied block ships its styling with every page that carries it. On this site, removing the duplicate button rules deleted a hundred and four declarations from fifty-five pages, every one of which a phone had been downloading and parsing for nothing.

On a WordPress site the same thing happens through page builders. A section copied from one page to another carries its own settings and often its own generated code. A hundred pages built that way ship a hundred variations of the same thing, and the site slows down a little with each one.

Why it costs money

The cramped buttons were a one-line fix. Making the same fix on fifty-five pages by hand is a morning, and the fifty-sixth page gets missed. With one component, a fix is made once and every page has it. That difference is most of what a maintenance retainer is paying for: the ability to change a thing in one place and trust that the whole site followed.

There is also an honest lesson about how this site was built. The pages were written quickly in August, and each new one copied its neighbor, the way any fast process does, whether the hands are a person's or a machine's. A copier produces sixty near-copies unless it is told to produce a component. Now it is told. A check in our deploy refuses any page that declares its own rules for a block that has a component.

How to tell whether your site has this

Open three pages from different parts of your site in three tabs. Look at the buttons, the headings, the spacing around the closing section, and the way a photo is captioned. If they are the same, someone built a system. If they are nearly the same, someone copied, and the differences will grow with every edit.

Ask the people who maintain it a plainer question: if we changed the color of every button tomorrow, how many places would you have to touch? One is the right answer. On WordPress it means a theme with its own blocks or patterns, styled in one place. A number in the dozens means the site is a pile of pages that happen to look alike today.

What we are doing about ours

The close band is now one component, and the button rules live in one stylesheet, so the fifty-seven pages that still carry the old markup already inherit the right spacing. The rest move to components in order of how many pages stop carrying their own copy: the page header, the section wrapper, the numbered points, the captioned photo, the evidence band.

There is also a catalog now, a private page where every component renders with sample content in light and dark and in all three languages, with its rules beside it. Before anyone adds a section to a page, that is the page to open. We will write up the migration when it is done, with the numbers.