El diseño defensivo o defensive design es aquel que busca minimizar las consecuencias negativas del mal uso de un dispositivo o el que busca “optimizar el peor de los casos”. En el caso del email marketing se trata de tener en cuenta las limitaciones en la maquetación y el funcionamiento de los clientes de email, y tratar de hacer llegar nuestro mensaje de la mejor forma posible aunque no se den las mejores circunstancias. Por ejemplo, ¿qué podemos hacer para mejorar la visualización del contenido en el caso de que las imágenes estén deshabilitadas? Ls consejos a continuación se refieren al atributo alt de las imágenes, que es, en pocas palabras, el texto alternativo a la imagen:
– Height y Weight definidos: si no definimos la altura y el ancho de la imagen (o de la celda) no habrá espacio para que se muestre el ALT text, por lo que es importante que estén presentes los atributos height y width con valores definidos. De esta manera obtendremos un cuadro a modo de placeholder donde aparecerá el texto de nuestro
– ALT descriptivo y breve: El texto ha de ser descriptivo de la imagen que sustituye, el usuario debe comprender el mensaje sin necesidad de descargar la imagen. Además, este texto no debe ser muy largo ya que podría exceder el espacio del que disponemos (especificado con los atributos height y width)
– Styled ALT: Para mejorar la estética del email sin imágenes y el impacto que generamos en el usuario podemos dar estilo a las etiquetas ALT. Esto lo conseguiremos añadiendo en el atributo style de la imagen las especificaciones para el texto.
Y este texto ALT ¿se mostrará en todos los clientes? No en todos y no en todos por igual. Aquí tenéis el soporte de los distintos servicios de email(Fuente: Litmus Blog). Cuáles muestran los ALT y cuales, además, permiten darle estilo:
| Webmail | |||
|---|---|---|---|
| CLIENTES | IMÁGENES BLOQUEADAS POR DEFECTO | ALT text | tyled ALT text |
| AOL | ✔ | ✔ | ✔ |
| Gmail | ✔ | ✔ | ✔ |
| Hotmail* | ✘ | ✘ | — |
| Yahoo! | ✔ | ✔ | ✔ |
| Outlook.com | en correo no deseado | ✔ | ✔ |
| Desktop | |||
|---|---|---|---|
| CLIENTES | IMÁGENES BLOQUEADAS POR DEFECTO | ALT text | styled ALT text |
| Apple Mail | ✘ | ✔ | ✔ |
| Lotus Notes | ✔ | ✔ | ✘ |
| Outlook 2003 | ✔ | si pero…* | ✘ |
| Outlook 2007 | ✔ | si pero…* | ✘ |
| Outlook 2010 | ✔ | si pero…* | ✘ |
| Outlook 2013 | ✔ | si pero…* | ✘ |
| Thunderbird | ✘ | ✔ | ✔ |
*…muestran un texto previo (información sobre el bloqueo de imágenes) que hace que el alt quede al final y muchas veces no sea legible o se pase por alto
| MÓVIL | |||
|---|---|---|---|
| CLIENTES | IMÁGENES BLOQUEADAS POR DEFECTO | ALT text | styled ALT text |
| Android Email (4.0) | ✔ | ✔ | ✔ |
| Android Gmail (4.0) | ✔ | ✔ | ✔ |
| Blackberry OS 6 | ✔ | ✔ | ✔ |
| iOS 6 | ✘ | ✔ | ✔ |
| Windows Phone 7.5 | ✔ | ✘ | ✘ |
Fuente: Litmus
Un ejemplo paradigmático del uso de los ALT text es el de Pizza Express. Su email con las imágenes deshabilitadas consigue transmitir el mensaje, mantener la coherencia con la imagen de marca a través de los colores utilizados e incluso ¡dibujar un horno! Aquí tenéis el email con imágenes:
Y la versión que se muestra con las imágenes deshabilitadas:
Si queréis conocer a fondo este caso podéis leer en profundidad este articulo del blog de Litmus.
Un comentario en “Defensive design en email marketing: ALT frente al bloqueo de imágenes”