Curb to ClickWithin 25 miles of downtown Atlanta. Book the walkthrough

Colophon · 3 min read

How this site is built

A company that sells websites should be able to show its own receipts. Here they are. What this page is made of. What it doesn’t load. What it scores when a machine checks it.

What it is made of

Every picture on this site is code. The curb, the map, the painted storefronts, the tags, the stamp, the door, the sandwich board, the cursor. All of it is CSS or SVG, drawn by hand and shipped inside the page. There are no photographs, no stock, no icon fonts, and no image files at all except the share cards social networks ask for, the home-screen icons, and two QR codes on the printed documents.

The type is one family, hosted here and cut down to the glyphs the design uses: Overpass, the free descendant of the typeface on American highway signs, for every word, and Overpass Mono for anything that is data. A street uses one typeface, so this site does. The palette is the street’s too. Concrete, asphalt, curb yellow, sign green, and the white of a reflective sign. Red has one job. The word no.

The site is static HTML, built with Astro. There is no framework running in your browser. The scripts that do run add up to a few kilobytes and do six things.

  1. Paint the headline on and bring the lights up.
  2. Open the door when you get to it.
  3. Run the signpost.
  4. Count the feet on the tape.
  5. Count the curb check.
  6. Turn the booking form into an email.

If they never run, the page is still a page, the door is open, the check is a form that still works, and the booking form still sends.

What it does not do

It does not load anything from anywhere else. No analytics, no tag manager, no chat widget, no fonts from a CDN, no tracking pixel. The browser is told to enforce that with a Content-Security-Policy header, so it is a mechanism, not a promise.

It sets no cookies. Day is the default. The one thing it remembers, if you switch to night, is stored in your browser and never sent anywhere. The curb check is counted on the page. Its result goes into an email only if you choose to send one.

What it scores

Measured on the built site with Google Lighthouse and Deque’s axe, in a headless Chrome, on the day this page was last filed. Every page scored the same. The phone run throttles the network to a slow 4G and the CPU to a quarter speed, which is the honest one. They get re-checked when the site changes.

CheckResult
Lighthouse, desktop: performance / accessibility / best practices / SEO100 / 100 / 100 / 100
Lighthouse, phone on simulated slow 4G, same four99 / 100 / 100 / 100
Largest contentful paint, phone on slow 4G2.0 s
axe-core violations0 (WCAG 2.2 A, AA, AAA and best-practice rules)
Third-party requests0
Image files on the front page0
Front page weight, HTML with styles and drawings inlinedabout 122 KB, about 216 KB with the fonts

For the machines

The people who used to search are starting to ask an assistant instead, and an assistant can only recommend what it can read. So this site is written for them too, without writing anything a person wouldn’t want to read.

Every page carries structured data a machine understands.

  • The front page describes the business, its area and what it offers, with prices.
  • The plan is marked as a how-to.
  • The count is an article and a dataset with its method.
  • The colophon and the check are pages.
  • The headings say what the sections are.
  • The facts are in the text, not in pictures of text.
  • Nothing important is drawn in by script after the page loads.
  • A plain summary of the whole site lives at curbtoclick.com/llms.txt.

That is the same list an owner gets in their plan. It is not a trick. It is being clear in a form a machine can read.

How it treats you

  • Colour contrast clears WCAG AAA by day and by night.
  • Every button and link has a visible focus ring. On yellow, the ring turns ink.
  • The signpost traps nothing and closes on Escape.
  • If your system asks for less motion, nothing on this site moves, and nothing is hidden waiting to be revealed.
  • If your system asks for more contrast, the greys go to full ink.
  • It prints as a plain leave-behind.

Who made it

Written, designed and built by Brandon George in Atlanta, with the copy decided before the first line of code was written and the design built to serve it. The method behind the copy is published at writethegoodfight.com.