Armado de un HTML: buenas prácticas de Email Marketing

Un error común a la hora de empezar a trabajar en Email Marketing es diseñar de igual manera que para una landing page. Existen distintas prácticas que siempre recomendarán nuestros asesores en la Mesa de Ayuda para poder llevar a cabo una campaña exitosa, prolija y que funcione correctamente donde destaca un hecho en particular: la simpleza.

Pueden descargar aquí un HTML básico con todo lo comentado a continuación para entender mejor lo que veremos.

Dicho esto… ¿por dónde empezamos? Si bien emBlue ofrece distintos templates para diferentes clases de negocios, podemos armar nuestro propio flyer para cumplir nuestras expectativas. Existen varios programas para armar nuestro HTML. El más conocido y, tal vez, el más simple para diseñadores es Adobe Dreamweaver, que permite escribir el código mientras vemos una previsualización en vivo de todo lo que estamos haciendo. También existen editores que nos permiten escribir directamente nuestro código, como Sublime Text y Notepad++, entre muchos otros.

***ACLARACIÓN IMPORTANTE***Es una práctica muy común utilizar simplemente un archivo de imagen dentro de una tabla en un HTML y hacer el envío. Si bien esto es completamente válido y posible de hacer, es algo que no recomendamos bajo ningún criterio. Los distintos servidores destinatarios analizan varios factores a la hora de detectar si un correo es SPAM o no, y podremos evitar algunos de ellos teniendo un equilibrio entre imágenes y texto en nuestro correo (vale aclarar, que si el texto está en una imagen, no cuenta dentro de este “equilibrio”). Además, es muy común que los servidores bloqueen las imágenes de un nuevo remitente. Si no hay texto y nuestro destinatario no las activa, simplemente verá una X.***

Cómo decíamos al principio, Email Marketing y páginas web son dos mundos distintos. No utilizaremos las etiquetas <html>, <head> o <body> y simplemente crearemos una tabla contenedora dónde alojaremos todo el HTML. Respecto a los estilos, los haremos en línea (dentro de cada etiqueta), y dejaremos el Cascading Style Sheets (CSS) 100% exclusivo al diseño responsive. Asimismo, priorizar las tablas sobre los divs, ya que éstos no siempre son interpretados correctamente por servidores destinatarios,

En este HTML, podrán ver una tabla, que adentro tiene otra. Esto (obviamente con mucha más información) será nuestra pieza: filas y columnas con su respectivo estilo, texto, imágenes y links.

Es recomendable que el ancho de nuestra pieza no supere los 600px para que el receptor del mensaje no se encuentre con la sorpresa de tener que scrollear horizontalmente.

¿Qué significa cada etiquetade HTML?

<table>: las distintas tablas que creemos en nuestro HTML contendrán elementos en los <tr> y <td>. Mediante distintas tablas podemos darle la estructura necesaria a nuestros envíos. Podemos definir Ancho (width), el espacio entre las columnas (cellspacing), el espacio entre el borde de la celda y lo que contiene (cellpadding), el borde (border), la alineación (align) y estilos entre muchas otras cosas, utilizando además clases de CSS para luego utilizar en el Responsive.
<tr>: representan las distintas filas de nuestra tabla. No haremos ningún tratamiento sobre esta etiqueta.

<td>: son las distintas columnas de nuestra tabla. Aquí, además de los mismos parámetros de alineación y ancho, podremos trabajar con un abanico de estilos, siendo los más comunes los de elección de tipografía (recomendado que sean de sistema), color de la misma y color de fondo entre muchos otros.

<a>: etiqueta donde estarán los links. Es importante que nuestras piezas además de informar, contengan algún call to action, para incrementar el potencial interés de nuestros destinatarios. Los links pueden aplicarse tanto en texto como en imagen. Dentro de la misma, vamos a definir a dónde nos llevará el hipervínculo a través del HREF, dónde se abrirá el link (target _blanck si es en una nueva ventana), los estilos y si queremos que el link tenga algún nombre en particular.

<img>: dentro de cada columna, podremos agregar imágenes. Es recomendable utilizar imágenes que no pesen mucho más de 100kb para lograr que nuestro HTML cargue lo más rápido posible en la casilla destinataria. Un error común es utilizar imágenes que están directamente en nuestra computadora. Debemos siempre utilizar la ruta de la imagen hosteada en algún lugar de la nube. Sea un File Transfer Protocol (FTP) propio, el banco de imágenes de emBlue y/o cualquier banco de imágenes público como lo son Imgur o Puush. En esta etiqueta, además de asignarle un ancho a nuestra imagen, podremos darle estilos (siendo el “display: block;” uno de los más importantes para asegurar que nuestras imágenes y sus estructuras no se vean afectadas), y la posibilidad de agregar un texto alternativo a las imágenes con la propiedad “alt”. Esto último es muy importante ya que si una imagen no se puede mostrar por algún motivo (un bloqueo o que se rompió la ruta de la misma), el destinatario puede interesarse de igual manera, y habilite las imágenes para ver el resto del mensaje. La descripción alt de una imagen también es muy útil para los ciegos, quienes acceden a la información del email a través de un sistema que lee el contenido. Si la imagen no tiene descripción, no se detallará que allí hay una imagen con el contenido detallado.

Responsive Design

Algo importante hoy en día es poder armar nuestro diseño de manera responsive, para que la gran mayoría de dispositivos y servidores puedan leer nuestro email de manera correcta. Esta característica del diseño permite que nuestro contenido se adapte al dispositivo desde donde se lea (desktop, tablet, celular, etc.). En este HTML, verán un estilo creado al comienzo que se tendrá que tener en cuenta tanto en tablas como en imágenes para que se vayan achicando según el ancho correspondiente. Cuando un dispositivo tenga menos de 650px de ancho, el correo se comenzará a achicar acorde. Asignando las clases nos aseguramos que siempre se vaya adaptando al 100% del ancho del dispositivo, aunque esto lo pueden determinar a su gusto.

Si lo que quieren es que los elementos se vean de manera distinta en la PC que en mobile (por ejemplo, que bajen elementos cuando se ve en mobile), pueden utilizar este código.

Te mostramos cómo aplica buenas prácticas en lo que hace a creación de HTML. ¿Tenías en cuenta algunas de estas especificaciones? ¿Usas algunas otras? ¡Cuéntanos!

Luca Gonzalez

Coordinador de la Mesa de ayuda. Se asegura que cada cliente pueda utilizar la plataforma a la perfección. En su tiempo libre juega al futbol y es experto en los videosjuegos. Su pelicula favorita es Cristopher Nolan.

Post Relacionados