A brief history of web design — part 1

29.10.14

First let's clarify something. To fully appreciate the experience of an old website you got to go to your attic and unearth an old crt monitor, install the operating system of the time and a browser from back then.

However, since browser vendors have gone to great length to remain backword compatible, you can see right now in your screen a pretty good approximation of the real deal.

To exaggerate the possible difference, here's the rendering of the first webpage as it would look on the line mode browser on a CRT monitor from 1990 vs how it looks right now on the latest Firefox and (if you have one) a HiDPI LCD screen. If you don't yet have a HiDPI computer, odds are you have either a smartphone or a tablet with >200 dpi screen, go view it there.

The early years

I didn't have access to the internet before around 1998 and the wayback machine only goes back to 1996 so I have to scour the web for screenshots to comment on this period.

15 minutes later...

It's interestingly hard to find screenshots from that era. I can only suppose that most websites looked like today's unstyled HTML documents. A few screenshots that I came across certainly look like that.

Most of this styling is not chosen by the webmaker but rather the browser maker. For some weird reason most browser makers chose serif fonts and blue underlined text for links. Headings are appropriately larger, horizontal rules are engraved and that's about it. A few small images or buttons are scattered around to provide a bit of differentiation between different domains.

The dotcom boom

Right at the turn of the Millenium the web started to slowly invade our lives. It became an ugly place: the limitations of the technology combined with conventions of the early years and the new gold rush that began led to this:

Ok not exactly, in fact the million dollar homepage was created much later, but if you see the webpages of even the biggest brands you will see that shameless attention grabbing wasn't only for premium sms services and other scams back then. That's when the <blink> tag was born.

On a less professional part of the web, GeoCities and rival services was the first way of the public to express itself on the web. The result wasn't particularly beautiful, but it is the equivalent of the much later social networks.

Image size constraints made the use of patterns common and use of color was liberal. Framesets are the hot thing and have multiple purposes: They are used as a way to reuse code in a plain html environment, as a technique to avoid full page reloads and as a layout engine.

Offline rich website editors appear by Microsoft, Netscape, Adobe etc. and even word processors are now able to save in HTML. Point and click editing however never caught on beyond that first wave of homepages, and eventually died.

CSS debuted in a limited way in Internet Explorer 3.0 in 1996 but wasn't yet supported enough to be of real use and almost all graphics and interaction elements (excluding hyperlinks) were gif files. Gif files were limited to 256 colors, and back then most screens supported a specific set of 256 colors (dubbed web safe colors) leading to dithered images like this:

Another staple of the era were the high-key gradients. Due to the lack of many colors, banded or dithered gradients spanned the full gamut of colors, in very little space.

Web applications had just started showing up, and their design was, eh, tabley. Most things are still flat because there weren't enough pixels around on VGA and SVGA screens for effects.

You can still see shameless use of banners.

As we progress into the late nineties, came the era of the first 3D games and first cgi effects in movies, and that aesthetic bled into the web (check out the links either side of the yahoo logo above).

Next up: web 2.0