I’m happy to announce the launch of the new website for American Sealants Inc, a leading supplier of silicone sealants and adhesives. This was a great project, the guys at ASI were (and are) some of the best clients I’ve ever had, and I got to use a lot of the shiny new tools in WordPress 3.x, including custom taxonomies and custom post types.

This is one of the best websites I’ve launched to date, thanks to the assistance of Hari Luker and Jeremy Wilson in providing professional copywriting and photography, respectively.

One of the highlights of this project was creating the little color chips that are visible in the sidebar of each individual product:

ASI provided me with samples of each of their silicone colors.

ASI provided me with a bristol board containing samples of each of the colors they supply. I scanned the board into my computer, then used the eyedropper tool in Photoshop to grab an exact color match. I then used the gradient tool to try to simulate the glossy finish of each color.

Finally, I built a custom tool from the WordPress admin panel that allows them to simply check off which colors are available for any given product. When the page is loaded, it checks which colors are available and replaces them with the visual color samples.

Color Picker Tool:

ASI can easily control which colors are available for a given product

It might not seem like much, but it’s these little touches that really separate a Studio 625 website from the rest.

Thanks for reading!

In the past, I’ve been a staunch defender of the idea that “the fold” is an outdated concept in web design. I celebrated this article on the subject, which essentially boils down to the fact that website users know how to scroll and will scroll, given enough visual cues that there is additional content on the page.

However, I’d like to add another guideline regarding the fold:

“Make sure that each page’s primary function is at least partially visible above the fold.”

I was recently tasked with redesigning the contact page for Polar Leasing (a refrigerator rental company), because the marketing director had a hunch that something wasn’t right.

The original page:

On the original page, the contact form is pretty far down the page, after the general contact info. My theory is that the user would  scroll past the Flash header until he or she  saw the company phone number or live chat, and then either use one of those contact methods or leave the page. Because there weren’t any visual cues hinting at a contact form below, most users weren’t even aware of it.

The redesigned page:

Here are the changes I made:

• Removed the Flash header so it didn’t take up as much space on the interior pages
• Moved the address, email, phone, fax, and live chat information into the right column
• Moved the contact form to the top of the page
• Made the form more prominent by applying a light blue background

The fold for 1024 x 768 users was originally just below the “Find your state representative” link; now it’s just below the comments field on the contact form.

The Result? 3.5 times more contact form submissions per month.

By increasing the prominence of the page’s primary function, I increased the conversion rate of this page by a significant margin. What are your thoughts? Do you have any examples of similar “fold redesigns” or realignments of purpose?

I just worked through a good Illustrator tutorial that shows you how to create a cool set of gears, using just basic shapes. Here’s how mine turned out:

I was going to write up this fancy tutorial on how to create a custom filter that would give you the full referral path in your Traffic Sources area of Google Analytics. I got all the way to the end and realized that it’s already built into Google Analytics! Silly me. I swear this wasn’t there before…

Instead, here’s what you have to do to see the exact page that someone clicked to get to your site.

1. Click “Traffic Sources”
2. Click “Referring Sites”
3. Click the name of a site to show the exact referring page on that site: