Why You Should Style Your ALT Text and How to Do It Right

Anna Pfeiffer, Senior Marketing Strategist

Anna Pfeiffer, Senior Marketing Strategist

Many ISPs and webmail services now show images by default, which is great news for email marketers. However, there are still instances when a subscriber won’t see the beautiful graphics your creative team has so lovingly crafted. When that happens, what do your subscribers see? A keen representation of what your message is all about or a giant blank canvas? Avoid this pitfall by taking time to treat your ALT text thoughtfully.

What is ALT text?

ALT text is the copy that appears when an image fails to display.

When does ALT text display instead of your images?

  1. The ISP or mail provider disables images by default (as long as they also support ALT text).
  2. The subscriber has chosen to disable images in their settings.
  3. The image(s) can’t load because the source URL is broken or the connection is super slow.
  4. ALT text is also used by screen readers for the visually impaired. Always be mindful of making your emails accessible.

Why should you use ALT text?

Obviously, seeing something is better than seeing nothing. If ALT text is displayed instead of your images, the subscriber can potentially still get the gist of your message and interact with it.

What does “styling” ALT text mean, and why is it better?

Styling ALT text means adding code to the HTML that displays your ALT text to give it some pizzazz rather than showing up with the standard plain blue ugly link. This strategy allows you to match your message more closely to what the email is trying to convey with the images displayed. It emphasizes calls to action, makes key points stand out and is generally more engaging.

How can you style ALT text?

First, be sure you’re including ALT text by including the ALT attribute for all images. Include the width and height so that the missing image doesn’t cause the area to collapse and fail to display your ALT text. An image tag with a link should look something like this:

<a href=”http://website.com”><img src=”Banner.jpg” width=”640″ height=”150″ alt=”The year’s biggest sale starts NOW!”/></a>

With images not displayed, it will appear something like this:

ALT Text example

Next, start getting fancy by including some styling around the ALT text. Here’s an example:

<a href=”http://website.com”><img src=”Banner.jpg” width=”640″ height=”150″ style=”color:F47AF5; font-size: 40px; font-family:’Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetical, Arial, ‘sans-serif’; background: #BEF6F4;” alt=”The year’s biggest sale starts NOW!”/></a>

The image would display like this:

ALT Text example

We’re getting much closer to a graphically representative look and feel, right? Now I’m going to go out a limb here and try something a little wacky:

<a href=”http://website.com”><img src=”Banner.jpg” width=”640″ height=”150″ style=”color:#F47AF5; font-size: 40px; font-family:’Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetica, Arial, ‘sans-serif’; background:#BEF6F4;” alt=”The year’s biggest sale starts NOW! 😀”/></a

Which gives us the following:

I’m not exactly sure how widely supported emoji use in ALT text is – I couldn’t find any documentation one way or the other – but it did work for me in the Mail application on both my Mac and iPhone, as well as Outlook webmail. If you test this more thoroughly, please share your results!

For good measure, let’s throw in a few of other style attributes that are typically required for mobile responsiveness (width, height and display tags):

<a href=”http://website.com”><img src=”Banner.jpg” width=”640″ height=”150″ style=”color:#F47AF5; font-size: 40px; font-family:’Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetica, Arial, ‘sans-serif’; background:#BEF6F4; width: 100%; height: auto; display: block;” alt=”The year’s biggest sale starts NOW! 😀”/></a>

While my examples are rudimentary, you can see how a little creativity can go a long way in making your message look vastly different with images disabled. You can almost create the “look” of images, and you can certainly draw more attention to your calls to action.

Where is styled ALT text supported?

Some webmail clients, such as Comcast and some smaller foreign domains, don’t support ALT text at all. (Shame on them!) But most, except for AOL on IE, do support styled ALT text.

As for desktop support, Windows 10 Mail doesn’t support ALT text at all, and Outlook displays it but adds a security message. Styled ALT text is not supported by Lotus, Windows 10 Mail or any version of Outlook, aside from 2011 for Mac.

Mobile clients have a wider range of support, which is great considering how many emails are opened on mobile these days. Here are the clients that don’t support ALT text at all: Mailbox on iOS, Windows Mobile 7.5 and 8, Yahoo! App on Android and Yahoo! Mail in browser on the iPhone.

Now go have fun with it!

Having at least some kind of ALT text for your images is vital. Playing around with it and trying to replicate the look and feel of your message in text will take a little more time, but it’s not that time-consuming or difficult. The extra time it takes to style it up for the majority of clients that disable images by default is presumably worth it. But run your own tests and see if your rates go up. You might see more subscribers deciding to enable images, which should boost open rates, or they might not feel the need to enable images, in which case you should at least see click and conversion rates go up.

Have you tried styling ALT text before? Have an example you’re proud of? Let us know by commenting below!