I Can′t Stand a Hypocrite

…especially when that hypocrite is me. For the last couple of weeks I have been vilifying the practice of embedding text, especially keyword rich text, in images. A good Web designer knows that this practice is bad for SEO and can cause problems with accessibility. Well this week I am going to have to stop pointing fingers, get all Michael Jackson and "Start looking at the man in the mirror." While critiquing my own work I came to the painful realization that I had imprisoned valuable content in images.

Target: www.thegreenloop.com

Let's take a quick look at how this happened and discover how a radical redesign can set this content free and create a more flexible layout for my client.

The Why

The other day I was powering through a batch of time sensitive updates for my client at thegreenloop.com. Greenloop needed to add messaging to their home page for an up-coming customer sweepstakes. They also wanted to prompt their users to nominate them for The Co-op America Green Business of the Year Award. Both requests required a small paragraph of text to be placed above the fold on the home page.

The Problem

The Greenloop home page layout consists of five positions Greenloop can use to rotate product images. The layout had been working well for about six months, in which time they had never requested text heavy content be placed in any of the five slots. Without giving much thought to how I was breaking the layout and one of my biggest Web design pet peeves I opened up Photoshop and started setting type and rendered all of that great content useless to search engines.

figure 1

The Solution

Greenloop needs a solution that is flexible enough to accommodate both text heavy and image heavy content. The only current requirement is that the newsletter sign up graphic remain above the fold. With that in mind we need to find out what has been working on this page and what has not, let’s take a quick look at the analytics.

Greenloop uses Google Analytics, the accuracy of which has been a topic of recent debate, to monitor their site traffic. It is not the most robust traffic analyzer but you can’t beat the price, free. After spending about six seconds looking at the site overlay it became painfully apparent that only the "Sustainability Graphic" had been performing well while the "Designer Spotlight" and both of my text heavy graphics had failed to drive any real conversions.

figure 2

Time to Suimplify

The "Sustainability" Graphic had been performing so well I used that as the centerpiece. The only modification was the addition of a call to action at the bottom that serves to prompt the user to "shop" as well as explaining exactly where they are headed with the click. If the blind click was better for conversions we can switch it back.

figure 3

The newsletter sign up had not been performing well so I removed the image and added some more descriptive text. I am hoping the text and the more obvious call to action along with the highlighted 15% offer will help to increase newsletter sign ups. I will be watching the metrics on this one for effectiveness.

Lastly I combined the two bottom positions into one text area titled "This Month at Greenloop." This change simplified the layout and reduced a lot of the noise that was making the layout seem busy. On top of that this change has created a text area that can be easily updated and since the text is no longer locked in an image the text is now available to search engine spiders.

figure 4

Will these changes make Greenloop more green? Check back in a couple of weeks and I will post the metrics.

See the updated Greenloop home page at www.thegreenloop.com.

If you are interested in a Usability Redesign for your site read more about Suimple’s Quickly Redesign Service.

We currently do not offer comment functionality, if you have something to say about this usability review email contact[at]suimple.com and I will add your comments to the piece.