Advertisement
General

Learning from Historic Web Archives

by

There are a plethora of resources available to aid in your success on the web. From countless analytics and SEO applications, to thousands of articles and reports from our peers. For anyone who runs their own website we can use these resources to improve and fine tune the online experience we give our visitors. One oft-overlooked resource is the Internet Archive, which contains years of fine-tuned updates and improvements from the world’s biggest and most successful websites - and we can learn from them.

How can we have critical thinking without being able to quote and being able to compare what happened in the past?

Brewster Kahle, the founder of Internet Archive

What are the Internet Archives?

As you would expect from any kind of historial record, the Internet Archive houses information dating back years. But there’s a twist; these records are cached snapshots of websites, so you can actually visit webpages such as Google from as far back as 1998. This information is priceless (not to mention quite humorous) and it's astonishing to see how design has changed over the years.

Check out this example from 1998 when Google was still in Beta!

historic-archives-google-1998

All these amazing resources can be found on the waybackmachine over at archive.org. Simply type in a URL and start exploring. You can have a lot of fun seeing how some of your favorite sites have developed over the years (or am I just a huge nerd?) Regardless, a lot of time, research and money had gone into improving and tweaking these websites and we can observe this information for our own benefit.


How can we Learn From These Records?

A people without the knowledge of their past history, origin and culture is like a tree without roots.

Marcus Garvey

We are always building on the knowledge of others, and I can’t think of a better place to apply this ideal than in the field of web design. By analysing the archives available to us we can see (through a certain amount of assumption) why certain decisions and changes have been made. This can help to not only see the natural progression of a website, but better understand the development process involved in bringing something like Google to what it is today.

By comparing the progression of many websites we can also see how design trends have changed over the years. Currently flat design is "in" and you can see how Webdesigntuts+ itself has changed to embrace this style.

historic-archives-webdesigntuts

Leveraging archives is essential in learning from past developments and mistakes, so let’s take a look at a process I often use.

Step 1: Choose a Website

It's important to choose a subject to begin your research, preferably within the same field you wish to improve on. If you run a blog then choose a successful blog in a similar niche, if you have an online store then learn from the eCommerce masters. Of course, these are just examples.

When you encounter these sites as they are today it's easy to think that they popped up from nowhere with overnight success, but the Waybackmachine will tell a different story. With archives we can begin to see the years of hard work put in to achieve their current position and their design progression along the way. So just how did they do it?

Step 2: Follow From the Very Beginning

I will use play.com as an example here. Being the desirable URL that it is, there is data running back until 1996. However, I came across its first instance as the eCommerce store it is today on 7th August 2003. The first thing I noticed is the iconic look and feel Play have maintained for years until being acquired by Rakuten back in 2011, at which point it underwent a much larger update and style change.

As we look at each incarnation of the site we must also remember that there are always the technological limits of the time at work, such as cross-browser support and reduced speeds.

Step 3: Analyse the Progression

By comparing how Play started to what it is today, you will find that the changes have been drastic. Let's drill down and examine areas such as user-experience, functionality and aesthetics. I have found four snapshots for the large updates made between 2003 and 2013. So let’s take a look and begin to understand how each change has contributed towards the next.

2003

historic-archives-Play1

This is the very first version launched in 2003. Built with tabular markup, which at the time was common, and has a simplistic layout. A unique style has been developed to give strong brand identity. The large area in the center has clearly been chosen as the prime spot for internal advertising whilst the search bar is given little weight on the page.

2007

historic-archives-Play2

Four years later you can see from the number of categories that the product range has grown substantially. The main navigation has managed, however, to maintain the same format with a much needed design upgrade. You wouldn’t think it today, but heavy bevels were actually pretty trendy at one point..

The old center piece has been moved down to make way for a more prominent advertising section. Not having removing it completely indicates that it was actually doing well, but it was felt the area could be put to better use.

2010

historic-archives-Play3

Again the catalogue of products has expanded. The menu has grown substantially, becoming left justified to better fit all content. The original center piece (after losing its prime spot) has fallen from grace, becoming second best to the more prominent feature, ultimately being removed completely.

The search bar has finally been given more weight on the page, most likely due to analysis, perhaps heat maps and user feedback highlighting its importance. You can also see how the way people interact with a website has changed as on site search became more popular.

2013

historic-archives-Play4

Finally we have play.com today; this is by far the biggest update of all. The side bar has been removed completely and there is much more whitespace. The center piece has now stretched to the full width of the page after proving for years that it held an important role on the page.

The style of the site has changed completely and it has almost been totally rebranded. Some familiar colors remain, however, and it is easy to see that we are still on the same website. The search bar is now much bigger than before and a user trend has clearly been noted for this to happen.

Step 4: Gather Your Results

By looking at each step towards the final and definitive website we can take a lot away to learn from. We can see that search has become a crucial part of eCommerce, user interaction has changed and from this I can begin to make accurate assumptions. I believe that a user will already have in mind what they are looking for before they even get to the site, heading straight for the search bar. For this reason they will become relatively blind to most elements on the page. By making the main advertising section massively more prominent it can better catch a visitor’s eye, even subconsciously.


Bringing it all Together

Now that we understand the benefits of learning from archives we can add it to our arsenal of tools and resources available to us. By using archives alongside other tools we can uncover even more information.

With Alexa.com we are able to track the traffic of a site over the course of the last two years. By comparing this to archives we can often observe correlation. Often this can be a way to confirm our analysis of a page, be it good or bad. Sometimes a change could have had negative effects on traffic and we can learn from this not to make the same mistakes.

Don't Jump to Conclusions

When seeing correlations between Alexa and Internet Archives you must be sure not to jump to conclusions. The demise of MySpace was not due to a design change, but the rise of stronger opposition.

Do your research in order to make sure your results are accurate.


Case Study: Disqus

Disqus is an awesome commenting system used across millions of websites (includiung Tuts+). Over the last year its popularity has seen huge gains. This would have been for a number of reasons, but at the time of its rise in traffic it just so happens that a large design update was made. This has surely contributed to the rise and we can begin to question why.

historic-archives-disqus-chart

The Old Design

Here is the landing page of the site back in 2011.

historic-archives-disqus1

You have just 10 seconds to engage users and convince them to take a closer look.

Jakob Nielsen

The overall design is solid, but the actual product is not well displayed. Without reading into it you would not have a clue what Disqus is or does. Dr Jakob Nielsen, a renowned usability expert noted that you have just 10 seconds to engage users and convince them to take a closer look. This means you need to get your initial message across as quickly as possible in order to convert visitors, here I am not convinced. Bring in the new design.

The New Design

Instantly you can see a huge improvement in aesthetics, the design is clean and simple.

historic-archives-disqus3

The product itself is now clearly understandable and has been given a prime spot on the page. From this, users with no clue about Disqus can better see that it is an onsite commenting system. Although the previous graphic looked nice, it held little meaning and was rather distracting from the purpose. The call to action “Get this on your site” is also much more prominent now and better guides the eye towards it.

I believe that from this there is clear evidence that a design change has contributed towards the increase in traffic and a decrease in drop rate. We can take this information and use it as a guide towards our own decisions when designing a splash page or advertising a product online.


Conclusion

From these examples we can clearly see the benefit of learning from historic archives. They can form a crucial part of the research process in order to gain inside knowledge of the most successful websites around today.

It is important to do your research and use Archives as a tool alongside all other resources available. Remember that you can only make assumptions here and nothing will be hard fact. Archives can compliment your arsenal and improve the quality of your research.

I hope you enjoyed this article and thanks for reading!

Related Posts
  • Code
    Scaling & Caching
    Trim the Bloat: An Introduction to Keeping WordPress HealthyTrimthebloat
    As site owners or developers, we have a responsibility. Specifically, we're responsible to make sure that our site is usable for our visitors and that our content can be easily consumed. To do this, we rely on an array of plugins and themes that come packed with every option the creator could think of and then some more. We can do better. We should do better.Read More…
  • Web Design
    eCommerce
    E-commerce for Mobile: Making the Most of Your SiteMobile thumb
    In this article we’re going to address some mobile e-commerce hurdles. I'll break down a few of the most important steps to take account of in preparing an e-commerce site for mobile access and offer you some advice based on my experience.Read More…
  • Computer Skills
    App Training
    What are Wikis, and Why Should You Use Them?Wiki icon
    You've surely heard of wikis, but do you know why you should be using one in your company? Here's everything you need to know about wikis, what they're useful for, and why they're better than just a standard internal website.Read More…
  • Web Design
    S.E.O.
    The State of SEO in 2014Seo retina
    Back in December 2012, we published the first article of our SEO for Web Designers series. The fundamentals we covered still form a great basis for the optimization of a website, but because of some changes to Google’s algorithm, I've decided to give you some additional advice about the application of these techniques.Read More…
  • Business
    Sales
    The Ultimate eCommerce Guide to Boosting Your Black Friday SalesPreview black friday ecommerce
    The festive season is big business for all retailers, and Black Friday kicks it all off with a bang. This is especially true for online eCommerce traders who have learned to make the most of the Black Friday frenzy. In 2012 online spending on Black Friday rose 26% compared to 2011, hitting over $1 billion. With the rapid rise of mobile commerce, this is a trend that's set only to continue in 2013.Read More…
  • Web Design
    User Experience
    What Stops You Buying High Value Goods Online?Graph retina
    Recently, as part of a wider optimisation study of how we operate our business at Cutting Edge Knives, I posted up a short survey on Twitter. I specifically asked why people abandon shopping carts with expensive/luxury items in them and what (if anything) would encourage more people to complete their purchase.Read More…