Extravision Blogsblog

Recent Posts

Categories

Posts

Don’t let Alt text ruin the aesthetics of the email

April 29, 2014

It is important not to overlook the alt text attribute. The alt text is usually applied to an image tag so when an image cannot be displayed, the alt tag steps in as a substitute. Images that cannot be displayed are usually caused by a slow connection, an error in the src attribute or if the user uses a screen reader.
 
Most email clients have a default setting that prevents images from loading; hence the importance of adding alt texts to your images.
 
Remember the alt text should describe the image especially if it contains information that you don’t want your audience to miss and, if you have used images just for decoration; keep the alt text blank as so alt="".
 
How to add alt text to your images
 
The code you need for the alt attribute is alt=”add alt text here”. This is placed within the img tag. For the alt text to appear, it will need a placeholder box which can be created by adding width and height values to the img tag.
 
Here’s an example of the code:
 
<img src="logo.jpg" alt="Extravision" width="50" height="50" style="display:block;" />
 
You will notice that I added style="display:block;" to the img tag. Some email clients will add extra spacing and gaps around the image. This code ensures that that doesn’t happen.

Figure 1. Alt text default styling
Default example of alt text

How to style the alt text
 
Styling the alt text is done in the same way you would style normal text; by adding font-family, font size, and colour etc. into the style attribute. The style attribute can be adjusted to how you would like the alt text to appear.
 
Here’s an example of the code:
 
<img src="logo.jpg" alt="Extravision" width="50" height="50" style="display:block; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#01abe9; font-style:italic; text-align:left; -webkit-text-size-adjust:none; "  />

Figure 2. Styled alt text
Styled example of alt text

How to add alt text using wysiwyg?
 
Editing the alt text through wysiwyg is simple. You will need to right click on the image then select “Image Properties”. This will open up a pop up box shown in figure 3. Under “Alternative Text” is where you enter the alt text for that image.

Figure 3. Wysiwyg image properties
How to add alt text through wysiwyg

To style the alt text, simply click on the “Advance” tab then add the style to the “Style” section as shown in figure 4.

Figure 4. Wysiwyg advance image properties
Styling alt text through wysiwyg

Don’t forget to test your email on various email clients as they can appear differently.
 
Sources:
Quick Tip: Remember to Style Your ALT Text - Nicole Merlin
The Ultimate Guide to Styled ALT Text in Email – Justine Jordan

Posted by Carissa Lo
Email Design


No comments

Comments are closed.

From the Blog

Data Protection, E-Privacy, GDPR. What does it all mean ?

Most people have heard of the Data Protection Act and if your in email marketing…

Simon Hill
December 5, 2016

5 things you should stop doing right now in your email marketing

It’s easy to get stuck in a rut with your email marketing campaigns. You can…

Jenni Malley
October 26, 2016

Latest Tweets

Facebook IconTwitter IconVisit Our BlogVisit Our BlogVisit Our Blog