Web Design Blog

May 27, 2012

Disclaimer: It’s probably not the oldest living website, but it’s pretty old.

I have been making some updates lately to a site I originally designed for a client in 2001. Naturesong.net is a site that sells CDs (and now MP3 files) of recordings from various natural environments.

2001 Flash Website

Have a look at the original 2001 Flash website. It features a little intro sequence, a poorly drawn animated cursor and I love how the frog hops around the menu. It’s fun to go back and see how things have changed from then to today. It is ok to make fun of my own work.

Rounded Corners in 2001Back then it was cool to build sites using Macromedia Flash (now owned by Adobe). This site was probably designed using Flash 5. We don’t use Flash to design websites any more. Search engines ignore information inside Flash, basic browser functionality is difficult to retain (next, back, bookmarks, etc…) and it doesn’t work on iPhones or iPads. This last item was the probably the final nail in the coffin for Flash websites. As website design has matured as a discipline over the years, the focus has moved away from entertainment value and novelty to standards emphasizing accessibility and usability. Flash is generally not part of those standards although it does have it’s place in multimedia applications such as streaming video, audio and games such as Farmville, The Sims, Journey of Jesus: The Calling, Pot Farm, etc…

The Shopping Cart

The store was originally linked to a turnkey solution that called goemerchant. We basically linked the buy buttons to the 3rd party shopping cart. Somewhere along the way the client decided to drop the third party shopping cart and use his own. I programmed a custom shopping cart for the site that we continue to use today.

Custom CMS

I also provided a custom content management system for the client to manage various aspects of the site including page content, meta tags, products, sounds, customers, resellers and orders.

Edit Products

The client can manage many aspects of the website from the CMS

No More Flash (well sort of)

The audio is now fully iPad friendly thanks to the brilliant work of @schill and his soundmanager2 code. Although it does use Flash (it’s ok for multimedia… remember?) it also utilizes HTML5 fallback for non-Flash devices. There is a ton of functionality packed into this code. I am pretty sure it could cut a Coke can right in half if the situation required.

HUGE Uploads!

You can also now purchase the recordings in a downloadable MP3 format.

Mp3 Player

In order to allow the site administrator to upload huge (150+ mb) audio files I utilized another brilliant piece of software developed by blueimp called JQuery File Upload. HTML5 is used to transport large files to the server via AJAX and display detailed progress information.

Huge file uploads using HTML5, AJAX and jQuery

Huge file uploads using HTML5, AJAX and jQuery

The Design

I decided to stay true to the overall feel of the 2001 design even though the color scheme looks a little dated now. It has kind of a nostalgic kitsch quality to it. I feel the site is still attractive, usable and it still works.

But Wait There’s More!

I could go on about the details that have gone into the different iterations of this website since 2001 but I am sure you have other things to do. I thought this was an interesting point in time to give a snapshot of what a site developed in 2001 looked like and how it’s evolved over time as web technologies and my skill-sets have evolved.

If you want more information, liked or hated this post please let me know. I would be happy to chat with you more on twitter @websitedesignby, facebook, google + or use the comment form below.



Powered by Facebook Comments