En esta entrada aprenderemos a diseñar un correo electrónico en HTML, conociendo sus limitaciones para poder llegar al máximo de usuarios.
Diseñar un correo electrónico
Cuando diseñamos una campaña de email marketing hay muchos factores que debemos tener en cuenta para garantizar el éxito de la misma. Uno de ellos es el diseño del correo electrónico.
Debemos tener en cuenta que el diseño del correo es el soporte de la comunicación, es decir, del mensaje que queremos transmitir a nuestro destinatario, por lo que el diseño debe estar condicionado a la eficacia del mensaje. ¿Y por qué digo esto? Porque, así como cuando diseñamos una página web ésta se puede visualizar en los distintos navegadores y dispositivos con pocas diferencias, en el caso de los correos electrónicos, aunque estén diseñados como si fueran una página web, la cosa cambia y mucho.
Los factores que pueden afectar a la forma de visualizar un correo electrónico son tantos como:
- El tipo de cliente de correo electrónico: Al igual que ocurre con las páginas web, no todos los clientes de correo electrónico muestran el contenido de la misma forma.
- La configuración elegida por el usuario del cliente de correo electrónico: En algunos casos, el usuario puede haber deshabilitado determinadas funciones del cliente de correo electrónico (por ejemplo, deshabilitar la descarga de imágenes en conexiones de datos móviles).
- El sistema operativo: Los sistemas operativos también condicionan la forma de visualizar correos electrónicos.
- El dispositivo: No es lo mismo ver un correo electrónico en un monitor de 19” que en un móvil antiguo con una ancho de pantalla de 320 pixels.
- El servidor de correo entrante: Determinadas empresas, por cuestiones de seguridad, limitan las características del los correos electrónicos que admiten.
Por tanto, a la hora de diseñar nuestra campaña de email marketing, tendremos que considerar todos estos factores para que nuestro mensaje llegue al máximo número de destinatarios.
Menos es más
Si hay un tipo de correo que se visualiza en todos los clientes de correo electrónico, de todos los sistemas operativos, en todos los dispositivos y que no suelen ser filtrados por los servidores de correo entrante son los correos de texto plano.
Los correos de texto plano son correos que no contienen más que caracteres Unicode (normalmente UTF-8), que es el conjunto de caracteres habitual, incluyendo caracteres nacionales, como nuestra “ñ”, símbolos y vocales acentuadas.
Este tipo de correos contienen el mensaje “a pelo”, sin más estética que la que se pueda lograr con el propio juego de caracteres, y suelen incorporar uno o varios enlaces para que el destinatario complete las acciones.
El correo electrónico en HTML
Hoy en día, la práctica totalidad de clientes de correo electrónico admiten el formato HTML con mayor o menor fortuna. Con esto quiero decir que determinadas etiquetas de HTML son interpretadas por algunos clientes y otras no.
Por este motivo debemos echar mano de etiquetas de HTML que prácticamente están en desuso a la hora de diseñar páginas web, por ejemplo, <table> para organizar los distintos elementos en filas y columnas, algo que se hace actualmente con estructuras tipo grid en las páginas web.
Los colores suelen ser bien aceptados en fondos, letras y algunas estructuras.
La etiqueta <link> no funciona en algunos de los clientes más populares, como veremos más adelante.
En general, las etiquetas que funcionan en todos los clientes de correo electrónico suelen ser suficientes para desarrollar diseños atractivos.
Manejando las imágenes
Con frecuencia suelo recibir correos que incorporan imágenes como adjuntos y que suelen representar el logo de la empresa que aparece en la firma. Esto es un error importante porque estos adjuntos pueden ser interpretados como peligrosos por los filtros de spam y, o bien pasan el correo a la carpeta de spam, con lo que el destinatario no lo verás, o bien impide que se muestren, con lo que pierden sentido. Además, incrementan el tamaño del mensaje innecesariamente.
Si queremos mostrar imágenes en un correo electrónico, éstas deben de estar en un servidor en línea. De esta forma, introduciremos en nuestro código HTML la dirección absoluta donde se encuentra la imagen.
Sin embargo, las imágenes tienen grandes limitaciones. Por ejemplo, prácticamente ningún cliente de correo electrónico mostrará una imagen de fondo. Por otra parte, debemos considerar que el cliente de correo electrónico puede tener bloqueada la visualización de imágenes.
En definitiva, es muy importante que la comunicación esté soportada totalmente en el texto y en ningún caso debe estarlo sobre las imágenes, quedando éstas reducidas a un mero carácter ornamental.
Aplicando hojas de estilo
Cuando el desarrollo de páginas web pasó de las páginas estáticas en las que un fichero HTML incorporaba el contenido, principalmente texto, la programación (etiquetas HTML) y el formato (estilos), a las páginas dinámicas en las que se separaron el contenido, la programación y el formato, este último comenzó a definirse en forma de hojas de estilo que se vinculaban con la programación a través de la etiqueta <link>.
Sin embargo, como ya he comentado, algunos de los clientes de correo electrónico más populares, no la soportan.
Por tanto, si queremos aplicar estilos, éstos tendrán que ser en línea, bien mediante la etiqueta <style> o bien a través del atributo style de la etiqueta HTML correspondiente.
Recomiendo una visita a esta página, en donde podemos comprobar qué se ve y qué no en los principales clientes de correo electrónico.
De esta lista podemos comprobar que las versiones web de los clientes más populares (Outlook.com, Yahoo! Mail y Google Gmail), son las más restrictivas.
Diseñando para dispositivos móviles
Si habéis echado un vistazo a la tabla de clientes de correo electrónico que comentaba en el apartado anterior, veréis que también el concepto responsive solo es aceptado por los clientes en la onda de Apple. Los que no sean usuarios de Apple no podrán ver correos responsive.
Entonces, ¿cómo adaptamos nuestro diseño a los dispositivos móviles?
Un correo electrónico no debe tener un ancho superior a 550 o 600 pixels. Este es ya de por sí un formato pequeño que será visible en tablets y en muchos smartphones modernos. Si queremos ser puristas y diseñar para teléfonos más antiguos, tendremos que considerar una resolución de 320 pixels de ancho.
Por tanto, podemos tomar dos caminos: o diseñar directamente para ese ancho fijo de 320 pixels (o superior, si pensamos que los destinatarios tienen teléfonos más modernos), o hacer que nuestro formato sea flexible (que no responsive) en cuanto al ancho.
Para esto último, podemos utilizar tablas con el atributo width (ancho) expresado en porcentajes. Sin embargo, este método tiene el inconveniente de que, en dispositivos con anchos de pantalla mayores de 550 o 600 pixels, se podrían producir efectos no deseados.
Estos valores, ya sean en porcentaje o en pixels, deben aplicarse a la celda (<td>) mejor que a la tabla.
Animaciones y videos
Por razones de seguridad, nada que se ejecute en un cliente de correo electrónico está permitido. Esto incluye el Javascript y el Flash, por lo que ambas soluciones están descartadas.
Es posible, sin embargo, realizar animaciones mediante ficheros gif, con las limitaciones que hemos comentado al hablar de las imágenes.
Otra posibilidad es el uso de estilos (véase http://www.w3schools.com/css/css3_animations.asp), con las que podemos conseguir efectos muy interesantes pero que tienen las mismas limitaciones que los estilos.
Por último, la capacidad de trabajar con HTML5 para mostrar videos está igualmente muy limitada.
Trabajando con tipografías
A través de hojas de estilo podemos cambiar las aburridas tipografías que muestran por defecto los clientes de correo electrónico. Nuevamente volvemos a tener problemas con los grandes clientes de webmail, Outlook.com, Yahoo! Mail y Google Gmail, pero también los vamos a tener con las distintas versiones de Outlook.
Si aun así decidimos utilizarlas, la mejor manera de incorporarlas es mediante la regla @import o la regla @font-face y siempre como web fonts, es decir, alojadas en un servidor en línea (igual que comentábamos para las imágenes).
Es paradójico comprobar que Google anula el uso de sus Google Fonts en Gmail.
Resumiendo
Como hemos podido comprobar, diseñar correos electrónicos es un arte y siempre debes de tener en cuenta que:
- Siempre diseña una versión en texto plano.
- Utiliza la etiqueta
<table>para ordenar los elementos. - Nunca bases la comunicación en las imágenes; éstas podrían no ser visibles.
- No envíes las imágenes como adjuntos; utiliza un servidor en línea.
- Utiliza los estilos en línea, nunca vinculados a una hoja de estilos externa.
- El concepto responsive no existe en los correos electrónicos. Sin embargo, tendrás que preparar tu diseño para que se vea en dispositivos móviles.
- Podrás hacer algún efecto dinámico utilizando gifs animados o mediante estilos pero siempre estarán muy limitados.
- Podrás utilizar tipografías por medio de web fonts pero estarán, igualmente, muy limitadas.
Y, sobre todo, realiza muchas pruebas con diferentes clientes de correo electrónico para ver como se muestra tu trabajo.
