Back in 2007 we did a bit of testing regarding the display of ALT text in the popular email clients. Flash forward to 2010 and we felt it was about time to do a bit of a refresher. Not only are there new email clients on the scene, but some of the existing clients have changed their tune towards displaying ALT text when images are blocked. Plus, we’ve got a couple of tips that we’d love to share while we’re at it.
Do ya think I’m text-y?
… so said Rod Stewart. First of all, why use ALT text? Consider the following email newsletter:
Now, consider if someone received it in an email client where images are either blocked by default, or intentionally. What would it look like?
Thankfully, the designers of this email newsletter have taken this into account and added some handy ALT text. As a result, the images that have text in them (eg. ‘Friend us on Facebook’) still have meaningful descriptions when images are blocked or turned off.
Now, consider how important this would be if you were visually-impaired and using a screen-reader to assist with reading your email. In this case, ALT text could mean all the difference. We see a lot of email newsletters that use images for headings and links – these can be particularly hard to understand if they’re not accompanied by useful descriptions.
That said, not all email clients are equal when it comes to supporting the ALT attribute, so lets look at the state of affairs in some of the top email clients.
ALT text in different email clients
We’ll explain what each of the descriptions mean in a moment, but here’s a run-down of the top email clients, market share and how they display ALT text:
|Client||Renders ALT Text|
|Windows Live Mail||No|
Now, it isn’t all as dire as it may seem – in most of these email clients, images are displayed by default. However, there are a fair few quirks to be aware of.
Image width and height must be specified
We’ve had cases where email clients like Apple Mail have not displayed ALT text, despite what’s been determined above. Generally the reason has been that the <img> width and height have not been added to the HTML attributes, causing the placeholder to collapse.
Windows Live Hotmail doesn’t display ALT text
We’ve seen some curious changes in Windows Live Hotmail, but unfortunately, the ability to display ALT text isn’t one of them:
Now, we don’t have an axe to grind with Hotmail, but from a usability perspective, this is pretty stiff. Plus, the way they grey out images can turn even the most majestic of email designs (like our newsletter, ha!) into an ugly duckling.
On top of that, images are blocked the first time you receive an email from a sender and a warning message is displayed (see pictured). Once you give an email newsletter the nod, images will display on all consequent campaigns.
Outlook’s ‘Right click here to download pictures…’ message
Outlook ’03 / ’07 / ’10
Second off the shelf are the security warnings visible in Outlook ’03 / ’07 / ’10. On the upside, any ALT text is featured in the image placeholder (see right). On the downside, it’s prefaced by an long speel on protecting your privacy. With smaller images, there seems to be little point adding ALT text at all.
This isn’t the case with Outlook Express, which is comparatively liberal when it comes to displaying ALT text. With Express, you can use CSS to style the color of your ALT text, which is great for image-based headings.
No complaints from Entourage
Legendary customer Jeremy Bechtold generously sent in screenshots from Entourage 2004 & 2008. These email clients display ALT text, too. Thanks, Jeremy! We’ve also been told that CSS styling also works in these clients.
Tip: Keep ALT text short and sweet (or pay)
Now, one recurring glitch that came up during our testing was that a number of major email clients simply reject ALT text that exceeds the width of an image. For example, he’s two images in Outlook Express, with some fairly-long ALT text in one and a one-word description in the other:
And here’s the same images in Yahoo! Mail:
The email clients that throw away long ALT text are: Windows Live Mail, Yahoo! Mail, iPhone, Gmail and Apple Mail.
So the takeaway here is to keep your descriptions short. Really short. Otherwise, they could disappear altogether.
Tip: Style your ALT text with CSS (and not with header tags)
In so much as we regularly see droll descriptions in image placeholders, it is possible to give your ALT text a little jazz within a variety of email clients. Using CSS styles, you can change the height and color of ALT text in: Yahoo! Mail, iPhone, Gmail, Apple Mail and Thunderbird. In Outlook Express, you can only change the color.
This is a particularly useful technique for header graphics, logos and other images that require a little emphasis. Awesome customer @obxdesignworks contributed this image to show how he uses styled ALT text in the header of his emails:
Neat! However, as per the tip above, we’d probably keep our descriptions a little shorter.
Quite a few folks suggest wrapping images with header tags (eg. <h1>) to achieve similar results, however I don’t recommend doing this. In a few email clients, big gaps appeared above and below the wrapped image during our tests, so I’d stick to CSS styling for now.
It may be very easy to forget about adding ALT text to images, but as you’ve seen, they do make email newsletters considerably more usable for folks with email clients with image blocking enabled, or those who use screen readers. So remember – write ’em short, style ’em up and keep your email newsletters text-y!