A footer that fits the page

Nobody arrives at a sales site to read the footer. But it is where the terms live, and the privacy policy, and the control that changes your cookie choice — so when you do go looking, it should be easy to find and easy to hit. Ours was neither.

One line, too wide

Every part of a domain page stops at a comfortable reading column. The footer did not. It had been built to fill whatever width the window offered, so on a wide screen it stretched to about 1,480 pixels under a page that stopped at 1,000 — the one strip of the site that did not line up with anything above it.

What filled that width was a single run-on line of fourteen items: four navigation links, two legal documents, our name, six social profiles and the cookie control, all separated by the same small dot. Finding "Privacy" in it meant reading a sentence of links to the end.

On a phone it went the other way. Below a certain width the whole row switched to stacking one item per line, which turned those fourteen items into a column roughly 350 pixels tall — on many pages, taller than the content it was supposed to be a footnote to.

Two rows instead

The footer is now two short rows, and it stops where the page stops.

The first row is where you can go: the catalogue, the blog, the referral programme, the Terms of Sale, the privacy policy, and the cookie control. The second, under a thin rule, is who we are: our name and the places you can follow us.

That split is the whole idea. Six social profiles inline with the navigation is what made the old line a run-on, and they were never navigation in the first place — they are identity, and they belong under a rule rather than in the middle of a sentence about where to click next.

Both rows wrap now instead of stacking, so on a phone the same footer is about 155 pixels tall rather than 350. The dots between links stayed: once a row wraps, they are what tells one link from the next.

The social links keep their names next to their marks. An icon-only row would have been narrower, and we would have been trading away the only label that still works when an image fails to load or when someone cannot tell six small monochrome glyphs apart. That is not a good trade for a few hundred pixels.

Big enough to hit

The links in a footer are small by convention, and small is fine until it means "hard to tap". The accessibility guidelines put a floor on this: WCAG 2.2 asks that a target be at least 24 by 24 CSS pixels unless it sits inside a run of ordinary prose. Ours rendered a little over 20 pixels tall and did not sit inside prose — they sat in a wrapping row of links, which is exactly the case the exception is not written for.

Every link and button in the footer now clears that floor. Nothing looks different; there is simply more of each one to hit.

A smaller thing, for screen readers

A page can mark a region as navigation, and assistive software uses those marks to jump straight to it. Ours had marked the whole footer that way, social profiles and all — so a reader jumping to "footer navigation" also landed among six links that go to other websites, and among a link to the home page that the row above already offered.

The mark now covers the first row only. The identity row is still there, still in the footer, just no longer announced as somewhere to navigate.

The same footer everywhere

The footer used to be written out by hand in each page template. Nine copies, and — as tends to happen with nine copies — they had quietly drifted into three different orderings, and at one point some of them were missing a link the others had. It is generated from one place now, so every page carries the same one, and a page that forgets it fails our build rather than shipping short.

None of this changes a price, a listing, or how an offer reaches us. It is the kind of work that is only visible when it has not been done.