Web designing techniques of the past
Hi, this is Alex. I’ve been at CreditEngine since this past April working with its array of web services. And here we have a recent move migrating all HTML templates to the newest Bootstrap version. In much of the pain of working with legacy code, I remembered an article very recently read and its title says: why do all websites look the same?
Do they? Now, this is an example from the article, but look at this two design-oriented website, Dribbble and Behance, and try if you can tell me they look very much different:
Surely you can’t. Modern websites do bare much similarities between each other.
At first I thought it is the frameworks such as Bootstrap to blame — as it gains popularity, more are more sites started sporting the default bootstrap-look — though one cannot deny that Bootstrap does raise the bar of webpage design quality and consistency to a much, much higher place than it has ever been.
I then thought back about how the web has looked at in the past (“Were they ever different to begin with?”) and I suddenly realized there were all those different ways we built the web and how it does actually make them look distinguished and not always intentionally.
In this age of 3D-printed save icons, I thought it’d be fun to share some of them, but in no way this is even close to a very-high-level overview, just a few little pieces here and there.
PSD templates and table-based layouts
There was a time when CSS-based layouts weren’t widely used because it barely existed and its implementation quite lacking. So, how did people code then? They used table-based layouts.
See how each element resides in a table cell? You get a grid-layout without the help of frameworks. It gets better too when people put not only text but also images into the table cells.
Well, they still do now, but design templates aren’t being used in the same way anymore. The workflow back then was to have the designer draw the basic design and save that as a PSD with editable text fields. You then cut up the PSD into smaller pieces, such as buttons to convert them individually into anchored links, and everything is put into a big table with defined widths and heights for each cell. And you’re done!
Thus in essence, people drew their web pages. The entire page is made up of small pieces cut off of a large picture. So of course each one looked different!
These web pages of the old times were basically just pictures with clickable areas and the trend gives rise to a few advantages:
- It’s truly WYSIWYG and pixel perfect, duh, because you’re basically just embedding images in web pages.
- Individually designed page elements. Heart-shaped buttons or anything you want is only limited by your imagination and your designers’ ability to draw pictures.
- Custom fonts in your, well, images to be embedded into the pages.
The obvious disadvantages are things like: loading pictures were slow when broadband is scarce and people dialed-up for internet; there is no layout flexibility to speak of; text cannot be selected and copied because they are really just pictures; readability is often terrible and you cannot zoom in without getting pixelated results; and it’s just plain difficult to add new contents and do maintenance.
Using tables for layout is very much akin to the evil practices of putting one character in each cell in Excel, or inserting a bunch of space for the text to wrap into the next line instead of just press enter to make the line break.
This practice very soon went out of favor because of these limitations, and if you travel back fifteen years you’ll see the web filled with articles preaching the goodness of CSS. Sites like the CSS Zen Garden appeared to showcase the possibility that lies ahead when things are done properly.
But even with the dawn of CSS, all problems didn’t just go away and I want to go on with a few problems web programmers encountered at the time and their creative ways of solving them.
CSS had no rounded corners or box shadows
When we see a box with curvy rounded corners and a subtle drop-shadow setting it apart from its background at this day of age, we are taking it for granted. But things weren’t always like this.
In the past, CSS had no rounded corners! Border-radius is a very recent addition and in the past you have to fall back to background images, which dates back quite a bit longer, to attain the same effects.
So, even after people discarded the evil practice of picture-as-webpage, we still rely very much on images as design elements. And to have custom buttons, someone has to draw the button out — including its subtle shadow.
Custom font and font-smoothing
There was also no way to embed custom fonts. So again, people had to get creative. The most obvious choice was to use images in place of text but that was bad for readability in many ways. Think screen readers.
So one thing people did is to both keep the original text, but use CSS to selectively replace them with images. This technique is called Fahrner image replacement. See that it even has a dedicated Wikipedia page.
Another novel approach was sIFR and it used Flash! Flash was thriving at the time with tons of creative energy poured into it and got heavily utilized in websites, games, and animations.
True that Flash websites weren’t very readable, had many security holes, and design and programming-wise it is not scalable at all. But nonetheless, it still was really sad to see that it has gone away and with it those highly animated and interactive websites also disappeared.
I’d be delighted to find out if you can name me a website that has all the following:
- Smooth vector animation.
- Synchronized sound effects.
- And that you can interact with the animated elements.
It’s difficult. Isn’t it? Gone are the days of great Flash websites.
Occasionally, we do see some great looking parallax effect (Sony, Apple), but often they still pale in comparison. Also, notice that they are Sony and Apple who has tons of money for this kind of stuff? It just shows how difficult it is to build highly interactive interfaces across the web now without Flash.
I digress. Now back to sIFR. What sIFR provided instead is these:
- Custom fonts, because Flash supported everything while browsers natively didn’t.
- Font smoothing, or anti-aliasing even at large font-sizes. And the OS’s didn’t do this very well.
The sIFR official demo no longer works for me, but the Coding Horror has a neat gif image, and it is magnificent.
It provided a vastly superior effect compared to default browser implementations because it was at a time the ClearType was not even enabled by default on Windows machines and when you render large fonts you get a bunch of zig-zagged mess. But of course, these text-replacement techniques all went the way of dinosaurs when the OS caught up on font-smoothing support and @font-face got popularized.
