Blog

For the most current results on image blocking in email clients, view our updated post.

I read an article on Clickz today by Jeanne Jennings on the current state of image blocking in email. Jeanne tested 30 random B2B and B2C emails in her inbox on their approach to image blocking.

While the results were mixed, I was very surprised to see her suggest that image alt tags might not even be worth the effort. She cited the instructions Outlook 2003 places before the alt text for every image (explaining the image is blocked and how to show it) as the reasoning behind this.

It’s a mouthful. And it precedes any alt tag text the sender might have included. So even when there were alt tags, they weren’t prominently placed or easy to read or skim. Based on this, the value of alt tags is minimal. I’m not sure I’d bother.

The only problem with this assertion is that not everyone uses Outlook 2003. In most of the popular email environments, such as Yahoo, Gmail, Thunderbird for example, alt text is displayed unimpaired for every image in your email and can go a long way to encouraging your recipients to enable images. But there’s another benefit that needs to be considered.

What about accessibility?

To many email readers, there’s an even more important reason to ensure descriptive alt text for every image in your email - accessibility. Any of your recipients who are visually impaired use the alt text you specify for each to get a better understanding of your email content, especially if that image has some relevance/importance to the content of your email.

Jennifer Kyrnin has put together some nice suggestions on how to write alt tags for accessibility that are worth a look.

The magic of CSS

While alt tags are extremely important, there’s an alternative CSS technique we can use in our HTML emails that in my opinion beats the pants off the old images/alt text approach.

This technique, explored in detail by Mark Wyner a few months back, includes the use of background images via CSS instead of simply placing the image in your XHTML/HTML content.

Using this approach, Mark can display styled and well formatted alt text when images are off, replaced with the image itself when images are on. No ugly placeholder images with a big red X, no messy instructions in Outlook, just a nicely styled text alternative or the image itself. Further to this, the content is completely accessible for the visually impaired. Talk about a win/win! So, I guess the takeaways are:

1. Always use alt text for the images in your email
2. Try to keep them as descriptive as possible (see here for more on this)
3. If possible, try and use the CSS background image approach to avoid the ugly placeholder issue altogether.

If you are looking for something a little bit different for your email template, you’ll enjoy this design for buyolympia.com, a 2 person provider of all kinds of interesting things from Olympia, Washington.

The two column layout is busier than the typical newsletter, and almost feels chaotic, but it suits the quirky products and friendly style of the company.  There is enough structure there to hold it all together and keep it readable. A great example of designing for a specific context and a particular audience.

Designer:  Pat Castaldo  |  See the complete design

Let’s face it, a big chunk of us designers love and use Gmail. While it certainly doesn’t have the market share of the big guys like Hotmail and Yahoo! Mail, it’s definitely a favorite amongst the design and early adopter communities. If you’re reading this blog, you’re probably also well aware of the fact that Gmail plain sucks to send HTML email to. It strips out all but inline CSS often murdering that nice email design you’ve spent so much time crafting.

At least it’s always been pretty easy to identify what percentage of your subscribers are using Gmail and make a decision on how much compatibility work to do accordingly. Well, those days are limited.

A few days back, Gmail launched MailFetcher,  a great new service that allows you to check all of your POP email accounts within the Gmail interface. This means regular old emails sent to bob@jones.com or even bob@yahoo.com might actually be opened in the Gmail interface, and as such be butchered accordingly. If you haven’t already, this is even more reason to add Gmail to your email testing roster, which we’ll be writing more about here shortly.