Aug 29, 2006

How The Gap uses alt text in their HTML emails

If you code HTML emails long enough, you get tired of all the different email applications out there (I’m talking about you, Lotus Notes) mangling your code and making your emails look crappy.

After a while, you learn to just keep things super-simple, and not take anymore risks. You learn that one or two big graphics is safer than 50 tiny little graphics.

But I noticed some HTML emails from The Gap using lots of sliced out graphics to their advantage.

See, when you send HTML emails with graphics in them, almost every modern email application turns those images off by default. If the recipient trusts the sender, she can click a button to turn images on. If she really trusts the sender, she can set her email program to always turn on images from that sender.

But 9 times out of 10, when you send an HTML email, your images are gonna be turned off. That sucks if you really want users to see your pictures. It also sucks if you’re tracking your open rate, because that can only be done with images turned on.

One thing you can do is use "Alt text" for all graphics in your HTML code. That basically inserts some descriptive text wherever an image would normally be. Sometimes, this can "entice" a recipient to turn images on.

Anyways, it’s normal to see an HTML email with its logo graphic, and maybe one or two product photos turned off. You’d see some alt text like, "Company Logo" up at the top. But look at what The Gap did. They sliced their email into a whole bunch of separate pieces, and put tons of alt text in for each graphic file.

How The Gap’s email looks w/images turned off…


In Mozilla Thunderbird (click to zoom):

Gapimagesoff_1

In Gmail (click to zoom):

Gapimagesoffgmail

If you make your images clickable, then their alt text will look like hyperlinks. Look at all the little links and descriptions everywhere. You could almost read this email without any images whatsoever!

Here’s how it looks when you click "Show Images" (click to zoom):

Gapimageson

If you’re new to HTML emails, play around with how you code your alt text for images. There are other pros and cons to consider:

Of course, keep in mind that some email applications (like Microsoft Outlook 2003)
don’t display your alt text when images are turned off. All you’d see
are big, gigantic "broken image" placeholders.