That new car smell

April 11, 2007

Breathe it in, that new car smell. Is there anything better than that momentary breath of perfection? That reassurance that yes, your hard-earned cabbage has been spent wisely? Well, I certainly wouldn't call this site redesign perfect just yet, but it's leaps and bounds better than my previous site. Come inside for more details on what's new. (caution: uber nerd-speak ahead.)

The most obvious difference, naturally, is the overall look and feel of the website. First off, I’ve transitioned the site from a faux-100% width to a narrower, columnar format. The primary intention for this change was to make the site more user-friendly for my visitors browsing at 8x6 (although, including my mom, this constitutes only 3% of my traffic). And despite the attention and work, I still overflow by a sliver at 8x6 which is a tad annoying, but I’m ultimately not too concerned with offending 3% of the population (sorry, mom).

Look & Feel

The biggest challenge in designing for 8x6 was providing sufficiently large images for all the photos and products I offer. I mean, people are visiting the site to spend a considerable amount of money on artwork, so it’s only appropriate that I provide them the opportunity to inspect that which they’re investing in, right? My photographs come in three different orientations: portrait (vertical), landscape (horizontal), and square (square, duh). It was important to keep the ordering options as high on the page as possible, which meant they had to sit alongside the photo. But if the photo is too wide, the options get pushed out of bounds. So I spent quite a bit of energy on the product detail pages to handle the different sizes. I programmed the pages in a way that the site is smart enough to know what orientation the photo is, and to change the layout automatically to ensure the options remain up top.

New features

Additionally, the product detail pages contain quite a bit more ‘features,’ as well! Many of these are a long time coming, so it’s a real treat for me to see them in production. The photo rating system was something I’ve wanted to implement for a long time now. And I’ve made it very easy for people to bookmark images they like by providing quick-links to the most popular social network websites. Additionally, I went through and geocoded all of my images, which allows me to map them on integrated Google maps. Finally, and this is a biggie, I’ve minimized the use of my old keyword categorization system in favor of a tagging folksonomy. Keeping the categories behind-the-scenes provides no real value, so I’ve brought them to the forefront, allowing visitors to inspect the various tags and view related photos tagged with common keywords. Huzzah!

I was also very happy to upgrade the “Related Items” and “Recently Added Products” bars that appear at the bottom of most pages. My previous site had to limit how many items appeared in these areas, but my new system is entirely dynamic and uses Ajax to traverse through a limitless number of images. This way, if there are 20 related photos, users aren’t limited to only seeing the top 5.

Static Content & CSS

Most of the static content (bio, faq, stock licensing, contact, etc) has remained the same, and I intend to update it as soon as time permits. But what has changed is that I’ve totally disbanded the use of HTML tables in favour of CSS, and more specifically, the YUI Grid Library (thanks sara). If I am thinking correctly, there are no tables on my site used for layout. The only tables that bubble up into my head are those used to present data on my stock licensing page, and to present the shopping cart data. That’s what the kids call 'the new hotness.' (Now, I just need to wrestle a few things into validation!)

Nerdy technobabble

And for those who are technically inclined, the site is built entirely using Ruby and the Rails framework. Sweet jebus, Rails has transformed my life, and I’m thrilled to finally get my own projects upgraded into my new programming technique (which is unstoppable). The site is managed using a completely custom CMS interface that blows my old site’s management out of the water. I also make use of several key components that I’ve hacked into use to tie everything together. These include:

• The Yahoo! UI Library
• The Script.aculo.us and Prototype libraries/framework
• Lightbox 2 for the product image popups
• FCKEditor for my back-end text entry management
• Snazzy Borders for various style elements
• CSS Pagination links for the, um, pagination :)
• paginating_find to replace my default find() methods
• acts_as_ferret for the search functionality
• acts_as_taggable for the folksonomy/tagging
• acts_as_rateable for the product ratings
• Squidfingers patterns by Travis Beckham (who has probably contributed more to my design projects than anybody/thing else, and whom I desperately need to take out to a thank-you dinner the next time I’m in Nashville.)

I'm very happy to get this release out into production. The code has been sitting on my hard drive for the better part of 8 months, and I'm so thrilled with all the new functionality that will make the site easier to manage, and hopefully easier to use!