Don't forget to check your ALT tags!

The Hunt
As email marketers, we should ALL be designing our communications with the assumption that our messages will be delivered with the default rendering "images off." Most email clients, unless the recipient has added you to their "safe sender" list will be delivered without the images "on." One way to get your communications viewed in their full HTML glory is to ensure that your image ALT tags are coded correctly and have a few words that reinforce what the image represents within your message. This is very critical if your call-to-action is an image however; using text/image based call-to-action is not something we would recommend.

The Skunk
While triaging a slew of personal emails via my Blackberry device the other day, I happened across an email from one of my favorite retailers - Molton Brown London. They produce a line of luxury soaps, candles, shave creams, colognes, makeup and such. Molton Brown has a global presence and I know that they send emails to both recipients in the UK and US markets (and other global markets I assume.) As I was scrolling through their message on my Blackberry, the first thing that caught my eye was that the ALT tag for their call-to-action listed was a UK based "free-phone" number (aka "toll-free number") instead of the normal 800 number for the US.

The odd ALT tag prompted me to save this message and review on my laptop. I had added their sending email address to my address book many months ago so the only way I would have noticed this is reviewing on my Blackberry. For Molton Brown’s email recipients that have not added their sending address to their personal white list, the message as it was delivered looked very different than the fully rendered HTML. Looking at the message further with images off, there were a few other HTML programming best practices that they need to apply to ensure that their messages are being opened by their recipients. Take a look at the message below with images on and off.


The Resolution
Let’s start with the image ALT tags. Of the 13 images contained within the message, only 3 were tagged with image ALT tags. As we all know, an ALT tag serves as a little description of what the image contains. In this case, 2 of the call-to-action images that were suppressed in the header and footer contained what should have been US based toll-free number to order via phone. During the QA process, they most likely forgot to switch out the ALT tag to the appropriate number. With images off, not only did the recipient not see the supporting product images, they don’t get the correct number to call to place an order. This could lead many recipients to think, "this message was not intended for me."

The remaining ALT tags were not populated with anything and leaves the recipient guessing as to what the big empty image boxes should be displaying. Except for a brief introductory paragraph in the top of the message, the call-to-action is virtually lost.

One other item of concern is the use of white fonts over a dark background color. Although some consider aesthetically pleasing, if these background colors are suppressed within the massage (as they could be in several email browsers) any critical information contained in these copy blocks will simple not appear on the screen. For this message, the housekeeping notes at the top of the message that invite the user to click if they don’t see the full message as well as white listing information do not show up. Other important links as well as terms and conditions are formatted in a white font over dark background in the footer of the message as well. These critical links, although there, do not render when the background color is suppressed. This is particularly important when the recipient cannot see the link to unsubscribe.

The moral of the story is, make sure that you are testing each version of your message and looking at your ALT tags. Programming/testing only once for one segment will limit the effectiveness for other segments if they are getting the wrong information. Use image based text call-to-actions sparingly and be sure that these are not the only call-to-actions within the message. Don’t forget to tag ALL of your image ALT tags, the recipient will use these to help determine if they want to interact with the message. Last but not least, if you are using a colored background, don’t forget that whenever these background colors are stripped out, using a white or light font will either result in no text rendering or text that is impossible to read.

Simple mistakes can lead to big problems when your message is delivered to your recipient's inbox. Put together a QA check list that covers all aspects of message testing and religiously complete these testing procedures for each and every message that you send.