Chapter 3. Stripping the Page

Chapter 2 chose two pages that are as different as any pair it could find: the newspaper front page and the wind-farm dashboard. Strip them, one layer at a time, and watch the same skeleton emerge from both. The exhibits below do exactly that, to real pages: the Guardian’s international front page and a Grafana wind-farm monitoring dashboard, captured on the same morning.

The starting material. One page is paper-white and editorial, the other black and numerical; they share, apparently, nothing.

Strip the style

Turn off CSS, switch to reader view, print in monochrome. The page looks different; nothing it says changes. So a document factors:

Doc = Style × Content

The justification is already deployed on every device you own: dark mode, print stylesheets, reader view, accessibility themes — style varies while content holds fixed.

CSS off. The newspaper still says everything it said — headlines, bylines, photographs, in browser-default dress. Note the asymmetry on the right, and file it for Part IV: stripping style from the newspaper leaves the news; stripping it from the dashboard leaves mostly chrome. The headline numbers survive as text, but the time-series curves were never in the document at all — they are pixels on a canvas.

Strip the arrangement

The same content appears as a table on desktop, a card list on mobile, a chart in the summary view. The facts are identical; their shape as a document differs. So content factors:

Content = Arrangement × Data

Every “view toggle” on the web justifies this factoring, showing the same data as a different tree.

Arrangement off. Both pages now use the same format: one block per entity, sorted, with no nesting. A headline is paired with a section, and a panel title with a value. The two sites that shared nothing now differ only in vocabulary.

Order as data

There is one complication before the next strip. A careful reader has already spotted it: the front page’s order means something. The lead story leads because an editor judged it should, and a strip that discarded the judgment would be destroying content while claiming to remove arrangement. That judgment can itself be represented as data: this article, prominence one. The strip’s real effect is that order moves out of the tree and into the data, where it survives every re-arrangement that follows. The deployed web already shows what happens otherwise: the same articles also go out through feeds, and a feed delivers them without the front page’s ordering. When prominence lives only in an arrangement, it is lost on every consumer who receives the content without it. Chapter 6 will harden this from a concession into a law: if the order is a message, the order is data.

Strip the selection

Every page shows a sliver of something much larger. An article’s own page and the front page draw from the same pool; the dashboard shows the last six hours, but last week exists. So data factors:

Data = Selection × State

Pagination, filters, and search are deployed proof that the page is a window, not the world.

Selection is made visible here as two windows over one pool. On the left, /international and /world share 13 entities, because the same articles are drawn twice. On the right, the same dashboard appears at ?from=now-6h and ?from=now-7d, so the selection travels in the URL, where anyone can change it.

Three strips, and both of our maximally different sites have reduced to the same expression:

Doc = Style × (Arrangement × (Selection × State))

Four nested rounded frames from outermost to innermost, the smallest at the centre highlighted

The three stripping steps applied to both sites: two different pages reduce to the same skeleton.

the page, as shipped

Current Power

partOf: overview
value: 15.5 kW

Wind Speed

partOf: overview
value: 8.2 m/s

− style off

Current Power

partOf: overview
value: 15.5 kW

Wind Speed

partOf: overview
value: 8.2 m/s

− arrangement off

⟨…#panel-14⟩
    partOf · ⟨…#overview⟩
    title · "Current Power"
    value · "15.5 kW"

⟨…#panel-7⟩
    partOf · ⟨…#overview⟩
    title · "Wind Speed"
    value · "8.2 m/s"

− selection off

selection: ?p partOf overview · ?p title ?t · ?p value ?v

(⟨…#panel-14⟩, type, ⟨…#Panel⟩)
(⟨…#panel-14⟩, title, "Current Power")
(⟨…#panel-14⟩, value, "15.5 kW")
(⟨…#panel-14⟩, partOf, ⟨…#overview⟩)
(⟨…#panel-7⟩, type, ⟨…#Panel⟩)
(⟨…#panel-7⟩, title, "Wind Speed")
(⟨…#panel-7⟩, value, "8.2 m/s")
(⟨…#panel-7⟩, partOf, ⟨…#overview⟩)
(⟨…#panel-3⟩, type, ⟨…#Panel⟩)
(⟨…#panel-3⟩, title, "Grid Frequency")
(⟨…#panel-3⟩, value, "49.98 Hz")
(⟨…#panel-3⟩, partOf, ⟨…#archive⟩)
(⟨…#farm⟩, name, "Anholt Offshore")

Interactive exhibit (online edition): here the strip runs live rather than as before-and-after images. The dashboard is rebuilt in place, and each layer can be removed and restored.

Two examples prove nothing about all websites; the strips are illustration. The universal claim is Chapter 4’s theorem, quantifying over every read at once.