A web page is dated by its resolution, its layout and its furniture

① The one-line version

1993–97: a grey page, serif type, blue underlined links, horizontal rules, a hit counter and an «under construction» sign, on a 640 × 480 monitor. 1998–2003: white pages laid out with tables, a coloured band, a left column of links, small sans type, bevelled buttons, 800 × 600. 2004–10: Web 2.0 — gloss, gradients, rounded corners, drop shadows, big friendly type, 1024 × 768. 2011–15: flat colour, a full-width hero, thin sans type, the hamburger menu, 1366 × 768. 2016–19: cards on a light grey ground, system type, the consent banner from 2018, 1920 × 1080. 2020 on: larger type, more space, dark mode on offer, everything rounded.

② The looks, and what dates each

A site is often a few years behind its year — a small firm’s 1999 page is still up in 2006 — but never ahead of it. The studio warns when the look is outside its years and lets you keep it: a neglected page may be exactly what the scene wants.

③ The address bar

The address tells the year as surely as the layout. http://www. is what the bar shows through the 2000s; the browsers hide the scheme from about 2010 and the www. from 2018–19, after which the bar shows the host alone. The padlock arrives with SSL in the 1995 browsers and is on every bank login by 2000; from 2017 the browsers mark plain http pages «not secure» and most sites move to https. Country domains follow the country: .co.uk, .de, .fr, .gr, .com.tr, .ru; .eu opens in 2006. A Greek or Russian firm’s address is its name transliterated — the studio does that — because non-Latin domain names are a 2010s arrival and rare even then.

④ Mail on a screen

Until the mid-1990s e-mail is a desktop program: three panes — folders on the left, the list above, the message below — in the grey of the operating system, the message in a fixed-width face. Mail in a browser begins in 1996. The three-pane layout survives every change of fashion since; what changes is the grey giving way to white, the toolbar’s bevelled buttons to flat pills, and the fixed-width message to a proportional one. An address is first.last@ the firm’s own domain for work and a free provider for home. The printed e-mail — the page with the subject in the top margin, «Page 1 of 1», the address and the date in the bottom margin — is the prop a script asks for more often than the screen itself.

⑤ The bank, the search page, the newspaper

Banking in a browser starts in America in 1995, in Britain, Germany and France in 1997, and reaches most of Europe by 2000; before that the account is a passbook or a statement in the post. The page is a greeting, the balances, and a table of date, description, amount and balance — and it has kept that shape. The search engines of 1995–98 list plain blue links with the address in green beneath; the title-above-snippet with the host on its own line is the 2000s. The first newspaper sites are British and American (1994–96), most continental papers follow 1996–98, and the masthead online is the printed masthead for a decade before it is redrawn for the screen; the subscribe button and the paywall are the 2010s.

⑥ Before the web, and the pages around the page

Before 1993 a screen in a home or an office shows text: 80 columns by 25 rows, green phosphor in the early 1980s, amber from the middle of the decade, grey-white with a few colours on the PCs of 1989 on. What a private person dials into is a bulletin board — one computer in somebody’s spare room, one caller at a time, a menu of single letters, a clock running down. The modem dates it: 300 baud to 1984, 1200 to 1987, 2400 to 1990, 9600 and then 14 400 in the early 1990s. The boards empty out as the web arrives and most are gone by 1997. Board software is American and its menus English wherever it runs; local sysops typed their own lines in capitals, without accents. Workshop practice throughout.

The web magazine of 1995–2003 is the printed page poured into a browser: a nameplate, a rule, one column of text. The designed long read — a kicker, a large serif headline, a standfirst, a wide picture, a narrow column — is the 2010s, and the «7 min read» line under the byline arrives about 2014. The forum is a table until about 2010: a coloured bar with the poster’s name and the date, a side cell with the avatar, the post count and the year they joined, the text beside it, «quote» and «reply» underneath; after that the same things sit on cards. The sign-in page is a grey dialogue in the 1990s and a white card on a tinted ground since. And the page that is not there is the server’s own bare «Not Found» throughout the 1990s — nobody designed an error — and a large friendly 404 with a way home from the mid-2000s.

⑦ Screens that are not pages

The mail program in its own window is what an office has before webmail and, in most offices, ever since: a title bar, a row of menus, and the same three panes. The profile page on a social network is American in 2003–05 and European from 2006–08: a blue bar, square corners and a list of facts at first; a banner photograph, a round portrait and cards from about 2012. The studio’s network is called Tidewall and does not exist.

A bedside monitor is the screen a hospital scene asks for most. In the 1980s it is a small tube with one green trace and a heart rate; from about 1990 a colour screen with three traces — the heart in green, the pulse wave in cyan, the breathing in yellow — and four large numbers; from about 2005 a flat panel. A dark bar sweeps across and redraws the traces, which is what makes it a monitor and not a chart: in the studio’s HTML file it moves. The lettering is English abbreviations nearly everywhere. An ultrasound frame is a fan of speckle with a depth scale down one side, the hospital, the patient and the time lettered round it, and the callipers — two crosses and a dotted line — with their measure. The studio draws a suggestion of a picture, deliberately vague; a scene that needs a recognisable image needs a real one, licensed and anonymised. All of this is workshop practice, and none of it is a medical display.

⑧ Furniture, by first year

⑨ Putting a page in front of a camera

Three ways, and the studio exports for each. Playback: the HTML file opened full screen on the real monitor in shot — match the monitor’s resolution to the look’s, or let it letterbox. Burn-in: the PNG or SVG to the compositor, with the monitor shot showing tracking marks. Print: the page as the browser printed it, A4, on ordinary copier paper. For playback the HTML file can hold a short sequence — the sign-in page and then the account, the search and then the site, the page and then «not found» — and a click or the space bar moves on; nothing is drawn over the picture. A period CRT refreshes at a rate a film camera sees as a rolling bar; that is the camera department’s problem and a reason productions burn screens in afterwards. For a phone or a screen an actor operates in the take, the page is the wrong tool — that is Mombie.

⑩ What is invented, and what is real

The browser’s window, the mail client («Mailroom»), the search engine («Findex»), the bank, the newspaper and the firm are invented; no real product’s interface, logo or page is reproduced, and a production that needs a real one needs its owner’s permission. The window furniture is drawn in the manner of its years — a title bar, bevelled buttons, a rounded address field — without copying any one program. What is real is the dating: the resolutions, the first years, the habits of the address bar.

⑪ What we could not verify

The first year of browser banking country by country; the modem speeds and screen colours of dial-up boards outside America; when each continental newspaper first published online; how late the hit counter survived on small commercial sites. Open questions for the Archive.