SolesUnited Launches

“You’ve got to find what you love, and that is as true for work as it is for your lovers. Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work, and the only way to do great work is to love what you do.”
— Steve Jobs

Steve is hitting the nail right on the head right there, you gotta love what you do. I’ve written about that sort of thing here before so I don’t think it’s any surprise that I should be using the above quote. But today it applies a bit differently. For some time now I have been working on creating non-profit websites. Creating sites for these kinds of organizations is typically a very creative, passionate experience. The people who create and run these groups are typically emotionally invested in their projects, this makes for a challenging and very rewarding project. Many of them also really understand the power that a great website can have for them: People are donating online, so a well executed website can make all the difference in getting their work out to the public and getting funding back for the cause.

It all started with NESEI, which really opened up my interest in working for this industry. Next came AVODAH: The Jewish Service Corps which I did as a freelance project. Both of these projects I did working closely with Aaron Gerblich, one badass internet marketing/account manager/project manager ninja. But recently I got the chance to work on a large scale project that Crocs has launched.

What’s the Project?

It’s called SolesUnited: The program allows you to donate your Crocs to be recycled into brand new shoes which are then shipped throughout the world to needy places. They can be donated at participating retailers’ locations, or by mailing them in. This is a great program and I had the chance to work closely with the SolesUnited team to develop their website while working at Crocs.

Marketing had already put together an excellent visual presence for the “brand”, I had the task of creating a simple, straightforward website that would convey the simplicity of the program to anybody. Using much of the collateral stuff that was created, I assembled an xHTML valid, jQuery enabled site, of which I am proud of.

It’s All in the Details

Although the site is very simple in many ways, there are many layers of complexity beneath it’s subdued exterior. I created a neat little Flash animation on the homepage, but if you turn off JavaScript you will find that same information is available to you without the Flash plug-in or JS turned on. This is basic stuff, but surprisingly, people seem to skip the “graceful degradation” step. I used SWFObject for that Flash instance, while the video on the page is using the Flash jQuery plug-in. This was mainly so that video would not be loading as the user viewed the page: This site launched in conjunction with an episode of “The Celebrity Apprentice” which introduced the program to the public, so we wanted to be prepared for an avalanche of hits. For this reason I wanted to make sure the site ran as quickly as possible, and one way I figured was to not request the video unless somebody actually wanted to watch it. I also had compressed my CSS with Art of Scaling’s CSS Minifier (the best CSS minifier I have found, I love it), packed all my jQuery with Packer, and then shrinkwrapped it up to cut down on HTTP requests via Dojo’s Shrinksafe.

The amount of freely available tools for web design and development constantly blows me away.

jQuery Throwdown

All throughout the site I implemented little jQuery gems, but didn’t rely on it. A perfect example is the “How it Works” page, on which there is a FAQ section on the right hand side. I wrote a small piece of jQuery that collects the elements and puts them in expandable/collapsible boxes. This allows for easier reading, but only is activated if jQuery can run, meaning JS is turned on. Not only that but the first element expands after being collected, hopefully catching the user’s eye and show them that they can open and close to elements.

Along with that example of progressive enhancement, smaller examples abound:

• Instead of hard-coding the class attribute onto my main navigation to show when the user is on a specific section, we do it dynamically by selecting the correct element by it’s number. It’s not a beautiful solution, but it avoids me having to make that an editable area in my template.
• The “Tell A Friend” form is animated and validated, but turn off JS and it actually will take you to a regular page with the same form on it where you can submit your information.
• I used a small checkmark on visited links, but what if an image is inside the link? Easy, implement a rule that if an a has an img in it, then add a class to remove the background image and padding
  $("a:has(img)").addClass("wimg");

Finish It!

Overall the project was a lot of work, but very rewarding. Working on non-profit sites (or just good cause websites) is so much more rewarding as a general whole than working on almost anything else. Don’t get me wrong, when it comes to building and designing websites, variety is the spice of life, but working on those special projects that bring people together, gives you a special sense of accomplishment. SolesUnited is a great program and I know for a fact that the team plans on building even more functionality into the site as the program continues to grow.

SolesUnited, don’t stop rocking!

Can’t get enough? You may be interested in these posts as well:

Crocs Homepage Update

AVODAH Launches

Moving on up, to the North side

How to Destroy the Web