How to Guide - Styling Alt Tags

Campaign Manager | Client Services

Ensuring you get your message across efficiently and effectively is imperative within emails - you only have a few seconds before your customer loses interest, this can be as small as a 2 second glance or 2 – 7 second skim read. This can be made even more difficult when images are turned off on the customer’s platform.

Conveying the message swiftly, even when images are turned off, can be easily done with the use of the ‘alt’ text attribute. Short for ‘Alternative Text’, this text is displayed when you hover over the image or when the image is not downloaded for display. Customers viewing on mobile are particularly benefitted, as images do not need to be downloaded to gain an understanding of the email.

To add an alt text to your image, you simply need to add in the alt attribute to your image. For example:

<img src=”images/Welcome.jpg” alt=”Welcome to RedEye”>

Alt text is not always required on small images which don’t add any specific value to your email, therefore the best practice is to include the attribute but leave the text as blank, like this: alt=””.

Without an Alt Text Tag


With an Alt Text Tag


As you can see from the examples above, the alt text itself is very plain. But without it, the customer would not identify the general purpose of the email. However, there are ways to be able to enhance the visibility and style of the text.

Styling your alt text can allow you to keep your email consistent and allow you to highlight key aspects which may be shown within the image. To add styling to your alt text, you will need to add in font styles into the image tag. For example:

<img src=”images/Welcome.jpg” alt=”Welcome to RedEye” style=”font-size:26px; color:#FFCC33; font-family:Arial, Helvetica, sans-serif;">

The above code will produce the below in your email:


As you can see, the font is larger and coloured and given the right background, will stand out much more effectively.

Each browser will handle your styled text differently which may cause your styling not to appear as you intended. Chrome and Firefox do display the text as intended, yet Internet Explorer will ignore the size styling and display as ‘standard’ alt text. Outlook will insert a security message beforehand which, depending on your image size, can cause your text to disappear below the image height.

In the screenshots below, you can get an idea of how each browser handles the alt text.

IE

Firefox

Chrome

Outlook

The email when all images are shown:

Implementing this feature within your emails will take a little more time, as you style the font as you see fit, but does not require complex coding. Styling your tags will ensure the style of your email is maintained as much as possible and will encourage clicks regardless of whether the images are being displayed. But remember, styling alt tags can only benefit you and your customer if you ensure the message is still communicated correctly without images.

Share:

RedEyeUK @RedEye UK