As a followup to my original Email Newsletter Makeover post, I wanted to share the latest Mini email newsletter I received this morning. It’s an improvement in that I can actually read the header and footer text and they are more effectively used img alt tags. But there’s still a lot of room for improvement. For example, why is all the main text your writing in order to sell your product embedded in an image?
Below are screenshots showing the email with images off (default) and images on.
I always wondered why some feature would show up in a regular Gmail account and not in a Google Apps based Gmail account. Dan Benjamin has the skinny with his article “No Labs Love for Google Apps”.
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.
HTML formated emails are considered the spawn of the devil by some. And by others it’s considered the next evolutionary step in email. Whichever side you sit on, both agree the HTML formated emails aren’t going anywhere and will only become more popular.
From a developers point of view, creating an HTML formatted email can be about as fun as root canal. Why? Because as opposed to browsers, which there are only 2-3 core browsers (calm down fringe browser people), there are 10-15 core email clients. The level HTML and CSS support varies greater then the level of support the browsers had in the dark days of the browser wars. To encourage browser makers to comply to the basic set of web standards support, the Web Standards Project was created. This was (and still is) a group that lobbied browser makers to support web standards. Proving that it was not only for the benefit for web developer, but also for end users and the browser makers themselves. They have been extremely successful their efforts.
The Email Standards Project aims to do the same for HTML/CSS standards support within email clients. They’ve just launched their official site which contains info on why this matters, what you can do, and a list of popular email clients and their current level of standards support. They’ve even created an Email Standards Acid Test for testing the level of support of each email client.
I encourage anyone who has to create HTML formated emails or anyone who relies on them as promotional tools for their business to visit the Email Standards Project and show your support.