Runbooks

Judge and fix a site that reads as dated

How to judge whether a small-business site reads as dated to a stranger, and fix it section by section.

What it can see: only these two pages.

Source on GitHub.

The runbook itself

1. The lecture

The lecture (the evidence for the steps below) is in lecture.md. The steps cite it by number, for example 1.2.1.

2. The steps

Synthesis, unless a step names a source.

1. Name the reader and the reference set. One persona (for a painting contractor: the homeowner who is about to ask for a quote). Then name the pages that persona compares you to: the four competing painter sites, not Linear. A page reads dated or current against those. Justified by 1.2.1 and 1.2.2.
2. Take a two-width screenshot set of your page and of each comparison page. 1280 and 390 wide, first screen and full page.
3. Run the dated-pattern check, one row per pattern, on your page and theirs. Mark seen, not seen, or cannot tell. Patterns, with the era that wrote them up:
   1. Carousel or slider on the first screen (2016 trend; 2026 fading).
   2. Parallax or scroll effects that move the page under the reader (same).
   3. Full-width stock photo as the hero, with a headline over it (same).
   4. Stock "team", "handshake", "diverse" photos (2026 "increasingly reads as inauthentic").
   5. Main navigation hidden behind a hamburger on desktop (NN/g measured the loss, 1.4.1).
   6. Controls with no visible clickability cue: text-only buttons, ghost buttons (1.4.2).
   7. The framework default look: Helvetica or system font, default blue buttons, default navbar and jumbotron (1.4.4).
   8. Social-icon rows and visitor counters (older still; my guess, no source read).
   9. Auto-playing video or sound (2026 "now widely rejected").
   10. A page that is slow on a phone (every trend list names performance).
   11. Giant numerals as section markers ("1", "2" set huge beside each section). They read as a pattern agents produce because numbers carry meaning for them and little for people. Fix: a small drawing beside each section, alternating icons (a drawing of the thing: a campfire) and indexes (a trace the thing leaves: a trail of smoke, a smouldering pit). Keep prediction error low but not zero: an occasional index as a puzzle gives the reader the small delight of working it out.
4. Run the cared-for check the same way. Mark seen or not seen:
   1. Real photographs of the real work and the real people (the painter's own jobs; the one thing a competitor cannot copy).
   2. A chosen type pair, with a clear size scale, not the system default.
   3. Navigation in view; every control has a hover, pressed and focus state.
   4. A layout with a reason for each block's size. Bento only if the cells are different sizes for a reason.
   5. Motion that explains something (a before and after) and not decoration; motion off for readers who ask for less.
   6. Contrast, tap-target size and keyboard use checked, not assumed (tinyfrog).
   7. No default-AI look: no indigo-violet gradient hero, no identical icon-in-a-card rows (the 2025 to 2026 prototype, 1.4.5).
5. Compare as distance, not as a list. For each dated row on your page that no comparison page has, fix it first. For each cared-for row the comparison pages lack and you have, keep it and make it louder. A pattern that every comparison page has and you lack is a prototype you may follow or break on purpose; write down which and why. Justified by 1.2.1 (prototypicality).
6. Fix section by section. Work through a live page section by section, or design a new one that way, with the one persona. Then show the screenshots to that persona only (a model prompted as that reader). A gut check is a prompt for thinking, not proof.
7. A real outsider. Two people from the audience look at the old and new page for five seconds each and say which looks like a business that is still working. That is the only evidence; no source here tests it.

3. What is untested and what is open

1. Every step is a first draft. The single tested link in the chain (1.2.1, 1.2.3) is lab work on how appeal and credibility form quickly; none of it tests "dated".
2. The 2015 to 2016 evidence is four saved pages (Trootech, DeveloperDrive, DesignPieces 2013, NN/g 2016). June 2016 Internet Archive snapshots were saved of three SaaS sites (Basecamp, FreshBooks, Mailchimp) and their current pages; they have not been compared, and no small-business sites or screenshots exist yet. That comparison is the worked example still to do.
3. The carousel finding is NN/g's summary line, not the study. The parallax finding is a 2013 dissertation record (1.4.3).
4. The tinyfrog and line25 pages are agency blogs. Their "fading" and "rising" lists are opinions about fashion.
5. The "default AI look" is one opinion piece (1.4.5).

Use it

Hand it to your agent: give it this page's address, or paste the runbook into the chat, and ask it to follow the steps.