My History with Outdated Web Design Tools, Technologies and Solutions

Posted on Updated on Other by Adam Laki

I’ve just finished reading Resilient Web Design from Jeremy Keith, which partly about how the web developed into its current state. There is a lot of history in our field despite its age. After finishing, I started to think about what technique I used, which now is partly or totally obsolete.

If you want to read an entertaining web-related book, give a try to Resilient Web Design. It is a short but detailed explanation about the past and the current state of our craft. You can get it free. Thank you, Jeremy!

I’m not the most prominent veteran in web development (or web design), but I’ve seen some things. I started to learn it when the floats replaced the tables in layouts. Unfortunately, this doesn’t mean that I didn’t have to work with table layouts; I had to make modifications in some legacy projects; it was a pleasure.

The web is changing each day. A solution, a tool or a method that is hip today, can easily be less desired six months later. In this small list, I tried to collect those things (not in chronological order, in a wider time span) that I used at some point, but today they are obsolete.

Table Layouts

If you are older, you know what the table layout means, a solution that was misused. The original goal of the tables was to display classical data not to create meaningless layouts.

Building layouts in this way was like to solve a puzzle, which was made more difficult by the cross-browser problems. With Internet Explorer, the life of a web developer wasn’t easy.

If you feel sad that you missed this type of design, fear not. You can get almost the full experience with building a sophisticated email template.

cufon.js

Cufon.js was a tool that generated custom fonts in a canvas format. It was a strange phenomenon to see a font in an “image” like format. You could select and copy its content, but it was weird. With the retina displays, it started to be useless, and fortunately, the @font-face came into the picture.

Rounded Corners with Images

A long day ago, we didn’t have the luxury of border-radius. If we wanted a “sophisticated” design with rounded corners, we needed to use images: separate ones, a different one for each corner with extra markup.

You had a container <div> with a relative position which had four sub-elements for the corners. The corners were positioned using absolute values. Like a puzzle, again…

This method was wrong in so many ways, but still, it meant more at that time. You could do something which was hardly possible before.

Pixel Perfect Design ( and Skeuomorphic Design)

The pixel-perfect design thinking comes from when we thought that the web is like the print media. A fix sized canvas with for the current and most widespread screen resolution (800px, 1024px, 1280px at the time). The web never was a rigid medium, but it was easier to handle like it was.

With the first iPhone, there was a paradigm swift, and Ethan Marcotte came up with the responsive design concept and changed everything. 

To make a real project the same as the static design (in a pixel perfect way) today is a strange idea, and I like this very much.

Another thing here is the skeuomorphic design, which was a big trend due to the iPhone. The basic concept was to copy the real-world objects and try to style our objects (a calendar, icon, calculator, anything) to be similar (in detail). It was a nice idea, and it can still serve a purpose in apps.

Macromedia Tools

Macromedia was a fresh company with design and code-related tools like Fireworks, Dreamweaver, and Flash.

Fireworks was a tool that was useful for UI design. It was a vector-based designer with a modest toolset (compered to Illustrator). Back then, the lack of its functionality was seen as a disadvantage, but today we look differently at the specialized tools.

Dreamweaver was a WYSIWYG web page editor where you could make static pages in a hybrid way. You could code it or “draw” it. It was the first IDE for a lot of us. Today it is still supported and developed. Of course, it is a different tool now. You can try it if you feel like it.

In Flash, you could make flash-based animation or websites (as mentioned previously). Almost every browser had the flash plugin in the background. Later it was killed by Apple when it started to drop the support for it. Today the program still working at the name of Adobe Animation if you want to create cool JS-based animation.

Flash, Action Script

Back in the day, JavaScript had a competitor named Action Script. With Flash on the web, we could make interactive, animated front-end something that was rare at that time. 

Using Flash, we could make complete websites like it was a keyframe animation where the interactivity was handheld with action script (which we could use to jump to different states in a keyframe format). 

The result of this was a closed object, so the SEO and accessibility were a nightmare.

YUI and jQuery

YUI was a free, open-source JavaScript, and CSS library for building interactive web applications. With this library, we could achieve our goals more manageable. It was a toolbox to create fascinating and cross-browser solutions.

jQuery was YUI’s biggest competitor, which outlived it. jQuery is still a live project which has a purpose, but today there is a lot more front-end JavaScript framework with a different architecture.

jQuery can be useful today if you want to develop fast (in case of a prototype), or the plugin is available in a legacy project. jQuery’s core features today are available – which made it so great – in most of the browsers. 

CSS Prefixes

The CSS property prefix is still a thing because of the automated prefix generators make this code to achieve broader support in different browsers.

The code looks like this:

.btn {
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

The basic concept is the following: if a browser supports an experimental feature, then you have to use a prefixed property name.

The goal of this method was to test a new feature but went wrong because everybody started to use it in production. Today this way of new feature introduction was dropped by the vendors, but we still have a lot of bloat because of them.

Disclaimer

I didn’t intend to keep the legacy of this stuff because some of them were awful. But still, it is our history; if you are new, it doesn’t have to mean anything to you, and you don’t need to know about them. For me, it was a bittersweet remembrance. Thanks for reading!

Need a web developer? Maybe we can help, get in touch!