The year 1994 when all began and the great era when the web we know today was born. It was the time when developers and designers only learn how to do web, collect and create a web experience from scratch - before landing pages, burger menu, Z and F-Pattern, adaptive design, flat design, eCommerce, functional animation and micro-interactions… Let's watch what we used in the past Web…

Popular Screen resolutions

800x600px

Today we can use variable fonts but there was a time when we didn't have web-fonts and only a few variations. Most usable were — Georgia, Arial and Times New Roman. But if you wanted to do something unusual and use your own fonts — that what I would call pain in the ass. `@font-face` rule was announced only with the CSS3 fonts module.

The first formats for embedded fonts were Embedded OpenType file (*.EOT) and Portable Font Resource (*.PFR). But let's talk about the three most used methods. And it could seem like these methods came from 1998 but no, I find articles about these methods from 2008 and even later years.


On the web almost always was a text pair — One font for headers, one for body text. For headers, designers often used some distinctive fonts and to do that possible — developers used images. A Designer saved a picture of the header text and pass it to a developer. Just pure image of the text — it was the easier way to implement a custom font. Sometimes when the client wanted to change a header text by themself developers used images of cutted alphabet and replaced header text to images — word by word.


A combination of JavaScript and Flash to replace parts of the text on a page with a Flash movie that represents the text. Here are the links:


There were two main libraries like Cufon and Typeface.js.

Here is even comparison of these two libraries:

We will make your website in old-fashioned way!

Back then before the `block` layout, the only way to make a layout was a table layout. It was everywhere. Using a table is a horrible idea for any layout, well, excluding of course table itself.

And it is funnier that we beat this limitation more than 10 years ago but look at your mail-box — we still using this outdated approach. Just look at the image below, I can call it "HTML Nightmare".

Web 2.0

Around the beginning of 2007, a phenomenon such as Web 2.0 began to emerge. Web 2.0 was a modern approach to the old web. New technologies, social media growth and new websites where the content was created by users and not by admins — all of these factors, created Web 2.0.

We use specific styles for buttons, mostly gradients, big border-radius, and glares. Designers loved to use PNG stickers on Web 2.0 when they wanted to tell about sales, offers or just show how awesome their website. And another Webb 2.0 feature is tag clouds — a tiny block with commonly used tags, and the more popular the tag, the larger it is.

2016
2014
2012
2010
2008
2007
2005
2002
1996

Now it’s abandoned, but a lot of websites were built on FLASH technologies.

Basic HTML technologies didn’t provide enough tools and methods for designers to express their ideas and FLASH which was used commonly to create an animation and interactive presentations stepped into the Web.

For designers who wanted to do web — FLASH websites were the breath of fresh air. Everything you can imagine was possible — from complex interactive animations to 3D.

The main source of inspiration was thefwa.com and it was an honor to add an FWA label on a website.

Sounds good, right? But what happened with FLASH then? Well, briefly it wasn’t secure, it was heavy to load, Apple effect and HTML5.

Unfortunately, I can’t provide any links to you, because you can’t open them, FLASH technology is deadly dead right now.

It’s hard to imagine right now but FLASH was a big part of the internet not so far ago — websites, games, banners and I think that more than 50% of all designers portfolio was built on FLASH.

Homepage
button

The “Home” icon was born in the late '90s but the “HomePage” button was from the beginning. During the years this button came through different phases but it's not disappeared, just hid. One pattern — obligatory “HomePage” link in the menu was transformed — now this “HomePage” link placed in a company logotype, and each website or almost every website uses this pattern.

Site Maps

R.I.P

Another thing that we don’t see now is — site map page. Like a “HomePage” button it was one of the obligatory things. Basically sitemap is the page that shows all pages on your website as a structured list.

Guest Books

Before the comments sections, it was a page on a website where people wrote their comments. And it doesn't matter if you had a personal webpage or you were a big company it was a communication hub. Guest books were made in many different technologies, even on Flash.

Before ThreeJS, GASPJS, SVG, CSS animations the only way how you could express yourself in the old internet was a GIF animation. The fanciest were spinning logos.

More cool images you can grad here on gifcities.org

Make Your Button




References

To be continued?

Let me know if you have more recalls from the past Web in Issues or make your own sections with Pull requests.

Author: Pavel Laptev