Halden Garage

The before is built wrong on purpose, and every fault is written down

It has no viewport tag, so a phone lays it out 980 pixels wide and shrinks it to fit — measured on a 375-pixel phone the page scales to 0.383, and its 11-pixel body copy renders at 4.2. The business name, the opening hours and the phone number exist only inside images, so a search engine cannot read them, a screen reader cannot announce them, and a thumb cannot dial them. The slider rotates three pictures drawn at twice the size they are shown. The contact form's fields have no labels, and pressing Send does nothing but show a thank-you box.

None of that is exaggerated. Each is common, and each is the reason a visitor leaves without the thing they came for.

What it costs: about 2.5 MB of deliberately wasteful images in the repository, and an exemption in the portfolio's automated sweep, which fails any page that overflows a phone. The exemption is written down with its reason, and the before is still checked for errors and broken images — the failures that would be mine rather than the old website's.

The garage is in Britain because of its phone number

The after has to show a working tap-to-call link, and the obvious risk is that a fictional number belongs to somebody real. Ofcom reserves 07700 900000 to 900999 for drama, and numbers in that range are never assigned. So Halden Garage is a British garage, every tel:, WhatsApp and Viber link on the demo uses that range, and a test fails if any demo ever carries a number outside it.

What it costs: prices in pounds and the word MOT, in a portfolio mostly read in Belgrade. The pattern carries across; the currency doesn't.

"Are you open?" is worked out on the garage's clock

The status reads open, closing soon or closed, and names when the doors next open. The easy version reads the visitor's own clock, which is wrong for anyone somewhere else: at 17:40 in Belgrade it is 16:40 in London, and the garage has almost an hour left. The after asks for the time in the garage's timezone explicitly, so the answer is right wherever the page is read.

It was checked with a pinned clock across seven moments — a minute before opening, opening, the closing-soon window, closing time, Saturday after closing, Sunday, and that visitor in Belgrade — and it re-evaluates every minute, so a page left open across closing time changes its mind.

What it costs: the hours now live in two places, the visible table and the structured data, and they have to be kept in step. It also does not know about bank holidays yet: on a bank holiday Monday it would say open. A real build takes a list of closures from the owner.

On a phone, the three actions stay under the thumb

Below 760 pixels a bar is docked to the bottom of the screen: Call, Message, Directions. The page reserves the same height underneath it, so the last lines of the footer are never trapped beneath the bar — every footer link was hit-tested with the page scrolled to the bottom.

What it costs: 64 pixels of every screen, permanently. For a garage those three actions are the whole website, so it is the right place to spend them.

Every number on the comparison is generated

A script measures both live pages with Lighthouse's default mobile profile — simulated slow 4G, a CPU slowed four times — takes the median of three runs, and records how each page actually behaves in a phone-sized browser. A second script builds the comparison page from that file, and a test fails if a single figure on the page differs from the recorded run. There is a link beside the table to re-run both pages yourself.

What it costs: changing a number means measuring again. That is the intended effect.

What the after deliberately leaves out

No photographs, because a real garage would supply its own and stock pictures of somebody else's workshop are a small lie. No reviews, because they would have to be invented. No online booking calendar: a garage needs to see the car and agree a price before it commits to a day, so the form asks for a call back rather than pretending to confirm a slot. Marlow is where the booking logic lives.

What it costs: a plainer page than a photo-led template. It is also the page that answers the question faster.