Defensive design in email marketing: ALT vs. image blocking
Defensive design is design that seeks to minimise the negative consequences of the misuse of a device or design that seeks to "optimise the worst-case scenario".. In the case of email marketing, it is a matter of taking into account the limitations in the layout and operation of email clients, and try to get our message in the best possible way even if the circumstances are not the best. For example, what can we do to improve the display of content if images are disabled? The tips below refer to the alt attribute of images, which is, in a nutshell, the alternative text to the image:
– Height and Weight defined: if we do not define the height and width of the image (or of the cell) there will be no space for the ALT text to be displayed, so it is important that the height and width attributes are present with defined values. In this way we will get a box as a placeholder where the text of our
– ALT descriptive and brief: The text must be descriptive of the image it replaces, the user must understand the message without having to download the image. In addition, this text should not be too long as it could exceed the space available (specified with the height and width attributes).
– Styled ALT: To improve the aesthetics of the email without images and the impact we generate in the user we can style the ALT tags. This is achieved by adding in the style attribute of the image the specifications for the text.
And will this ALT text be displayed on all clients? Not all of them and not all of them equally. Here you have the support of the different email services (Source: Litmus Blog). Which ones display the ALT and which ones also allow you to style it:
| Webmail | |||
|---|---|---|---|
| CUSTOMERS | IMAGES BLOCKED BY DEFAULT | ALT text | tyled ALT text |
| AOL | ✔ | ✔ | ✔ |
| Gmail | ✔ | ✔ | ✔ |
| Hotmail* Hotmail* Hotmail* Hotmail* Hotmail* Hotmail* Hotmail* Hotmail* Hotmail | ✘ | ✘ | - |
| Yahoo! | ✔ | ✔ | ✔ |
| Outlook.com | in spam | ✔ | ✔ |
| Desktop | |||
|---|---|---|---|
| CUSTOMERS | IMAGES BLOCKED BY DEFAULT | ALT text | styled ALT text |
| Apple Mail | ✘ | ✔ | ✔ |
| Lotus Notes | ✔ | ✔ | ✘ |
| Outlook 2003 | ✔ | yes but...* | ✘ |
| Outlook 2007 | ✔ | yes but...* | ✘ |
| Outlook 2010 | ✔ | yes but...* | ✘ |
| Outlook 2013 | ✔ | yes but...* | ✘ |
| Thunderbird | ✘ | ✔ | ✔ |
*...show a pre-text (information about image blocking) which makes the alt at the end and often unreadable or overlooked.
| MOBILE | |||
|---|---|---|---|
| CUSTOMERS | IMAGES BLOCKED BY DEFAULT | ALT text | styled ALT text |
| Android Email (4.0) | ✔ | ✔ | ✔ |
| Android Gmail (4.0) | ✔ | ✔ | ✔ |
| Blackberry OS 6 | ✔ | ✔ | ✔ |
| iOS 6 | ✘ | ✔ | ✔ |
| Windows Phone 7.5 | ✔ | ✘ | ✘ |
Source: Litmus
A paradigmatic example of the use of ALT text is Pizza Express. Your email with the images disabled manages to convey the message, maintain coherence with the brand image through the colours used and even draw an oven! Here is the email with images:
And the version shown with images disabled:
If you want to know more about this case, you can read in depth atThis article from the Litmus blog.
