Crear un HTML para emailing

Crear un HTML para emailing

Construyendo un sólido HTML para email

En algún momento hemos necesitado crear un HTML para campaña de emailing, pero, nos hemos encontrado con la dificultad que supone programar como hace 15 años una web.

Para crear una campaña de Email Marketing hay ciertos aspectos importantes que no debemos olvidar y que son los ingredientes del éxito, entre ellos, permiso, relevancia, timing y contenido interesante son muy importantes. Sin embargo, el reto más importante lo traen los diseñadores, que es construir un HTML que todos los webmails y clientes de correo puedan leer y mostrar de (casi) la misma manera.

 

Igual, pero diferente

Construir un email no es construir una web. Mientras que los navegadores web continúan su marcha progresiva hacia los estándares, muchos clientes de correo electrónico se han quedado en el pasado de forma obstinada. Incluso algunos hicieron una marcha atrás.

En 2007, Microsoft cambió el motor de renderizado de Outlook de Internet Explorer al de Word. Sí, el procesador de textos. Añada a esto las peculiaridades de los principales clientes webmail como Gmail y Outlook.com (antes Hotmail), espolvorea un poco de Lotus Notes y entonces nos damos cuenta de lo diferente que es el juego de email.

Aunque no sin esfuerzo, se puede lograr un “estándar” de visualización. Desde mi experiencia, la clave es enfocarse en tres cosas.

  • Primero: hay que tratar de ser lo más simple posible. Cuanto más complejo es un diseño de emailing, más choque con alguno de los pocos estándares de soporte. Además, de cara a la usabilidad, si llenamos de cosas la pantalla, haremos que la atención de los usuarios se divida y no logremos nuestros objetivos.
  • Segundo: se necesita programar como hace una década. Eso significa volver a las tablas, usar CSS en línea y seguir las guías de código que comentaré más adelante.
  • Tercero: tenemos que testear los diseños de forma regular. Sólo porque una plantilla parezca que está bien en Hotmail hoy, no significa que lo vaya a hacer el mes que viene.

 

Usando tablas para el diseño

Dado que ciertos clientes como Gmail y Outlook 2007 soportan mal los estilos de float, margin y padding, se va a necesitar usar tablas como esqueleto del email. Mientras que las tablas anidadas están muy soportadas, no hay un tratamiento coherente del ancho, margen y relleno dentro de las celdas de la tabla. Para mejores resultados, mantenga esto en cuenta a la hora de codificar la estructura de la tabla.

 

Establecer el ancho en cada celda además de la tabla.

Cuando se combina los anchos de la tabla, el ancho y relleno de los td y los de la CSS en un email, el resultado final es diferente en caso cualquier cliente de correo. El método más fiable para determinar el ancho de una tabla es hacerlo en cada celda y a veces no ponerlo en la propia tabla.

Anchos de la tabla

 

Nunca hay que asumir que si no se especifica el ancho de una celda el cliente de correo va a adivinarlo por sí mismo. No lo hará. Además hay que evitar usar porcentajes. Clientes como Outlook 2007 no los respetan, especialmente en tablas anidadas. Hay que usar píxeles. Si se quiere se puede añadir el relleno a cada celda, ya sea usando el atributo de tabla cellpadding o la regla de padding de CSS en cada celda, pero nunca se deben combinar las dos.

 

Anidar para no errar

Anidar tablas es mucho más fiable que usar márgenes derechos e izquierdos o rellenos para las celdas de la tabla. Se puede conseguir el mismo efecto usando tablas anidadas y dará mejores resultados en aquellos clientes de correo con más problemas.

 

Usar una tabla contenedor para los colores de fondo

Muchos clientes de correo ignoran los colores de fondo marcados en la CSS en la etiqueta <body>. Para trabajar con colores de fondo, es mejor rodear el email con una tabla con ancho al 100% y colocarle el color de fondo en la misma tabla.

Color de fondo en tabla

 

En el caso de las imágenes de fondo, es mejor ignorarlas y no usarlas ya que algunos clientes de correo (como Outlook 2010) no las soportan y nunca las leerán ni las mostrarán.

 

Evita espacios blancos innecesarios en las celdas de la tabla.

Cuando sea posible, evita los espacios en blanco entre tus <td>. Ciertos clientes de correo (Yahoo y Outlook.com) pueden añadir espacios adicionales antes y después del contenido de la celda en algunos casos.

 

Otra forma de evitarlo es marcar siempre el ancho y alto de los <td> dentro de la tabla, de esta manera evitamos problemas.

Anchos en el td

 

Mete siempre tu CSS en línea

Gmail es uno de los culpables de esto. Al despojar la CSS de <head> y de <body> en todos los emails, no nos queda otra que mover toda la CSS en línea. La buena noticia es algo que puedes hacer de forma automática. Con servicios gratuitos como Premailer podemos mover toda la CSS en línea con un solo click. Recomiendo dejar este paso para el final para no tener que repetir código si haces cambios.

 

El Testeo… Siempre!

Mientras que los estándares de los gestores de correo no han progresado demasiado en los últimos años, hay cierto cambio continuo (para bien o para mal) en algunos emails. Los Webmails como Yahoo!, Outlook.com y Gmail son muy conocidos por estos pequeños cambios. En incontables ocasiones hemos comprobado como un diseño dejaba de funcionar sin explicación aparente

 

Por esta misma razón es importante testear continuamente nuestros diseños de email. Siempre hay que tratar de hacer un testeo rápido, especialmente en nuestros Webmail, por ejemplo enviándonos uno a nuestras diversas cuentas de correo. Lo bueno de esto es que después de testear algunas campañas de email encontraremos los fallos muy rápidamente ya que se volverán predecibles y podremos hacer diseños HTML que entren fácilmente en la bandeja de entrada.

Enviar comentario

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

Imagen CAPTCHA

*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pin It on Pinterest

Share This

Compártelo

Comparte este post con todo el mundo!