Web Site Design Blog

Tag: JQuery
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.

April 13, 2010

A Girl From Jersey

This site was custom developed for ‘A Girl From Jersey’ creations: unique coastal gifts available for wholesale to retailers.

The Problem

When Joanne initially approached me, she had a basic site that a friend had created using WordPress. She did not feel the site was a true representation of the quality of her work and did not have the level of professionalism she wanted to portray her business. It was also difficult for her to maintain as she only had a few pages of content but needed the ability to upload multiple photos into various categories and themes. The way the site was set up was not optimized for the photo gallery type setup she needed. I figured I could give her WordPress template a makeover and install a photo gallery plug-in. After researching plug-ins for galleries I did not find the perfect one I was looking for. Specifically we to be able to upload products and associate multiple categories and themes to each photo. On the front end we wanted visitors to be able to browse a category and have the photos separated and sorted by theme and when browsing a theme, separated and sorted by category. Seemed simple enough, however I never found what we were looking for.

The Solution

In thinking about the design and needing to move forward with the project I decided to build the content management system myself.

The Result

Dear Ross,

Thank you so much for all of your efforts on my new website. The process has been enjoyable from start to finish. I’ve been able to express my present and future needs to you, which you have taken and turned into a beautiful website that meets my current needs and can expand as my business does. I don’t know which I appreciate more: the website that is visible to all visitors or the part that only I see. As an artist/manufacturer, I get paid for the produts I sell, not for the number of hours I put into maintaining my website. So the easier it is for me to upload photos of new work, the sooner I can get back to painting. And the behind-the-scenes tools you have given me to maintain my site do just that. They are wonderful!!! I didn’t need to take classes, buy special software or enter into a 2-yr commitment; you’ve made updating my site as easy as sending an email with an attachment!! I look forward to using your services in the future as my business grows and will gladly recommend you. It has been a pleasure! Thank you!

Joanne Murphy
A Girl From Jersey

September 26, 2009

Nature Song 2009

naturesong.net was redesigned in 2009 to address some issues with the shopping cart, integrate a reseller login so resellers can log in and purchase CDs at a discount and NET 30 payment terms and generally update the look and feel of the site.

The shopping cart and content management system is completely custom. I decided to create a custom system for this site because I had a clear vision of how it should work. The owner, Bill Leverick, wanted to be able to easily update the CDs available for sale. I knew there were off-the-shelf shopping carts and content management systems I could probably have used or customized. Because these products had an ‘audio sample’ component to them that we needed to attach and be able to associate audio files with multiple products, I decided to build it myself. The site integrates PayPal Website Payments Pro for it’s merchant service provider and the UPS API to get shipping information from UPS in real-time for orders with quantities above 2 CDs. The AJAX overlay for each product uses the jQuery framework to handle the JavaScript effects.

In retrospect I am happy with my decision to go completely custom with this site. It allowed me to develop exactly what the client was looking for without excess functionality that he didn’t want or need and might have confused the process. It also allowed me to address his fine-tuning requests quickly and not have to compromise because of an off-the-shelf software limitation.

Here is a quote from the owner:

I just logged on to check out the new NatureSong site that you activated today. I am very pleased not only with the graphics, but with the built in ability for me to make necessary changes to the products. You have done a great job and I would heartily recommend you to anyone. Please feel free to use this site and my other web site, Cape Cod & New England Gift Show as examples of your work.


Bill Leverick

View Project