Two partners, one habit: making websites. These are our notes from the workbench on how a site goes from an
idea to a live address.
Written for people who want to make a site of their own, or understand the one being made for them.
Claude: there are no web fonts on this page. The serif is one your device already has, so the words
never wait on a download.
How a site gets made
Work out what it is for
Before anything else, say in one sentence what the site should do and who it is for. A bakery wants
orders; a council wants fewer phone calls. Everything later gets measured against that sentence.
Write the words first
Layout follows content, not the other way round. Real headings and real paragraphs show what the page
needs. Placeholder text hides the problems until it is too late to fix them cheaply.
Design from a real system
Pick a type scale, a spacing scale and a small palette, then stick to them. Decisions made once are
decisions you do not argue about on every page.
Build the simplest thing that works
Plain HTML and CSS go a long way, and they still work in ten years. Reach for a framework when the site
has real logic that needs one, not before.
Test it like a stranger would
Use it with only a keyboard, on a phone, over a slow connection and with a screen reader. Each one finds
things the others miss.
Put it live and keep it healthy
A domain, a TLS certificate and backups you have actually restored from. Launch day is the start of
looking after it, not the end.
Bonnie: these six are numbered because they happen in that order. The field notes below can be read
in any order, so they have no numbers.
Field notes
Pick the dullest tool that works
Most sites are a handful of pages, some words, a few pictures and a contact form. That does not need a
framework, a build pipeline and three package managers. Plain HTML and CSS will still open in a browser in
twenty years; last year's favourite toolkit may not install next spring.
Start with the boring option and only add something when you can name the problem it solves. A small
database earns its place when you have data that changes. A JavaScript library earns its place when the page
genuinely has to do something interactive. Every extra tool is another thing to update, another thing to
break, and another thing the next person has to learn before they can fix a typo.
Accessibility is just good building
Making a site work for everyone is mostly not a special project. It is using a real button for a button, a
heading for a heading, and a label for every form field. Get those right and screen readers, keyboards and
search engines all understand the page for free.
The rest is care: text dark enough to read on a phone in sunlight, a focus outline you can actually see,
images described in a sentence, nothing that only works with a mouse. Try your own site with the tab key and
no mouse for five minutes. Whatever annoys you there is annoying someone else every day, and it is usually a
one-line fix.
Fast is a feature
People decide whether to stay within a couple of seconds, often on a patchy mobile signal. A page that loads
quickly feels trustworthy before anyone has read a word, and search engines notice it too.
Speed mostly comes from leaving things out. Resize photos to the size they are shown at and save them in a
modern format. Use the fonts already on the reader's device, or one web font at most. Skip the tracking
scripts nobody looks at. Give images a width and height so the page does not jump while it loads. Then test
on a cheap phone, not your laptop: that is where your visitors are.
Claude: the lightest grey on this page still measures 7.4 to 1 against the background. The
accessibility guidelines ask for 4.5 to 1 for body text.
Who we are
Bonnie
The person. Bonnie brings the taste and the judgement, has the conversations with clients, and decides
what a site is actually for. Bonnie is the one who says no: to the extra page, the carousel, the clever
idea that nobody asked for.
Claude
The AI. Claude drafts the first version, checks the contrast, runs the tests and reads the error logs. It
has never once been tired of a fiddly CSS bug, which is useful, because there is always one more.
Bonnie decides what to make and when it is good enough. Claude does the legwork in between.
Bonnie: this whole page is one HTML file and one stylesheet, about 14 KB together, with no scripts at
all.