Thirty years of web design: from gray backgrounds to glass

Web design history is a change of manners, from gray pages and Flash to flat design, Material and glass, each driven by technology, screens or fashion.

Why know the history of styling

A page looks “like the two-thousands” not because it was made long ago. It looks that way because it kept something that a technology or a fashion once dictated. If you understand the reason for a trick, you can decide: keep it, replace it or work around it. If you don’t, you copy what others did, as people copied Flash intros and gloss on buttons.

The story is shorter than it seems: a little over thirty years. And almost every new manner arrived for one of three reasons:

• technology: the browser learned to do something it couldn’t before (or stopped needing a plugin);
• screen: devices appeared with a different width and density, and the old styling didn’t work on them;
• fashion: people got tired of the previous look and wanted the opposite.

Check yourself: what three causes change how sites look?

Technology, the screen and fashion. What ages first is whatever depended on a technology that no longer exists.

The eras, in order

Move the slider. Your project’s card, in your own words, is drawn in the manner of each period. These aren’t copies of real sites but simplified “portraits” of the eras, each in plain CSS.

Era: 199620002008201320182021from 20142025

Your project

For: Who it is for

• First item
• Second item
• Third item

What the visitor does

1996: Tables and a gray background. Technology: CSS barely exists or behaves differently in each browser, so layout is done with tables and the gaps are held open by transparent one-pixel images.

What is still right. Simplicity and speed: the page is light and opens anywhere.

What has aged. The layout is baked into the markup, there are no mobile screens, and the table that frames the page means nothing.

Now in order, with the reasons.

The early nineties: text on gray. The first pages had no styling at all. A gray background, black text, blue underlined links: this is how a browser shows any page without styles. There was structure, not design. In 1993 the Mosaic browser popularized pictures inside text, and pages became “covers”.

The late nineties: tables and spacers. Designers wanted columns and margins, and CSS had no means for them. A page was laid out in a table, and the gaps were held open by transparent one-pixel images, “spacers”. Tiled backgrounds appeared, blinking “under construction” signs, visitor counters and badges saying “best viewed in this browser”. Each browser showed a page a little differently, and the badges were an honest admission of it. You already built a page in this manner in the second part of the course.

Around 2000: splash pages and Flash. The Flash plugin gave animation, sound and interactivity that HTML couldn’t. Many sites opened with a “cinematic” splash page and a “skip intro” button. The styling was striking, but the page could be neither read by a screen reader, nor found by search, nor opened on a phone. Adobe ended support for Flash on 31 December 2020, and a whole manner went with it.

The mid-two-thousands: CSS and “Web 2.0”. The CSS Zen Garden site (2003) showed that the same markup could be dressed in hundreds of different looks, and styles moved into separate files. Gradients, rounded corners, reflections and bright icons followed: this is what “Web 2.0”, which you read about in the first part, looked like.

The late two-thousands: skeuomorphism. A skeuomorph is a thing that keeps the form of an earlier object although it no longer needs it. In interfaces the word means styling that imitates real things: the leather of a calendar, the wood of a bookshelf, the metal of a switch. On the first smartphones it helped people understand what to press. But textures are heavy, gloss is noisy, and imitating things limits what an interface can be.

2012 to 2014: flat design. Phones with screens of different densities, weariness with textures, and the interfaces of Windows 8 and iOS 7 together turned fashion toward simple shapes and solid colors. But extremes have a price: when a button looks like a label, a person doesn’t know it can be pressed. Researchers at Nielsen Norman Group tested this and described it in an article that is linked in the sources.

From 2014: Material. In 2014 Google described in Material Design a world of “sheets of paper” with height and shadow. It was no longer a style but a set of rules: a grid, a spacing step, states, motion. This is where the era of design systems began, and the whole second half of this part is about them.

Brutalism. In parallel, from the mid-2010s, the opposite fashion appeared: a system font, hard borders, a raw grid. It is a protest against smooth, identical templates. The gallery linked below collects such sites by the dozen. The manner doesn’t suit most projects, but it is a useful reminder: a page that pretends to be nothing reads better.

Around 2020 to 2022: neumorphism and glass. Neumorphism “presses” elements out of the background; glass blurs everything behind a translucent panel. Both need care: borders become barely visible, and the contrast of text drops. In 2025 Apple updated its systems with a glass manner called Liquid Glass, and Google released Material 3 Expressive: fashion goes on without us.

Today: restraint. Large readable text, one strong action per screen, plenty of air, tokens, a light and a dark theme. This isn’t “the end of history”. In ten years something from today will date a page too.

Check yourself: why did Flash splash pages disappear?

The technology they stood on stopped being supported, and the splash pages themselves couldn’t be read by search engines or screen readers and didn’t work on phones.

What to take from the past

From each era it is useful to take not the look but the principle:

• from the nineties, simplicity and speed;
• from skeuomorphism, clarity that a button can be pressed;
• from flat design, discipline: fewer decorations;
• from Material, shadow as a language of depth, a spacing step and states;
• from brutalism, the honesty of text;
• from glass, layers, if they explain what is above what.

You’ll come back to this in the next lesson, when we look for the signs of a dated page.

Practice

Build your project’s first screen twice, as if in different eras. It is also a review: you already used tables for the 1996 page, and a separate stylesheet is exactly what marks the next era.

In the “1996” block put the name, the items from your content and the main action inside a table. In the “2005” block there are no tables: a header with a colored background, a column of items .side floated left, and a column .main with the same action. Write the rules for the columns in the styles.css tab. Here are the lines that are enough.

#v2005 .side {
  float: left;
  width: 30%;
}

The rule float: left makes a block press to the left while the rest of the content flows around it on the right. This is how pages were laid out from the mid-two-thousands until flexbox and grid arrived. You’ll learn those two in the CSS part.

What was wrong with 2005

Every site in this manner opened on a desktop screen, and for a narrow phone there was nothing: the columns didn’t rearrange. Designers fitted pages to a width of 960 pixels and thought that was enough. We’ll see how that broke when we reach responsive layout.