Using the retro style in web design?

The last two decades have seen immense changes in web design. One of the design trends in the 1990s was to fill in every part of a web page that wasn’t occupied by text with animated gifs. We don’t see much of those anymore. Similarly, gone are most of the sites with long scrolling pages, crammed with text and images not associated with a novel’s worth (and, of course, the necessary animated gifs).

The disappearance of items such as these occurred as a result of technological advances, the results of research, or simply because of changes in style and taste. Technology made it possible to use new and different methods. Therefore, animated gifs were changed to Flash-type animation. And research showed that information able to fit on a single screen, with less content and a balance of helpful images and text, was easier for a reader to access than five thousand lines of information on a single scrolling page.

The last element, trends in style and taste, is just as (if not more) responsible for changes in web design than the other two. For example, people find the rounded corners of content elements to be visually appealing. There is no research to show that this corner style improves comprehension. And although it was made possible by technological advances–;CSS or JavaScript–;they were not a “technological advance” by any means. Therefore, these rounded corners are a trend, seen on many websites, and indicative of the Web 2.0 movement: a movement in design and style as much as a movement in website usability.

And why not? After all, web design has a lot in common with other types of design, like product design or fashion. Each of these trades follows or creates trends in the design of their respective products. Fashion designers will try to capture the latest trends in style through the clothes they create. Product designers are also influenced by trends in popular culture when creating everything from furniture to automobiles.

Present in these other disciplines, fashion and product design, is the influence of earlier styles and trends, the retro movements. Designers often go back to what was popular in the past when creating future designs.

Web design elements from the recent past are exactly what retro design appeals to. In fact, retro is more concerned with the recent past than with other periods. And technology, especially technology heavily influenced by culture, is perfect for being resurrected twenty years later. We see t-shirts with slogans from old video games, like the Oregon Trail t-shirt (“You died of dysentery”), or t-shirts with characters from the Atari 2600 game.

Think of the spinning three-dimensional ampersand, the eternally present animated gif next to most “email me” links on pages created in the early 90s. Today it’s considered old-fashioned, clumsy, and tacky. The ampersand itself is already part of the common vernacular, so it’s not a huge leap to see this particular element as retro.

Or what about flashing banners? They used to exist as headers, footers, and even vertical skyscrapers. While a page was loading, they would flash in bright shades of neon green, orange, and pink. The designers assumed that since they were flashing and noisy, users would automatically be drawn to them. However, in the late 1990s, researchers coined the term “banner blindness,” the tendency for viewers to ignore these banners because they quickly realized they didn’t contain relevant information, thus rendering users blind to they.

There were also a lot of random items that fell out of use over the years. Black and yellow construction icons were displayed when a page had not yet been completed and had yet to be published. There were image exchanges that surprised users with a clever graphic that played hide-and-seek. There were also image maps that linked to pages relevant (sometimes) to the part of the image being linked to. Items like these were common in the recent past, but have not been used (for a purpose and by professional programmers) for several years.

And yet, at the same time, these elements are very much a part of current web design trends, but just in different forms. We no longer see animated gifs, but we do see Flash images, which rotate, vibrate or pulsate in some different way. They look more polished perhaps, more professional, but they are a new way of doing what animated gifs have already done.

Flashing banners are also often seen on websites today. The ads, like the animation elements, look significantly more polished, but they’re still in use. Gone are the bright, vibrant headers, footers, and skyscrapers, replaced by high-quality short videos, animations, or static images. But what these banners have today that those of the past did not have is context. Many adware populate pages based on content information and then produce and display contextually relevant ads. So where in the past users were blind to ads because they knew they didn’t contain relevant information, now they read ads because the information is relevant.

As for the rest of the elements, they exist in one form or another (except for the “under construction” signs – we’ve gotten smart enough not to post incomplete pages). Image exchanges were one of the first interactivity mechanisms, giving the user the illusion of physically manipulating the site. There is a simpler method when using onMouseover in CSS: change the color of links or the appearance of images and menus when hovering over elements. And you see even more interactive versions of image maps in some Flash animations.

But the true spirit of retro is not simply in the use of elements with past ancestors, but in bringing those ancestors back. After all, any type of design can have some origin. Today’s cars are loosely based on cars from the 1950s. They all have a few things in common. It is when the designer deliberately builds on those older designs when creating contemporary designs that retro happens. It’s when designers try to make something look like something older.

What retro doesn’t do, though, is use the older design techniques. Retro, after all, is not an appreciation of the recent past, but a recovery of the recent past. In the southwestern United States, architecture similar to pueblo or adobe-style architecture is very popular. But architects don’t use adobe or beams in their building; they use frame and stucco. Similarly, a fashion designer basing a dress on the designs of the Roaring 20s would not use cotton, wool, or silk, but rather nylon, spandex, or a combination of synthetic and natural materials.

So while the above web design elements have evolved and morphed, they have yet to be used. And why and where would they be used anyway?

Legacy web parts–;retro elements–;point to the time when they were used, and to the age of both the users and the technology. Just as Atari 2600 game character t-shirts remind today’s gamers of their roots, these items from the past remind us of what the web used to be: a simpler place with so much potential. They help us relive or remember the period when it was okay not only to use tables, but also to show table borders.

Also, the retro design is used to create a sense of distant nostalgia. This is often mixed with a dark sense of humor about the serious or complicated episodes of the time we are remembering. The real and serious threat of nuclear annihilation in the 1950s was repackaged as “atomic cocktails” in later decades. Not that the threat didn’t exist, but now it doesn’t. So, drawing on the lessons of other types of design, we can assume that the discarded elements of the past will be used again, but they will be a different instantiation than before. The animated 3D ampersand will appear, but not as an animated gif. Instead, we’ll see a new version of the old design (perhaps a flash animation of a 3D spin @?). It may look tacky and cheesy, but that cheese is the main reason for using it. The designer will choose to disdain convention for a playful throwback.

Also, perhaps the flashing banners could be implemented again. While still unattractive, flashing neon lights can provide cutesy to the right website. And if users expect such kitsch, banners become relevant and banner blindness will no longer occur.

There are dozens of elements to point to as examples of what we’ve left behind as we watch the evolution of the web: horizontal ruler lines, hit counters, large rainbow-colored font, and so on. Not all will recover, but if web design is anything like its counterparts in other trades, some will recover. At a minimum, it seems important that we remember where we came from, because these elements become a link to where we have been and, at the same time, suggest where we are going.