Early web

What is Early web?

Early-web design is a family of practices, not a single coherent style. Scientific hypertext documents, personal homepages, commercial portals, and experimental net art looked very different. Common ingredients included browser-default typography, underlined links, simple horizontal rules, small images, tables, and later animated GIFs. Its strongest contemporary lesson is the directness of a page that tells the visitor what it contains. A revival can preserve that candour while improving readability, accessibility, and behaviour across devices.

The story

The web began as a system for linking and sharing documents. As browser capabilities grew, authors experimented with imagery, page backgrounds, tables, and animation. Do not confuse CERN’s spare first pages with the visually noisy personal-web culture that followed later in the decade.

How do you recognise Early web?

• Explicit underlined text links
• Document-like heading and list structure
• Small images and simple rules
• Visible navigation with little concealed interaction

Colour, type, layout and material

• #F5F5EF
• #171717
• #0000EE
• #551A8B

Typography. Browser-default serif text is historically plausible. Use deliberate line length and a readable size; reserve monospaced text for code or catalogue-like metadata.

Composition. Use a clear single-column document, descriptive headings, lists, and modest rules. Allow natural scrolling; do not reproduce fixed-width table layouts on small screens.

Materials. HTML, linked documents, small raster images, low-bandwidth assets, and browser-native controls. Historical texture should come from authentic structural choices, not a fake error screen.

Why does Early web work?

Familiar text links offer a strong interaction cue. Visible structure can reduce uncertainty, but dated conventions are not automatically usable for every audience. Nostalgia may encourage exploration among experienced web users while seeming unfamiliar to younger visitors.

The principle. The interface exposes its organization. A link says where it goes; a heading names the material below it. The creative opportunity is to make an idiosyncratic, authored place through language and structure rather than through elaborate production effects.

Where it was used

World Wide Web project website, Tim Berners-Lee / CERN, 1990–1991; restored version. CERN’s restored project page preserves the direct hypertext character of the earliest web. The original server and browser were developed at CERN.

• Personal knowledge gardens
• Artist archives and reading rooms
• Low-bandwidth public resources

What to avoid

• Broken navigation presented as authenticity
• Autoplay audio and flashing GIFs
• Using old HTML practices that obstruct accessibility

Try it: a short exercise

Publish a useful one-page guide using only headings, paragraphs, lists, and links. Ask a colleague to locate three facts. Add an image only if it explains something the prose cannot, then compare the result with a heavily styled version.

How do you prompt for Early web?

These prompts ask for an original piece informed by the style, not a copy of any work. Replace the words in square brackets.

For an image or visual design

Create an early-web inspired [FORMAT] for [SUBJECT] and [AUDIENCE]. Choose the scientific hypertext branch: warm white background, black serif text, blue underlined links, small horizontal rules, and a clear contents list. Add one low-resolution diagram made specifically for the subject. Communicate a distinct author’s voice. Avoid random GIFs, browser chrome, fake loading errors, and irrelevant nostalgia objects. Create an original composition, not a replica of a named artwork or brand. Explain three decisions that connect the result to this brief. Use supplied wording accurately; leave space for manually typeset text if text rendering is unreliable.

For an interface

Implement a lightweight document site about [SUBJECT] for [AUDIENCE]. Use real headings, lists, descriptive underlined links, a visible table of contents, and browser-native form behaviour. Keep the visual language close to early hypertext but use a fluid readable measure and modern responsive spacing. Navigation must work without animation; images need useful alternative text and explicit dimensions. Use semantic HTML, responsive layouts, visible keyboard focus, labelled controls, and accessible contrast. Include loading, empty, error, and success states where relevant. Respect reduced-motion preferences. Use realistic supplied content, not generic placeholder marketing. Explain how the visual choices support the user’s task. Deliverable: [FORMAT].

Lineage

Draws on: The New Typography, Corporate Modernism.

Influenced: Y2K futurism, Web brutalism.

Sources

1. CERN: Where the web was born
2. CERN: First website