Alt attributes: think again
One of the uncontested assumptions in email design is the need to add an alt attribute to any images. As in this code:
<img src="http://example.com/im.jpg" alt="Click here for info" />
However, this advice is now so self-evident that we forget that not every email client or webmail interface handles alt attributes the same way. And in some circumstances, adding alt text can do more harm than good.
Of course, the basic premise is absolutely correct.
Here's a logo that might appear at the top of an email:
Here's how the image might display when images are blocked and no alt attribute is specified:
Here's how it shows up when images are blocked and an alt attribute is present:
Obviously, adding the alt text makes sense.
It gives you the chance to compensate for the blocked image through appropriate text: a call to action, a description...whatever supports the original purpose of the image and encourages some kind of response (such as a click or the decision to activate images).
Now for some ifs and buts...
Alt attributes don't display everywhere
Windows Live Hotmail does not display the alt attribute. Here's how that logo shows up there when images are suppressed:
So don't assume all you need to do to account for image blocking is add an alt attribute. (And consider segmenting your list by domain and having a unique design for @hotmail addresses that ameliorates the effect of lots of nasty grey blocks in your email.)
Remember to add height and width attributes
When no height and width attributes exist, most email clients and webmail services shrink the image to the size of a small icon:
This in itself can play havoc with your layout. But there's an alt twist, too.
Both Gmail and Yahoo! Mail, for example, will expand the space reserved for the "blocked image" to fit in the alt text, potentially shunting right hand elements off the page. A particular danger if you have a horizontal set of navigational buttons.
So this header:
Becomes:
Outlook 2003, for example, does the same and appends its own lengthy security warning to the alt text...almost guaranteeing problems. The navigational menu all but disappears to the casual observer:
This does not happen if you specify each image's height and width, thereby retaining the integrity of your layout.
Match the alt text to image size
The reverse of the above problem of course is that with height and width specified, only the alt text that fits into these dimensions is displayed. Long alt text with small images gets you this at Gmail:
So be sure your alt text matches the "box" it will display in. Not just in total, but also in terms of widths: see how the word MarketingSherpa is truncated in this Gmail blocked image example:
With various Outlook versions putting a security message in first, chances are that your alt text won't even be seen by those using this client, as in this Outlook 2003 example:
Another reason not to rely on alt text alone for dealing with image blocking. Also ensure enough HTML text, links, headlines etc. are available outside images to get your message across and allow the required response. You'll find other tips on coping with image blocking here.
Thunderbird strangeness
The email client Thunderbird has its own unique way of handling alt attributes. if one is present, that's all the viewer sees: no icon, box or anything to suggest an image should be there at all.
So without the alt attribute (but including height and width info), our example horizontal menu buttons look like this:
With alt attributes...like this:
Eek!
And there are other nuances. The above is by no means exhaustive or complete (feel free to add tips, comments or corrections here.)
So in summary: make no assumptions with alt attributes. With all the variations out there, you have no realistic alternative but to test your design in one of the inexpensive tools available (I used Campaign Monitor's for this article) to find the image and image attributes combination that works best across all clients and webmail services.
Need more email marketing guidance? Try the email newsletter or blog.