Crear cuenta Mailrelay Crear cuenta Mailrelay Crear cuenta Mailrelay

Hablemos seriamente de plantillas de email marketing (compatibilidades)

Publicado por Mailrelay en abril 27, 2015

plantillas de email marketing

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:

¡Envía hasta 75.000 emails gratis!

 

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:

plantillas de email marketing

*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!

jose-argudo

Suscríbete al blog y recibe los mejores contenidos semana a semana:







Acepto la política de privacidad.



Comentarios

  1. Fernando

    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!

    28/04/2015 - 09:16:42 Publicar una respuesta
    • Mailrelay

      ¡Hola Fernando! Creo que al final el código, cuanto más simple mejor. 600px de ancho debería de estar bien, se podría utilizar un ancho flexible con porcentajes (100%), pero ahí también entraríamos en la necesidad de definir un ancho mínimo, en la mayoría de los casos.

      28/04/2015 - 09:20:34 Publicar una respuesta
      • Fernando

        Ok. Gracias.

        28/04/2015 - 19:38:37
  2. Edgar Gutierrez

    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?

    27/04/2015 - 19:37:18 Publicar una respuesta
    • Khayil

      Otra duda, disculpen que sea algo muy obvio, pero porque las plantillas como esta: https://github.com/rodriguezcommaj/salted/blob/master/salted-responsive-email-template.html

      Usan las etiquetas de (html) (head) y (style), así como mediaqueries, yo pensé y perdonen la ignorancia, que siempre hay que mantener los estilos inline en cada elemento html. Y siempre uso solamente (table) para el cuerpo de las plantillas.

      De hecho yo como mucho maqueto de esta forma y luego lo paso por el “CSS inliner tool” de mailchimp, pero no se sí esta sea a mejor práctica, aunque ando haciendo esto hace mas de 4 años, nunca estoy seguro sí es la mejor forma de hacerlo o no.

      27/04/2015 - 21:11:21 Publicar una respuesta
      • Mailrelay

        ¡Hola Khayil! Hay clientes de correo que soportan las etiquetas (style) dentro del (head), sin embargo para una máxima compatibilidad, incluso con clientes de correo antiguos es mucho mejor utilizar los estilos inline.

        Puede que llegue el momento en que el volumen de suscriptores con clientes de correo antiguos sea muy pequeño, y podamos comenzar a avanzar en emails con con código más complejo.

        Yo muchas veces utilizo: http://premailer.dialect.ca/

        Revisándolo todo bien, porque no siempre acierta y se hace necesario realizar correcciones manuales 🙂

        Pero de momento, creo que enviar los estilos inline es lo mejor que podemos hacer, para asegurar una mayor compatibilidad.

        28/04/2015 - 09:38:28
    • Mailrelay

      ¡Hola Edgar! Creo que no te entendí bien ¿Por qué te parece un misterio que se ofrezcan plantillas responsive? En cuanto al uso de display ¿Te refieres a Gmail de escritorio? El max-width en las versiones antiguas de Outlook no se hasta que punto funcionaría bien.

      En todo caso es cuestión de probar cada newsletter antes de enviarla y corregir lo que veamos 🙂

      En cuanto a los GIFs a mi también me gustan, además los clientes de correo que no soportan la animación mostrarán el primer frame, con lo que no se pierde todo tampoco. Mi recomendación sería pues que el primer frame muestre la imagen completa, o bien una imagen que deje claro su cometido.

      Tampoco abusar, pero hay ocasiones en los que pueden ser útiles 🙂

      28/04/2015 - 10:19:25 Publicar una respuesta
  3. Elena

    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.

    27/04/2015 - 17:56:30 Publicar una respuesta
    • Mailrelay

      Sí, Elena, estoy contigo en que debería haber una mejor compatibilidad, clientes de correo como el Gmail de escritorio por ejemplo. También está el problema de las versiones antiguas de otros clientes de correo, aún queda un largo camino por recorrer me parece.

      Ah, y también debes tener en cuenta tu lista de suscriptores, quizá la mayoría sí utilicen clientes de correo que soporten responsive, o quizá no 🙂

      27/04/2015 - 18:03:36 Publicar una respuesta
      • Elena

        Buen consejo! En cualquier caso, también es recomendable seguir el principio KISS, a menos elementos, más difícil es que se desmonte el e-mail 😉

        28/04/2015 - 09:06:58
      • Mailrelay

        ¡Hola Elena! En eso estoy contigo, normalmente no es necesario que nuestro email parezca una página web, a menos elementos mejor casi siempre, incluso me atrevería a decir que es más efectivo a la hora de conseguir los objetivos 🙂

        28/04/2015 - 09:24:03

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


Menu Title