Three Columns·the format

Three Columns · a website that shows its sources

What this is

One page, three columns, three readers. Plain answers on the left, every source previewed in the middle, the full technical detail on the right.
This page is not a description of the format. It is the format, with itself as the subject — so every claim below is demonstrated by the thing you are reading.

free to host · nothing to hack · works on any device · you own it outright
A  Plain answers

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.

  1. A GitHub account3 — an email address and a password. Free.
  2. 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.

The rule that makes it credible. Column C always contains at least one thing that went wrong. A page that only records what worked is advertising, and readers can tell. The failures at the foot of column C on this page are real ones from building it.
B  Sources

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.

1Standard · typography
Source Serif 4 and IBM Plex Mono
Adobe and IBM · open licence · free to use commercially
The two typefaces this format uses: a serif for reading and a monospace for anything a reader might need to type, copy or check. Both are free, both are open-licensed, and both stay legible at small sizes on poor screens.
Why it is cited: as a demonstration of what a source card is for. You now know what these are and why, and almost certainly do not need to visit the page at all.
fonts.google.com/specimen/Source+Serif+4
2Method · link health
Why a page cannot check its own links
Cross-origin rules · Mozilla developer documentation
For security reasons a browser will not tell a page the result of a request to somebody else's site. The response comes back opaque, with no status attached, so a healthy page and a dead one look identical from the inside.
Why it is cited: because the honest version matters more than the clever one. Any in-page link checker is guessing, and will mark live sources dead. The check therefore runs on a schedule, away from the reader, and writes a small file that the page reads. Column C has the mechanics.
developer.mozilla.org/en-US/docs/Web/HTTP/CORS
3Infrastructure · hosting
GitHub Pages
GitHub · static hosting from a repository · free for public repositories
Serves plain files straight from a folder, with no build step and no server to maintain. Publishing is a commit. A custom domain is set by putting the domain name in a one-line file at the top of the folder. Private repositories need a paid plan; public ones are free.
Why it is cited: it is the entire hosting arrangement. It is also the thing you could walk away from in an afternoon if the terms ever changed, which is the point made in column A about lock-in.
docs.github.com/en/pages
4Infrastructure · security
Let's Encrypt
Internet Security Research Group · free automated certificates · non-profit
Issues the certificate that puts the padlock in the address bar, automatically and at no cost, and renews it without being asked. On this arrangement you never touch it: it appears a few minutes after the domain resolves.
Why it is cited: it is the second half of the dollar-a-year figure in column A. Neither the hosting nor the encryption is a cost.
letsencrypt.org
5Example · in use
A research strand, published daily
Worland, Wyoming · dated issues, never revised after publication
The format carrying heavy technical content: measurements, methods, and the things that failed. Several issues contain corrections to earlier issues, printed as corrections rather than quietly fixed.
Why it is cited: it shows the format under load, and it is where the rule about publishing failures came from.
baconian-ciphers.online
6Example · in use
A municipal ordinance audit
Worland, Wyoming · a citizen reading a town's animal-control law against its sources
The same format with no research content and no daily rhythm at all — a standing page rather than a series. Its middle column is almost entirely primary documents: the ordinances themselves, linked to the town's own copies.
Why it is cited: to show the format is not about science and not about daily publishing. Most sites built this way will be single standing pages.
gorhambury.org
7Standard · text
CommonMark
A precisely specified version of Markdown
Settles what Markdown actually means — how lists, emphasis and code behave when the informal version is ambiguous. Relevant if you draft in plain text before it becomes a page.
Why it is cited: column C recommends drafting in plain text so your words outlive whatever tool made them. This is the version of plain text worth using.
commonmark.org
8Standard · accessibility
WAI-ARIA Authoring Practices — Tabs
W3C Web Accessibility Initiative
The agreed pattern for buttons that switch between panels: which roles to use, what keyboard behaviour a reader expects, and how a screen reader should announce a change.
Why it is cited: the A / B / C buttons follow it. Three buttons is a small enough interface that getting it right costs nothing.
w3.org/WAI/ARIA/apg/patterns/tabs
9Tool · publishing
GitHub Desktop
GitHub · free application for macOS and Windows · no command line
A window listing the files you have changed, a box to type what changed, and two buttons: Commit, then Push. It keeps a folder on your computer in step with the folder that gets published.
Why it is cited: it is the only software a publisher has to install, and it is the step first-timers expect to be difficult. Download, sign in, choose a folder. That is all of it.
desktop.github.com
10Standard · search
Google Search Essentials
Google · what a search engine actually asks of a page
The published requirements: that a page can be crawled, loads quickly, works on a phone, and uses real headings and structure. It is also explicit that content and reputation, not markup, decide ranking.
Why it is cited: it is the evidence behind the split in column A. The technical requirements are met by construction here; the rest is your words, and no format supplies those.
developers.google.com/search/docs/essentials
C  How it works

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.

The principle, which generalises. A feature that fails silently toward a false positive is worse than an absent feature. This page would rather say nothing about a link than say something untrue about it.

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.

Why this route rather than a website builder. Because every version is kept, dated and annotated, by default and without effort. For a standing page that is a convenience. For a running record it is the entire point.

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.
·