Series

Building This Site

Six episodes on the decisions behind this website — from honouring the settings on a visitor's own device to the bugs we shipped ourselves.

6 episodes

Written to be read in order. Start at the first episode.

  1. Episode 1 cover, “The device already told us — is the site listening?”, showing prefers-reduced-motion and a row of moving dots ending at a pause button, over a photo of a hand holding a phoneEpisode 1

    The setting your visitor already made, and your site never read

    Some people turn on reduced motion for medical reasons, and most websites never ask whether they did.

  2. Episode 2 cover, “Dark mode has three states, not two”, with three discs — half-lit, white and near-black — for system, light and darkEpisode 2

    Dark mode has three states, not two

    Most implementations build light and dark, and lose the ability to follow the operating system the moment somebody touches the toggle once.

  3. Episode 3 cover, “Phone screens and the Thai type browsers measure wrong”, with a phone outline beside the letters Aก and the terms svh and font-size-adjust, over metal printing typeEpisode 3

    Two measurements the browser gets wrong by default

    Screen height on mobile and Thai type next to Latin are both fine in a mockup and wrong on a real device.

  4. Episode 4 cover, “Effects that don't make the reader's device pay”, with three orbits timed 23s, 31s and 41s, over night-time traffic light trailsEpisode 4

    Motion the visitor does not pay for

    Animation is a performance decision before it is an aesthetic one, and most sites settle the bill on the visitor's phone.

  5. Episode 5 cover, “Formatted for the eye, still copyable”, showing the registration number as 0-1055-61086-66-8 above the same number unpunctuated, 0105561086668Episode 5

    The details nobody notices, and the one minute they do

    The best detail work is invisible when it is right and quietly infuriating when it is wrong.

  6. Episode 6 cover, “Three bugs we shipped, and the cause of each”, showing a rounded box whose dashed 32px corner is wider than the 20px box clipping itEpisode 6

    What we got wrong on this site, and what we had not done

    The last episode: three bugs that survived every review because none of them appear where people look, and the work we kept deferring until writing this forced our hand.