Ahora que me estoy especializando en Email Marketing, uno de los problemas a la hora de desarrollar los HTML de las campañas es que sean compatibles con la mayoría de clientes de correo: Gmail, Hotmail, el puñetero Microsoft Outlook… Y, además, [redoble de tambor] tienen que ser responsive y verse bien en las apps para móviles de estos programas.
Si no cumples con esto, no esperes que se les vea bien a todos los destinatarios de la campaña o, si lo estás haciendo para una empresa, que te validen este HTML para enviarlo.
Las mejores herramientas para un Community Manager
¿De qué hablamos en este artículo?
Los problemas de maquetar HTML para Email Marketing
A la hora de enfrentarte a la maquetación de un HTML para campañas de e-mail es que todos los conocimientos de HTML5, CSS3 y Javascript que pudieras tener para web no te sirven de nada o de muy poco.
Javascript es incompatible con los E-mails
El lenguaje de programación del lado del cliente más usado es Javascript. Es la base de frameworks como jQuery, Vue JS, ReactJS, Node JS… y muchos más. Muy potente para web, pero para realizar maquetaciones en Email Marketing, no puedes usarlo.
La razón por la que no se admite programación JS en los e-mails es por seguridad. Con Javascript puedes controlar todos los aspectos de un navegador web y en e-mail esto significa poder controlar los objetos del cliente de correo, cosa que no podemos dejar que pase.
Un problema derivado de esto para marketeros es que no se puede insertar código de Google Analytics en los HTML. Para analizar aperturas/clics necesitarás insertar píxeles de tracking de un servicio de terceros, tipo TradeDoubler.
Imágenes enlazadas desde un servidor web externo
Pues bien, en un e-mail no tienes directorios donde almacenar las imágenes, ni los demás ficheros estáticos propios de una web: js, css, txt, pdf…
Para insertar una imagen, tendrás que guardarla primero en un servidor web o, preferiblemente, en un CDN (Content Delivery Network) y luego enlazar esa imagen en tu HTML con su URL del servidor web o del CDN.
[easy-tweet tweet=»Los problemas y la solución de la programación de los HTMLs en campañas de #EmailMarketing para que sean responsive y 100% compatibles incluso con Outlook» user=»dewebloping» usehashtags=»no» template=»light»]
Los vídeos no se ven en la mayoría de clientes de correo electrónico
Los vídeos son básicamente compatibles con clientes de correo electrónico de Apple y Mozilla Thunderbird. Para el resto, tendremos que usar algunos trucos y mostrar una imagen en vez del vídeo, los llamados fallbacks.
Os recomiendo que os paséis por este artículo de Email On Acid para aprender a insertar vídeos en vuestros HTML para Email Marketing.
Además, hay un problema añadido, en smartphones y dispositivos móviles, los vídeos no se reproducen automáticamente. El usuario es el que tiene que darle al play para reproducir el vídeo.
CSS en línea, ¡olvídate del fichero style.css!
Los estilos de tu CSS no podrás recopilarlos en un fichero .css, porque como te he dicho antes, no hay directorios donde almacenar los ficheros estáticos, así que, tendrás que usar la etiqueta <style> dentro del <head> de tu HTML para los estilos.
Pero, no te lo pierdas, eso no es suficientes, ya que con ciertas versiones de Microsoft Outlook la etiqueta <style> no es compatible y tendrás que usar el atributo style=»» en las etiquetas HTML donde queráis, por ejemplo, formatear el texto.
Esto es simplemente un poco coñazo.
¿Te parecen pocos? Aquí tienes más problemas
- Los GIFs animados son incompatibles con la mayoría de clientes de correo. Es poco recomendable usarlos, a menos que un buen porcentaje de los destinatarios abran el correo con apps compatibles.
- No se pueden usar frameworks como Bootstrap porque no son compatibles.
- No se pueden insertar Iframes.
- No se pueden insertar formularios.
- No todas las etiquetas HTML son compatibles.
- La maquetación para que sea 100% compatible se programa con tablas en HTML.
Cómo crear tu página web con WordPress en 10 pasos
Solución: MJML para creación de emails responsive
MJML es un lenguaje de etiquetas, como HTML, que está especialmente diseñado para maquetar e-mails responsive.
¿Aprender otro lenguaje? Parece un poco fastidioso tener que hacerlo, pero hazme caso, te va a simplificar mucho la vida en cuanto aprendas.
Pero claro, los clientes de correo electrónico no leen MJML, entonces, ¿no nos sirve? Sí que nos sirve, pero tendremos que traducir el código MJML a HTML con alguno de los editores de código compatibles. Es bastante fácil una vez le coges el truco.
Ventajas de programar con MJML vs HTML
- Simplificas mucho la maquetación y escribes menos líneas de código.
- Tiene elementos interactivos como carruseles de productos o menús en acordeón.
- El código HTML resultante es 100% reponsive y compatible con la mayoría de los clientes de correo.
- En los editores compatibles podrás ver una previsualización en vivo, sin tener que exportarlo a HTML.
- Aprenderás rápido con los ejemplos y las plantillas ya hechas por la Comunidad de MJML.
- Puedes crear módulos reutilizables para otros mailings.
- Puedes crear tus propios componentes.
No pierdas tiempo y empieza a leer la documentación de MJML para entender cómo funciona y si tienes alguna duda, puedes preguntármela en los comentarios de más abajo.
VÍDEO: Discover MJML
Imagen destacada: Announcing MJML v.2.0.
Wow, amazing weblog structure! How lengthy have you
been blogging for? you make running a blog glance easy. The full
look of your web site is great, as well as the content!