Start here. No jargon, nothing assumed. If you read only this column you will still know what this is, what it costs, and whether it suits you.
What is Three Columns?
A way of building a website so that three different visitors each get what they came for, on the same page, without any of them wading through the other two.
On a wide screen you see all three at once. On a phone they become three buttons. Printed, they become one document. It is a single file — no system to log into, no monthly bill, nothing that can be switched off.
Who is it for?
Anybody who has to be believed by strangers.
- A small business whose customers want to know it is licensed, insured and real.
- A tradesperson, inspector or consultant whose claims rest on standards and certifications.
- A campaigner or citizen quoting a law, an ordinance, a filing.
- A researcher publishing work that a sceptic should be able to check.
The common thread is not the subject. It is that a reader might reasonably ask says who? — and deserves an answer better than a bare link.
Why three columns rather than one long page?
Because three different readers want the same thing at three different depths, and mixing them serves nobody. A customer scrolling past technical specifications stops reading. A specialist scrolling past an explanation of basic terms also stops reading.
- Column A — the newcomer. What is this, what does it cost, why should I care.
- Column B — the checker. Your sources, previewed, so they can verify without leaving.
- Column C — the specialist. Full detail, methods, specifications, and what went wrong.
Side by side, each picks a lane and stays in it — and can glance sideways when curious.
What is the middle column for?
Every source, previewed. When column A or C cites something, the citation1 is a small numbered marker; clicking it moves you to a card in the middle that tells you what the source is, who made it, what you would find there, and what it is doing in this page.
For a business this column is the sales pitch. Not "we are licensed" but a card naming the licence, the issuing authority, and a link to the register where anyone can check it in ten seconds. That is a different order of credibility from a badge image.
Why is the link the last thing in each card?
Because when it was first, readers clicked it immediately and never read the preview — which defeated the whole point. That was the single most important discovery in designing this.
By the time you reach the link you already know whether the trip is worth taking. Most readers stop at the preview, satisfied. That is a success, not a failure.
What happens when one of my links dies?
Links rot. Government pages move, companies fold, archives reorganise. A page that quietly turns into a row of dead ends is worse than no page.
So the links are checked2 and when one dies it is disabled, not deleted — you can still see where it pointed, the preview still says what was there, and a dated note appears at the foot of the middle column saying when the break was found.
Nothing vanishes. A reader years later can see exactly what you cited and that it was live when you cited it.
What does it cost — and what if the free hosting ends?
About a dollar a year: the domain name. The hosting is free3 and the security certificate is free4.
The honest answer to the second half. Nobody has promised free hosting forever, and you should distrust anyone who says otherwise. What protects you is not a promise — it is that your site is a handful of plain files. If the host ever changed its terms you could move the whole thing somewhere else in an afternoon, unchanged, and keep your address. There is nothing to export, nothing to convert, and nothing held hostage.
That is the real answer to lock-in, and it is stronger than "forever" because it does not depend on anyone's goodwill.
Is it secure?
Yes, and for a better reason than you would expect. It is not that the host has excellent security staff, though it does. It is that there is nothing there to attack.
No database, so nothing to inject. No login, so no password to steal. No forms and no server-side code, so nothing to run. No plugins, so nothing to go out of date. No cookies and no analytics, so no visitor data to lose. The entire site is text files being handed out.
The overwhelming majority of small-business sites that get hacked are running a content system with out-of-date add-ons. This has no content system and no add-ons. It cannot go out of date because there is nothing in it that has a version.
Will Google find it?
Half of that is automatic and half of it is you, and it is worth being clear which is which.
The technical half is as good as it gets by construction10. The page is small and loads almost instantly, works on a phone first, uses proper headings and structure rather than a soup of anonymous boxes, and has nothing blocking it from rendering. Those are the things a search engine measures and most sites struggle with.
The other half is your words and who links to you, and no format can supply that. Anybody promising you rankings is selling something.
Does it work on a phone?
It is built for the phone first. Below a certain width the three columns become three buttons and you read one at a time; above it, all three sit side by side. Same file, no separate mobile site, nothing to keep in step.
It also prints properly, which almost nothing does any more: all three columns unfold into one document in order, with every collapsed answer opened.
I have never used GitHub. Can I still publish one?
Yes, and you never have to see a command line. You need two free things and about twenty minutes, once.
- A GitHub account3 — an email address and a password. Free.
- GitHub Desktop9, an ordinary application for Mac or Windows. Free. It puts a folder on your computer that is joined to the internet.
After that, publishing is: edit the file, open GitHub Desktop, type one line saying what you changed, click Commit, then click Push. Live in about a minute.
Two words to learn. Commit means "save this version, with a note." Push means "send it to the internet." Everything else in that application can be ignored indefinitely. Column C has the setup written out step by step.
Can I publish a running series rather than one page?
Yes, and this is where the format earns its keep for some trades. Each issue is dated, published the day it is written, and never revised afterwards — superseded by a later issue if it turns out to be wrong, but never quietly edited.
A builder documenting a renovation, an inspector logging visits, a restorer recording a treatment, a researcher recording a day's tests. What you end up with is not marketing. It is a dated, public, source-cited record of what was done and when, which is a materially different thing to own if anyone later disputes it.
Worth saying plainly: if that record matters to you legally, ask a lawyer how it would actually be treated. The format gives you the record; it cannot tell you what it is worth in a dispute.
Everything cited in A or C, previewed. The link is always the last line — read the card first and decide whether you need the original at all.
Concepts first, mechanics last. A reader who stops a third of the way down should still have learned something whole.
The shape
One HTML file. No framework, no build step, no dependencies except two web fonts, and those fall back to system faces if they fail to load. A typical page is 35–60 KB and has finished rendering before a loading spinner would have appeared.
Three columns wide, three buttons narrow, one document printed. The same markup serves all three — nothing is duplicated, because duplicated content is content that will drift.
Why the sources sit in the middle
Position carries meaning. A source column on the far right reads as an appendix; at the foot of the page it reads as an afterthought and goes unread. Between the plain answers and the technical detail it reads as what it is: the common evidence both other columns rest on.
It also means that whichever column you are in, a citation is one glance away rather than one long scroll.
The anatomy of a source card
Fixed order, every time, so a reader learns the shape once7:
1 number and kind what sort of thing this is 2 title what it is called 3 provenance who made it, when, under what licence 4 preview what you would find if you went there 5 why it is cited what it is doing in THIS page 6 the link last, and only last
Items 4 and 5 do the work, and are the two a bare footnote never supplies. Item 5 is the honest one: it forces the writer to say what the source actually supports, which is where padded citation lists fall apart.
Link health, done honestly
The obvious implementation is wrong. A browser cannot read the status of a cross-origin request: with mode:'no-cors' the response is opaque and status is 0 whether the page is healthy, missing or on fire2. An in-page checker built that way reports false deaths, which is worse than not checking at all.
So the check runs elsewhere, on a schedule, and writes a small file the page reads at load:
links.json
{ "checked": "2026-09-10",
"dead": { "r4": "2026-08-02" },
"note": "one source unreachable since 2 August 2026" }
The page fetches that file — same origin, so the status is readable — and for anything listed dead it disables the link, strikes it through, and writes the dated note at the foot of column B. If the file is missing or unreadable the page does nothing: no file means no claim, never a false alarm.
Security: why there is nothing to attack
The usual pitch is that the host has good security people. True, and beside the point. The reason this is hard to compromise is that the attack surface is close to empty:
no database nothing to inject no login no credentials to steal no forms no input to poison no server code nothing to execute no plugins nothing to fall out of date no cookies no visitor data held no analytics no third party in the page
Nearly every small-business site that gets compromised is running a content system with an out-of-date add-on. There is no content system here and no add-ons. Nothing in the page has a version number, so nothing in it can become an old version.
What remains is genuine and worth naming: your account can be phished, and your domain registrar account can be taken over. Both are protected by two-factor authentication, and both are worth turning on before anything else.
Hosting, and what happens if the free tier ends
The pages are plain files served from a folder3, with the certificate issued automatically4. Nobody has promised that will be free forever and the format does not depend on it being so.
The protection against lock-in is structural rather than contractual: there is no database to export, no proprietary format to convert, no theme to rebuild. Copy the folder to any other static host, repoint the domain, and the site is identical. All internal links are relative, so a change of address touches one file.
Search: the half that is automatic
Everything a search engine asks of a page's construction10 is satisfied here without effort — one small file, no render-blocking scripts, mobile layout first, real headings, real landmarks, descriptive title and meta description, clean relative URLs, no interstitials.
What no format supplies is content worth finding and other sites linking to you. Any claim beyond the technical half should be treated as sales.
One caveat specific to this design: content hidden inside collapsed answers is in the markup and therefore indexable, but a reader arriving from a search lands on a closed accordion. Put the sentence that matters in the summary line, not only inside it.
Devices
A single breakpoint. Above it, three columns with the unselected two dimmed rather than hidden, so the whole page is scannable. Below it, one column at a time with the buttons acting as tabs. Nothing is a separate mobile site, so nothing can fall out of step.
Typography
Body text at 17 px, line height 1.62, measure capped near 62 characters. Figure captions are set at 22 px — larger than body text, deliberately, because a caption is often the only thing a scanning reader reads. Three accent colours only: green for structure, gold for the column keys, red for citations and for anything broken. Dark mode redefines eight custom properties and nothing else.
Print and PDF
The button calls the browser's own print dialogue. Print rules unhide all three columns, expand every collapsed answer, drop the navigation, and start each column on a fresh page — so a printed copy is a linear document in the order A, B, C, and its reader is missing nothing.
Accessibility
The buttons are a real tab set: role="tablist", aria-selected, panels labelled by their button, arrow-key navigation8. Answers are native <details> elements, so the browser's own find searches inside them. With JavaScript disabled entirely the page still reads: all three columns render, all answers open, nothing lost but the switching.
Publishing, for someone who has used neither GitHub nor GitHub Desktop
Written for a reader who has never done any of it. No command line at any point.
Once, at the start — about twenty minutes
1 Make a free GitHub account.
2 Make a new repository, named for the site. Tick "Public".
A repository is a folder on their servers that keeps
every version of everything in it.
3 Install GitHub Desktop and sign in.
File > Clone repository > pick the one you just made,
and choose where it sits on your computer. You now have
an ordinary folder that is joined to GitHub.
4 Put index.html in that folder.
5 On github.com, in the repository: Settings > Pages.
Source: main branch, root folder. Save.
The site is live at username.github.io/reponame.
6 OPTIONAL, and the only step that costs money.
Buy a domain. At the registrar, point it at GitHub:
four A records on @ -> 185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153
one CNAME on www -> username.github.io.
Then add a one-line file called CNAME to the folder
containing just your domain, and publish it.
Set the DNS BEFORE publishing that file, or GitHub
shows a red warning that clears itself once the
records propagate.
7 Wait for the padlock. A few minutes after the domain
resolves a certificate is issued automatically and a
tickbox appears: "Enforce HTTPS". Tick it.
8 Turn on two-factor authentication on both the GitHub
account and the registrar account. These are the only
two things anyone can actually take from you.
Every time after that — about a minute
1 Edit index.html. 2 Open GitHub Desktop. Changes are listed on the left. 3 Type one line in Summary saying what changed. 4 Click "Commit to main". 5 Click "Push origin". 6 Live in about a minute. Add ?v= and today's date to the address when checking: the host caches for ten minutes and you will otherwise be looking at yesterday.
Two words, and no more. Commit is "save this version with a note." Push is "send it to the internet." Branches, pull requests and merges exist and can be ignored indefinitely.
A running record
Optional, and not what most sites will do. Each issue is dated, published the day it is written, and superseded rather than edited — a later issue may correct an earlier one, but the earlier one stays exactly as published.
Files go /index.html for the current issue and /YYYY-MM-DD/index.html for the permanent dated copy, so a link sent today still resolves next year. The version history underneath is a second, independent record of when each word was written.
Page D — the setup sheet nobody sees
A fourth page exists, unlinked and marked not to be indexed. It is the setup sheet: the title, the standfirst, which image heads the page, the source cards, and the last link-check result. It writes the values the page reads.
It is not an admin panel and has no login, because there is nothing behind it to protect. It is a form that produces text you paste into a file. It is kept out of the navigation because it is furniture, not content.
Failures recorded in building this
Per the rule in column A, and these are real:
- The first link checker was wrong. It used no-cors fetches and treated every error as death, which would have marked healthy sources dead. Replaced by the scheduled check above.
- The sources column was first placed on the right. It read as an appendix and got ignored in testing. Moving it to the middle changed nothing but position, and that fixed it.
- The link was originally the first line of each card. Readers clicked it immediately and never read the preview, defeating the entire column. Putting it last was the single most important decision in the design.
- The format was originally named for a daily report. The first real site built this way had no daily rhythm at all, so the name described a habit rather than the thing. Renamed for the structure, which is what does not change.