Creo que ha llegado el momento hablar de un modo realista sobre las plantillas de email marketing, y hasta que punto se diferencian de una página web.
Lo cierto es que cada cierto tiempo me llega una consulta de algún email que se ve muy bien en general.
Pero tiene algún problema de visualización en ciertos clientes de correo.
O en otros casos se ve directamente fatal en todos los clientes de correo.
A veces es algo pequeño, que se puede corregir fácilmente.
Otras veces es un error de base, la plantilla está mal construida desde el principio. Primero de todo, te dejo un vídeo con el que aprenderás a crear una plantilla de newsletter de forma fácil:
No puedes diseñar plantillas de email marketing como si fuesen páginas web
Lamentablemente no es lo mismo, aunque ambas utilicen HTML.
Editores como Dreamweaver están pensados más bien para desarrollar webs, no emails, por lo que tenemos que ser cuidadosos.
Es muy probable que no lo sepas pero uno de mis primeros trabajos fué de maquetación web.
Hace mucho tiempo de eso.
Bueno no tanto, pero para un sector como el mundo online sí hace mucho.
De hecho, cuando trabajaba en mis primeras páginas web, la maquetación se hacía con tablas, no con divs.
Sí, hace bastante tiempo.
Poco a poco viví la transición al uso de CSS para la maquetación de las webs, y con ello todos los problemas y compatibilidades entre navegadores.
Horrible, lo que se veía bien en un navegador se veía mal en otro.
Porque cada navegador tenía sus propias reglas sobre como debía interpretar el código HTML.
El resultado como puedes imaginar eran horas y horas de diversión hasta que la web se veía bien en los navegadores más utilizados.
Bueno, en realidad no era tan divertido.
Más bien tenía poco de diversión.
¿Qué tiene todo esto que ver con el diseño de plantillas de email marketing?
¡Mucho amigo mio!
Así como en el mundo web los navegadores han ido evolucionando para ir soportando cada vez mejor y de forma más homogénea los estandares HTML, los clientes de correo, pues no.
Es como regresar al pasado.
Los clientes de correo soportan un HTML básico, y un CSS muy limitado, ya no digamos JavaScript.
Por eso cuando trabajemos con el diseño de plantillas de email marketing debemos trabajar con tablas y estilos inline.
No es solo que los clientes de correo no soporten la mayoría del CSS moderno, si no que no podemos hacer referencia a ficheros externos, pues no los cargarán, tampoco aplicarán los estilos que de forma general se definan en las etiquetas style dentro del head, la sección head se suele eliminar completamente, y este es uno de los problemas más frecuentes.
Muchas de estas limitaciones tienen relación con la seguridad, pues a través de la carga de ficheros externos se puede afectar a la web donde está cargado el cliente de correo.
Otras veces tiene relación con una escasa evolución de los clientes de correo, y la necesidad de mantener una compatibilidad con versiones anteriores.
El caso es que las plantillas de email marketing no se pueden hacer como una web, y me parece que seguirá siendo así por algún tiempo.
Para ayudarnos con estos aspectos un tanto complejos le he pedido ayuda a nuestra compañera Florencia que nos define algunas claves a continuación.
¿Qué estilos CSS son recomendables en un mail?
Al enviar una campaña de email con tu cuenta de Mailrelay sabes que puedes contar con nuestros templates predefinidos, con una amplia variedad de opciones para adaptarse a tus necesidades, pero si tienes experiencia en maquetado HTML también puedes subir tu propio boletín.
Sin embargo, cuando se trata de maquetar una campaña, puedes tener más de un dolor de cabeza por problemas de compatibilidad con los diferentes clientes de mail. La principal causa de estos problemas se produce porque determinados clientes no reconocen ciertas reglas de estilos CSS, para lo cual conviene estar informado.
A continuación te mostramos una lista de compatibilidades para las reglas CSS más frecuentes, en los clientes de mail más utilizados. Debajo de la misma encontrarás también algunas aclaraciones sobre casos específicos:
*width/padding en Outlook: Esta regla no es compatible si se usa en etiquetas <p> o <div>
Otros estilos: Border-color, max-width/min-width, list-style-image/list-style-position: Outlook y outlook.com (ex Hotmail) no son compatibles con estos estilos.
Responsive: por el momento sólo es compatible con iphones/ipads y apple mail, por lo que se recomienda cautela a la hora de crear / utilizar un mail responsivo.
CSS3/HTML5: tienen una tasa de compatibilidad muy baja, por lo que no son recomendados.
Además procura no usar una hoja de estilos externa, ya que la mayoría de los clientes mail no la encontrarán, por lo que tu boletín se verá sin estilos.
Por último recuerda evitar el uso de divs si tu diseño de email consta de varias columnas, en este caso las tablas son tu herramienta más confiable.
Si quieres conocer más consejos para maquetar una plantilla de mail te recomiendo que veas también el artículo sobre las 10 claves básicas para maquetar tus newsletters
Las plantillas de email están bastante limitadas
Pues sí, la compatibilidad está en una fase no demasiado buena.
Personalmente me gusta mucho un resumen que ví en Litmus, «La tiranía de las tablas, porque el diseño web y el diseño de emails es tan diferente».
| En lugar de… | Utiliza… | |
| div | table, tr, td | |
| p | td | |
| h1, h2, h3 | td, span | |
| link a css externo | td con style inline | |
| margin | td con style padding | |
| float | multiples tablas y celdas con alineación |
Como te decía antes, es como volver al pasado, pero es lo que hay.
Cómo hacer una newsletter con Mailrelay
Te dejo aquí un vídeo sobre como diseñar una newsletter con Mailrelay, para que puedas hacerlo de forma fácil:
En resumen
Lo más importante es que recuerdes que un email no es una web, y que los clientes de correo no soportan todas las funcionalidades que los navegadores sí.
Es necesario preparar nuestros diseños de email marketing en consecuencia o tendremos más problemas que beneficios.
Y esperar que la cosa mejore en el futuro.
¡Coméntame si te ha resultado útil este artículo!
Pues sí que me ha resultado útil. ¿No parece contradictorio que el diseño responsive, con el que tanto nos insisten y nos subrayan su importancia, no sea compatible con la mayoría de clientes? Me ha desmontado algunas presunciones.
Para mi sigue siendo un misterio el como ciertos servicios de correo, hacen plantillas responsive ¿Algún articulo sobre esto?
Yo por un lado, no entiendo lo del display, yo me he atrevido a realizar pruebas con display: inline-block en (b)negritas(b) y (a) enlaces y en mis pruebas no he encontrado muchos problemas con esto, más que nada para el CTA.
Aparte de superar el fastidioso line-height de outlook, no he encontrado problemas con border-color, bueno confieso que solo uso la versión completa: border: solid 1px color; y border-bottom-width. Así como el max-width, tampoco he visto que me de problemas.
Por ultimo: he visto una tendencia en el incremento de uso de GIFs (twitter, airbnb, 40 de fiebre, sony, google etc), yo mismo lo he usado para sliders. ¿Que opinas de esto? Que recomiendas para su optimo uso?
Sí, útil. No voy mal encaminado porque sigo utilizando tablas para la estructura, pero no sabía que cosas tan básicas como párrafos o encabezados hay que formatearlos como td o span.
Recomendáis ancho fijo? yo uso 500-600px, está bien?
Gracias!