 |
| Responsive Web Design Is Growing Increasingly Popular |
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 |
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.
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.
 |
| 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. 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 sence of elegant simplicity to your design.
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!