Email newsletters are popular form of communication when it comes to companies marketing their products. The most popular being HTML based email newsletters. These are the newsletters with the pretty pictures and text that look like a web page. Well, sometimes they look that way if the developer of the newsletter took the proper email degradation precautions. Often though HTML email newsletters resemble some random blocks of colors with random links thrown in. But it doesn’t need to be that way.

Lets take an email I recently received as an example.

At first sight this resembles a typical spam email. Usually a spam email that made it through my spam filter that’s trying to sell me something I don’t need, which I would just mark as spam. But looking closer I see it’s from MINI. I signed up to receive information from this company, but due to it’s poor presentation I would have just assumed it was spam and trashed it. But why does it look like this?

The common default for most email applications is to not display images that are contained within an email. This is an anti-spam measure. Spam often tracks the success and validity of the email it was sent to through the display of the images contained within the message. In order to view an HTML based email properly the user either needs to change this default behavior in the applications preferences (not a good idea) or by clicking the “display images” button that your email program will usually display. But as you can see from the following screenshot, even pressing the “display images” link only gets us half the way there. We’re still missing the text that’s displayed above and below the images because it’s black text on a black background. And the text that’s missing is important. It explains how to unsubscribe from receiving these newsletters should I want to. And ironically it also explains that if I’m having trouble viewing the email, I can click a link to view it properly. So much for that.

So how can this be fixed? I’ve gave myself one hour to create a fixed version of this email from scratch to demonstrate.

First I removed the black background that spanned the entire email. This allowed the header and footer text of the message to be shown, since it wasn’t visible due to the text color also being black. Instead of changing the text color to white, I choose to remove the black background so there is more focus on the message and less on the header and footer of the email.

Next I added alt text to all the images being used in the email. When using images that contain text within the image, use the alt tag. The image alt tag will display the text contained within the image if the image is not displayed. Also keep in mind that the default display color of the text will be black, so if you choose to you use a black background such as in this email, you’ll need to apply a color style to the image to change the color of the alt text so it’s readable.

With those small changes, the email that the recipient would receive would look like the following.

But this can be improved even further.

I’m a big advocate of using pure HTML text and not using images to layout your text. Images are often used to ensure a particular font is used. But I believe the cost in lost usability and accessibility is too high for ensuring your particular font is displayed (the one exception being logo branding). So I’ve created a second version of the email removing the image based fonts for pure HTML based text.

As you can see in the following screenshot, even without the images being displayed the visual style being sought by the company still comes through.

When we choose to display images, here is our final email.

As I mentioned previously, these changes took less than an hour. But they moved the visual presentation and accessibility of the email miles ahead of it’s previous incarnation.