Email Design

Written by Anna Meier

When viewing emails, we are all accustomed to most email clients blocking images by default. That is the main reason to include "alt" tags in our images. This HTML attribute is added to the <img> tag, and will display in some cases when images are blocked or cannot be rendered. But did you know you can add style to those "alt" tags?

CSS styling for "alt" tags is supported in many email clients including Yahoo Mail, Thunderbird, AOL, Gmail and Entourage. Font-family, font-size, and color are supported when viewing in Firefox, while Internet Explorer is limited to the color property.

Below is an example of an email with images blocked. The top represents an "alt" tag without any styling, while the bottom uses CSS styling to specify the font, size, and color of the "alt" tag, along with a background color.

Big difference, you say? I couldn't agree more!

"Alt" tag without CSS styling
<td width="400"><img alt="Northern Trail Outfitters" src="image.jpg" width="400" height="150" border="0" style="display: block;"></td>



"Alt" tag with CSS styling
<td width="400" bgcolor="#586976"><img alt="Northern Trail Outfitters" src="image.jpg" width="400" height="150" border="0" style="font-family: Arial; color: #ffffff; font-size: 36px; display: block;"></td>



After specifying the font, size and color of the "alt" tag, our email is on brand even when images are off. By adding this small detail you can make a big difference in your subscribers' email experience. While this technique may not be visible to all subscriber views, there is no adverse effect in those clients or browsers that do not support styled "alt" tags. Even better, the subscriber experience and your preview pane "punch" is maximized for those subscribers viewing in a supported environment.

(Findings based on testing in Firefox 3.0.x, IE6, IE7)

For more Email Design tips and tricks, check out our Email Design Whitepaper.

Anna Meier
Design Consultant
ExactTarget Campaign Solutions Team