Pages

Sunday, August 28, 2016

WayBack Machine: 3 Sites, Then and Now

Amazon.com
The content on Amazon has stayed the same over the years, they've just added features. Style wise, they've gotten rid of many of the rounded borders and their outlines. The content has also been spread out more in the 2016 version.

In the 2016 version, there isn't as much text, which makes the site easier to digest. Their code has obviously changed between these versions, so let's check out the differences.






This is what their code looked like then:
<a name="top"> <!--Top of Page-->
</a>
<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr align=center bgcolor="#FFFFFF">
<td>
<a href=/web/20000229110136/http://www.amazon.com/g/v11/nav/tabs/top-nav.map/ >
<img width=590 height=75 border=0 src="/20000229110136im_/http" >
</a>
</td>
</tr>
</table>


And here's what the same thing look like now:
<img src="/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-1x_optimized._CB29559;
<!--[if IE 6]>
<style type="text/css"><!--
#navbar.nav-spirte-v3 .navsprite {
background-image: url{/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/G/01/gno/sprites/nav-sprite-global-sprite_bluebeacon-v1._CB327533;
}
--></style>
<![endif]-->
<!-- -->
<script>
(window.AmazonUIPageJS 7 AmazonUIPageJS : P).when('navCF').execute(function() {
(window.AmazonUIPageJS ? AmazonUIPageJS : P).load.js('/web/20160616140023im_/http://images-na.ssl-images-amazon.com/images/I/01o2nt7QnvL._RC|71seGE;
});
</script>

As we can see, the code now is much more complicated to accommodate for different web browsers, when back then compatibility wasn't much of an issue because there weren't many options in the first place.

BestBuy.com

Back when the internet was brand new and connections were slow, the goal of web designers was to design a website that had a small file size. This led to webpages looking fairly empty, as we can see here with Best Buy's website in December of 1996.
Now, in 2016, connections are much faster, so we have more content. This is an an obvious improvement from the old version.







Once again, the code for the old site is much different than the updated version:
<p align="center">
<img src="lites3.gif" alt="Best Buy - Just the Store You've Been Shopping For!" width="599" height="47">
</p>
<td valign="top" width="200"><a href="insert/">
<img src="Insert.gif" alt="Weekly Best Buys" border="0" width="178" height="96">
</a>
<p>A sampling from our weekly
        circular. Check it out!</p>
</td>

In the current version, all of the code is completely different, here's what it looks like:
<div id="header">
<!--<![endif]-->
<a href="#headerskip" title="Skip to content" class="skip">Skip to content</a>
<div class="header-inner">
<header>
<div class="secondary-fullbleed-wrap">
<div class="secondary-wrap">
<div class="value-prop"><a href="/web/20151009082825/http://www.bestbuy.com/site/misc/expert-service-unbeatable-price/pcmcat345300050032.c?id=pcmcat345300050032" data-lid="hdr_shi">Expert Service. Unbeatable Price.</a>
</div>

ChefBoyardee.com
The Chef Boyardee website has also gone through huge changes. The old version is extremely cluttered and hard to look at.
They've cleaned up the website a lot and made it easier to navigate.









Here's the code for the 2003 version:
<embed src="/web/20030801082330oe_/http://www.chefboyardee.com/flash/home.swf" quality="high" bgcolor="#ffffff" width="770" height="500" name="chef" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">

I found it interesting that for their website they just embedded a flash file, but in the 2016 version, it's much different:
<a href="/web/20160405091719/http://www.chefboyardee.com/" class="brand"><img src="/web/20160405091719im_/http://www.chefboyardee.com/assets/images/common/chef-logo.png" alt="Chef Boyardee"></a>
            <div class="main">
                <div class="inner clearfix">
                    <a class="toggle-main-menu" href="#"><span></span></a>

Some common themes I noticed between these websites is the use of tables in the older version. As the languages used to create websites are updated, you can create much nicer looking sites and even better looking code. The internet has evolved since it's creation, and it will continue to do so in the years to come.