Four page architectures

Sites that are not a column of sections

Each of these throws out the standard page and replaces it with a different way of moving through content — sideways, spatially, by typing, or by reading. They share a build script and nothing else: no shared layout, no shared stylesheet, no shared components. Every one degrades to a plain, readable document on a phone or with JavaScript off.

Research practice A map you pan and zoom Verso Atlas No scroll at all. Content sits at coordinates in a 2,600 × 2,000 world you drag around, with a minimap, a zoom that tracks the cursor, connecting wires and a detail sheet. Below 900px, and with JS off, the same content is a plain list.
  • Drag to pan, wheel to zoom at cursor
  • Minimap with live viewport rect
  • Contents rail flies you to a node
  • Full no-JS document underneath
Open → Developer tool The navigation is a command line nullstack A boot sequence, a prompt with tab completion and history, clickable command chips for people who would rather not type, a ⌘K palette, and a simulated deploy that streams. Every output already exists in the DOM, so it is a normal document without JS.
  • Tab completion, ↑/↓ history, ctrl-L
  • ⌘K command palette
  • Streaming simulated deploy
  • Whole site readable with JS off
Open → Furniture studio The page scrolls sideways Meridian Objects Eight full-viewport panels in a horizontal track. The wheel is remapped, arrow keys and drag work, a progress rail doubles as the scrollbar, and an index overlay jumps between panels. On a phone it becomes an ordinary vertical page.
  • Wheel → horizontal motion
  • Snap, drag, arrow keys, Home/End
  • Progress rail + index overlay
  • Falls back to vertical below 900px
Open → Quarterly journal A printed page, set properly The Long Field A three-column measure: running contents in the left margin, a 62-character text column, and a right margin holding sidenotes and plates level with the sentence they belong to. Drop cap, pull quotes, old-style figures, hanging punctuation, print stylesheet.
  • True margin notes, not popups
  • Drop cap, oldstyle numerals, indents
  • Reading progress + live contents
  • Margin folds inline below 1100px
Open →

Invented companies, generated placeholder art. Content for each lives in one config.json; the layout, stylesheet and behaviour live beside it in sites/<name>/. Each demo below is a single self-contained HTML file.