Image ALT tags – How to Make the Best Presentation to Your Readers with Image “No-Shows”
Always use ALT tags
The experts all agree that we should use alt tags in our emails (HTML code that gives alternative text for images not displaying). This gives us a backup means to get our message across when the reader’s email program (called an ’email client’) such as Outlook can’t find or show images. The alt text may be a description or call to action, or whatever supports the original purpose of the image. This is what the code looks like:
<img src=”http://yourcompany.co.nz/productxyz.jpg” alt=”Product xyz free offer” />
Here’s how the image might display when images are blocked and no alt attribute is specified:
Here’s how it displays when images are blocked and an alt attribute is present:
But avoid the traps
Not doing the alt tags properly can play havoc with your page layout, so here’s a few tips:
Remember to add height and width attributes
When no height and width attributes exist, most email clients and webmail services shrink the image to the size of a small icon which in itself can screw up your page layout.
Webmail clients such as Gmail and Yahoo! Mail expand the image icon to fit in the alt text, potentially shunting right-hand elements off the page if the text is long. This is a particular danger if you have several images side-by-side such as a set of navigational buttons. Outlook 2003 does the same but adds its own lengthy security warning (‘Right click here”) before the alt text which really blows it out:
The solution to all this is to specify each image’s height and width, which will retain the integrity of your layout:
<img src=”http://yourcompany.co.nz/productxyz.jpg” width=”a” height=”b” alt=”Product xyz free offer” />
Match the alt text to the image size
With height and width specified, only the alt text that fits into those dimensions will be displayed, so any words exceeding the height or width will be cut off as shown on the left.
So, with Outlook putting its security message in first, your alt text probably won’t even be seen unless you have large images.
You can’t get it perfect for every email client program
Using the above method will preserve your page layout when images are blocked, but some email clients don’t show alt attributes at all, e.g. Windows Live Hotmail just shows blank grey boxes, and there’s nothing you can do about it. If you’re keen, you could segment your list by domain and have a unique design for @hotmail addresses that minimises the effects of grey boxes in your image positions or just use plain text emails.
Don’t rely on images and alt tags too much
Because presentation of images and alt tags isn’t bullet-proof, it’s safest to use text as much as possible to ensure your message gets through adequately without relying on images too much, especially for headlines, links (including navigation), key messages, and calls to action.
Realistically you need to test your design to avoid the risk of damaging your online reputation
Testing is the only way to be really sure of how your emails display in the range of email clients and webmail services that your clients use. Mobilizemail has an email display testing service to help you here. We will write up a report on test results and provide recommendations to improve or fix any display issues and find the image/ text combination that works best for you across all clients and webmail services. Contact us for more information on this.
You can have a web page version of your email that doesn’t have these problems
[business:Mobilize Mail] now has support for a “web version” of your email. All you need to do is add a special code tag in your email content and our system replaces that tag with a link to your web version of the email which can be viewed in a web browser such as Internet Explorer.
Comments are closed.