The Evolution of Web Design

Responsive Web Design Is Growing Increasingly Popular

I recently redesigned websites for 2 clients, coincidentally enough both were located in the same area and both worked in the same sector (timber products). Both also had existing websites that needed overhauling but what was even stranger was what I discovered while doing my preparatory research. Both companies still had their very first websites online, (separate to their more current ones); they were both a major blast from the past with one right from the very early days of the internet in the mid 1990's, almost 20 years old! 

It was amazing to see how far web design has come in the past 20 years and I thought I just had to share. While browsing through the old websites I noticed some major differences between websites now and then, which I feel perfectly demonstrate the evolution of web design in the past 20 years. Here's the low down...

Image Quality

Poor image quality visible in old website image

What passed for acceptable image quality in the early days of web design was a lot lower than today but we have to remember that digital cameras were not commonplace until the late 1990's. This meant that a lot of images online were initially taken on a film camera before being scanned into a computer in order to be digitized. And even when digital cameras were being used to take picture the megapixel quality was generally only 1 megapixel or even lower!

Mailto link Vrs. Contact Form

Sample of Contemporary Contact Form 

I had almost forgotten about the old mailto link, which was once the standard for contacting someone online via a website link. The mailto link allows users clicking a link in a website to send an e-mail without first having to copy the destination e-mail address and open an e-mail client. Test a sample mailto link here. Send Mail

It is now generally obsolete, mainly due to it's vulnerability to robotic address harvesting resulting in the spamming of the specified email address.

Online forms are now the standard for allowing website visitors to contact a company or make orders online. They are much more secure than a mailto link as the email address is not in the actual HTML code but rather stored in another file, generally PHP, on the websites server.

On the left is the contact form on the new website which includes features such as form verification to check validity of content like phone numbers and email addresses as well as ensuring all required content is included. All of these features are of course now standard in website contact forms.

Static Menu Vrs. Dynamic Menu

Old Website Menu Creating Using an Image Map

Modern Website Menu Created using HTML Text and CSS Effects Only

Back in the early days of web design there was no a:hover scripts or drop down menus used and in order to create a menu which would stand out web designers used a single static banner and menu image which was then converted into usable hyperlinks using html image map coordinates. The image map technique is no longer used for menus, possibly due to their inability to be indexed in search engine results as well as images being slower to load than a menu made up of html text and css effects. Image maps are not obsolete however, and there is still a use for them in certain situations.

Single Images Vrs. Image Galleries

Sample Image Gallery From New Website

Scripts for image galleries, especially ones with transition effects, are admittedly complicated but thanks to the hard work of lots of talented (and generous) programmers there are now a wide variety of freely available image gallery scripts in a variety of coding languages. However, this of course was not the case back in the early days of the internet and our old website was a prime example where an image gallery would have been ideal but rather 4 separate pages, as seen below, with lists of images were used instead. (click on an image to view full size)

Static Map Vrs. Google Maps

This Static Map Was The Standard On Website Before Google Maps

Google Maps for mobile is now the world's most popular app for smart-phones and is a standard feature on almost all business websites. It is almost hard to believe that it was launched just 9 years ago in 2005, which of course means it was not available for early web designers. Our sample old website, was no different and in place of the unavailable google map which we know and love was a simple static map with the business location marked out. 

Along with the actual address listed in text, this static map is adequate enough to inform a potential customer where it is. Alongside all its numerous features, where a google map really trumps the old static maps is its ability to offer directions to a business location from anywhere. After all, what good is a street address if you don't know where the street is?

The Business Listed And Marked On A Google Map

Static Website Vrs. Responsive Website

Responsive web design is a relatively new evolution within the world of web design, with Ethan Marcotte first coining the term in 2010 before it was listed as #2 in Top Web Design Trends for 2012 cementing its place as a new standard for web design. If you didn't already know a responsive web design adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images and CSS3 media queries. Test out the fluidity of the new Grogan Timber Products website here. Even before responsive web design and CSS were around many websites were designed within complicated html tables in order to structure the website's layout. 

The problem with this approach was that, depending on the screen size of the viewer, or even the browser being used, a website would display differently with content being cut off or side scrolling required on smaller screens. The best way to minimize the risk of this happening was to simply centre align all content, as we see in a snippet from old website below. This had a follow on effect with regards content, as we see next.

A Webpage With All Content Centrally Aligned

Layout and Content

As mentioned above centrally aligning all content or using tables for layout were both common structural techniques in older websites. Another approach, visible in lots of older websites, was to left align the entire site to ensure content was not cut off or that side scrolling would be required. The negative being that on larger screens back then, or on normal size screens now, the website layout looked lopsided with a large part of the screen left blank with all the content squashed into one side of the screen. One more technique used on older websites, which I unfortunately remember struggling with myself, was frames! The less said about these the better, and thankfully this is another old web design approach that is now obsolete.

An Old Website Layout Using Frames

A noticeable side effect of all these early approaches was the way content was presented. Older website commonly used just one or two columns to display content with a footer section also a rare occurrence. Text and images were displayed linearly, unless tables were being used, with the css float effect not available to web designers back then. 

As well as the layout of the content being different in older websites, the content itself was also different on certain pages, such as the classic "splash page". Although not a feature of the old website of my client, splash pages were commonplace back in the early days of web design and generally featured a large image (often animated) or tacky effect/animation on screen before offering a link for the viewer to then "Enter The Website". Nowadays the importance of grabbing a viewers attention early, content for SEO and the 2/3 click rule to guiding the customer to where they want ASAP have all put an end (almost) to the days of the splash page.

A Sample Splash Page From An Old Website

Consistency

New Website Layout Is Consistent Across All Pages

The final major difference I noticed may not have been as obvious to you. But, as a designer, I like to think I have an eye for detail and things like images at different sizes, differently aligned text, fonts at different sizes or colours or pages within the same website having unnecessarily different layout stick out like a sore thumb. Have a look at the old website again and see if you spot these inconsistencies now.

While getting nostalgic as part of my research for this article I also found some old website with different coloured or patterned backgrounds within the same website which in turn led to different coloured body text. This "design approach" makes a visitor think they have gone to a different website when they click on a link and made it hard to refocus on text when the colour of it keeps changing. There was also no attempt to achieve a particular design style in a website like there is nowadays.

Consistency within font styles was also generally taken for granted back in the early days of web design with the 3 font rule of design nowhere to be seen. The 3 font rule being 1 font for headings, another for body text and (if necessary) another for highlighting key/unique content. This is a good rule for any design project, not just for web design, and if you don't already implement it I recommend trying it as it will add a sense of elegant simplicity to your design. While I'm handing out tips I must also note that the best advice when designing a website is to always, always follow the web design process.


P.S.
While researching for this article I came across this little post on a similar, but more tongue in cheek, topic. The post is funny but the comments are classic, enjoy!