Back to the interactive site

Web Evolution

The history of the web in twelve eras, from the 1991 document web to AI-native pages, told through one observatory website.

Document Web

1990–1993

The first web pages were plain documents: headings, paragraphs and links, nothing more.

Your browser, not the author, chose the fonts and the page width. There were no colours to pick, no scripts and no pictures inside the page. A link was the only thing you could click.

A small shared set of tags meant any browser could show any page, and a link could point to a document on another computer.

What changed

Pages became linked documents that any browser could show.

Milestones

Images Arrive

1993–1995

Pictures finally moved inside the page, and the web started to look like a magazine.

Before the image tag, a photo opened in a separate viewer. Now a logo or a telescope photo could sit right beside the words.

Graphical browsers such as Mosaic and Netscape brought millions of new people online.

What changed

Pictures moved from separate windows into the page itself.

Milestones

GeoCities Kitsch

1995–1998

Free homepages let ordinary people publish, and they decorated everything.

Starry backgrounds, spinning planets, scrolling text and a hit counter were all easy to add. Each page was a small personal project.

It was loud and often messy, but it showed that anyone could make something on the web.

What changed

Anyone could publish a personal page, and style became personal.

Milestones

Tables and Sliced Graphics

1996–2002

Designers wanted real layouts, so they bent the table tag into a layout grid.

A page was a stack of nested tables with tiny invisible images holding the gaps open. Fancy buttons were sliced from one picture into many.

It worked, but it was brittle and hard to read aloud. It also showed why the web needed proper styling.

What changed

Layout moved from plain flow to grids, using a trick that was never meant for it.

Milestones

Flash and DHTML

1997–2005

Sites became shows, with dark intros, loading bars and a button to skip it all.

A browser plugin called Flash played animation and sound that plain pages could not. Designers built whole sites inside it.

Menus that flew out came from scripting the page itself, called DHTML.

What changed

The web gained motion and sound, but through a plugin outside the page.

Milestones

Web Standards and CSS

2001–2005

Developers separated what a page says from how it looks, and pages got cleaner.

Content went in tidy markup and the design went in a style sheet. One page could be restyled completely without touching its words.

Badges proudly announced that a page passed the validators. Layout without tables became the goal.

What changed

Looks moved out of the markup and into style sheets.

Milestones

Web 2.0

2004–2009

Pages started updating without reloading, and visitors began making the content.

Gmail and Maps showed that a page could fetch data in the background. Glossy buttons, tag clouds and star ratings invited people to join in.

Everything was shiny, with gradients and reflections, and everything was labelled beta.

What changed

Pages became interactive apps that people could add to.

Milestones

Skeuomorphic and Mobile

2007–2012

Phones brought the web into our hands, and designs copied real materials.

Linen, leather and stitching made screens feel like objects. A separate small site, often at an m. address, served the narrow screen.

New browser features such as web fonts and shadows made this look possible without Flash.

What changed

The web went mobile, and designs imitated physical things.

Milestones

Responsive and Flat

2010–2016

One page learned to fit every screen, and the textures disappeared.

Instead of building a site per device, designers made layouts that flow to fit the width. Watch the window narrow and the columns stack.

Flat colours and thin type replaced leather and gloss, and a three-line menu icon became familiar.

What changed

One layout now adapts to any screen, in a flatter style.

Milestones

App Web

2013–2020

Websites started to behave like apps, loading once and changing in place.

Clicking around no longer reloaded the page. Grey skeleton boxes showed where content was on its way.

Sites could be installed, worked offline and followed your light or dark setting.

What changed

Navigation moved into the page, so sites felt like apps.

Milestones

Glass, Motion, Bento and 3D

2019–2024

Frosted glass, grids of tiles and a 3D planet turned pages into scenes.

Browsers could blur what sat behind a panel, and draw 3D graphics without a plugin. Content sat in a bento grid of unequal tiles.

New CSS features let components adapt to their own space and animate as you scroll.

What changed

The browser itself can now blur, animate and draw in 3D.

Milestones

AI-Native and Liquid Glass

2023–2026

You can now ask a page a question and watch it build the answer.

Instead of browsing menus, you type a request and cards assemble themselves. A translucent toolbar bends the light behind it.

In this demo the answer is scripted and nothing is sent anywhere.

What changed

Interfaces can now be generated on request instead of designed in advance.

Milestones

Sources

Milestones

Media

Sounds

Fonts

References

Licences and credits