El HTML Email es una herramienta que existe hace muchos años y cobra cada vez mayor relevancia, debido a la efectividad que tiene para alcanzar excelentes resultados de Marketing y Comerciales.

Por ello, queremos dedicar este artículo a contarte lo que todo desarrollador debe saber sobre él antes de enviar su primera pieza.

Incluso si no lo eres, pero igual te interesa conocer los factores que harán de tu Email una pieza ideal, este artículo te servirá para optimizar tus envíos y multiplicar tus resultados. 

HTML Email: Aspectos fundamentales

1- Autenticación del Email

Antes de empezar a realizar tus HTML Emails, sin importar si van a ser Correos Transaccionales (disparados ante la acción de un usuario) o de Marketing (Promocionales, Newsletters, etc.), lo primero que debes hacer es configurar el entorno de envío.

Esto es lo que se denomina, en el argot de los desarrolladores, la autenticación.

La mayoría de los usuarios dispone de un proveedor externo de servicios de Correo Electrónico (ESP). Hay muchos ejemplos, como Doppler para Email Marketing y Doppler Relay para el Email Transaccional.

Es importante que, en estos casos, comprendas la estructura subyacente y el proceso de autenticación que realizan. Este es el único modo de garantizar que los mensajes lleguen a sus destinatarios.

Como seguramente ya hayas leído o escuchado alguna vez, los correos fraudulentos o phishing son prácticas que, lamentablemente, se utilizan mucho.

Por eso, es primordial que tengas en cuenta las configuraciones necesarias para evitar ser víctima de este tipo de malas prácticas.

Los DKIM y los SPF son procesos de verificación que permiten a los agentes de correo cerciorarse de que efectivamente el remitente de las piezas es quien dice ser.

Las plataformas de envío suelen facilitar todas las configuraciones necesarias para que tus HTML Emails lleguen a todos los Suscriptores con la mejor entregabilidad. 

2- Limitaciones de código

Probablemente estés al tanto de los últimos avances en materia de desarrollo web. Sin embargo, has de tener presente que el HTML Email va un paso por detrás.

Puede que lo sepas todo acerca de usar ‘divs’, ‘flexbox’, ‘grid’ y marcadores semánticos en CSS, pero la mayoría de los clientes de gestión de Correo Electrónico sólo admiten ciertas herramientas básicas de ese lenguaje de programación.

Por lo tanto, has de saber que, debido a falta de actualización de los clientes de correo, la mayoría de los usuarios no tendrán capacidad para acceder a gran parte de los contenidos CSS, elementos interactivos como Flash, elementos Iframe, JavaScript o los Formularios HTML.

Gmail, por ejemplo no soporta CSS, así que mejor evitarlos en tu HTML. Incluso, muchos clientes de correo solo admiten estilos más básicos de HTML (font-family, font-weight, etc) y no, estilos avanzados (clear, float, z-index, etc).

Por eso, el mejor consejo es dar prioridad a la sencillez teniendo en cuenta siempre estos aspectos.

3- Estructura de los mensajes en HTML Email

El contenido de tus piezas debe mantenerse en la estructura marcada por las tablas HTML. Puede que pienses que esto coarta tu libertad, pero existe un lado positivo.

Si cumples con esta regla, sólo tendrás que preocuparte por las etiquetas de tabla (table), fila (tr) y celda (td). Para que te hagas una idea, esta será el contenedor del mensaje dentro del cual podrás seleccionar módulos individualizados.

Para diseños más complicados, la recomendación es anidar tablas. Eso sí, debes considerar también el tamaño de las mismas para que puedan reproducirse correctamente también desde dispositivos móviles.

Un ancho máximo recomendable para cualquier HTML Email serían 600 píxeles para que tus piezas se muestren correctamente en prácticamente todas las resoluciones de pantalla, tanto de ordenadores como móviles.

Es de vital importancia que cada elemento tenga su propio módulo. Esto te permitirá solucionar problemas fácilmente en caso de que acontezcan más adelante. También te brindará la posibilidad de combinar de forma más rápida y cómoda diferentes tipos.

Por cuestiones de accesibilidad, también te recomendamos que incluyas el atributo ARIA role = “presentation” en cada elemento de la tabla que forma la pieza. ¿Por qué? Pues porque así los usuarios podrán leer el contenido en forma de datos tubulares, lo que les ayudará a comprender el mensaje mejor.

Para más consejos, no te pierdas este post sobre los mejores tips para maquetar tu HTML. 

4- Estilo del contenido

Dá prioridad a la sencillez a la hora de definir el diseño del contenido de tus HTML Emails. Con el propósito de asegurar el más alto grado de compatibilidad, mantén estilos online con elementos HTML específicos.

A pesar de que el 90% de los clientes de Correo Electrónico ya admiten estilos integrados, hay muchos importantes que todavía no lo hacen, lo que impide a los usuarios ver el resultado adecuado.

Particularmente, deberías revisar los siguientes factores:

• Texto

Utiliza las herramientas básicas de color, fuente, tamaño de letra, grosor y altura de CSS en tus HTML Emails. Solo con eso ya podrás hacer auténticas maravillas. Además, son totalmente compatibles con los principales clientes de Correo Electrónico. No te olvides de no dejar espacio blanco adicional en los párrafos y en los encabezados.

Utiliza una fuente que sea cross-platform. Arial, Geneva, o Georgia, por ejemplo, suelen dar buenos resultados.

• Imágenes

Intenta dejar solo las imágenes imprescindibles y nunca olvides las etiquetas alt. Así, en caso de que un cliente de correo no reproduzca la imagen de tu HTML Email, el usuario aún podrá saber qué se está intentando mostrar y la experiencia no se empaña tanto.

Además, asegúrate de que estén alojadas en servidores de acceso público y utiliza enlaces absolutos para apuntar a ellas.

• Vídeos

La mayor parte de los clientes de correo no pueden reproducirlos. Por eso, generalmente se utiliza una captura de pantalla con un link.

Lo mismo ocurre con las imágenes o colores de fondo. En lo posible, evita ambas prácticas. Si de todas maneras necesitas incluirlos, utiliza siempre HTML en vez de CSS para declarar el fondo.

Posiblemente ya te hayas dado cuenta de lo importante que es que tus HTML Emails no solo no tengan errores, sino que también sean atractivos para los Suscriptores. Puedes ver el artículo sobre Cómo mejorar el diseño de los Emails Transaccionales para volverte un profesional 🙂 

5- Herramientas modernas para crear un HTML Email

Puede que no te apetezca escribir a mano todas las etiquetas HTML que un Email de estas características requiere. Si es así, has de saber que, hoy en día, existen herramientas enfocadas a facilitarte la tarea. En el caso de los Emails Transaccionales, por ejemplo, puedes usar herramientas como Foundation for Emails.

Si, en cambio, estás enfocado en Email Marketing, herramientas como Doppler tienen Editores de Plantillas drag and drop muy fáciles de usar, orientados a quienes no tienen conocimientos de HTML Emails ni de diseño. 

HTML Email: La clave de tu estrategia

Puede que, en estos momentos, no esté entre tus planes utilizar HTML para tu proyecto de Correo Electrónico.

Sin embargo, el Email Marketing es una herramienta mucho más poderosa de lo que puedas imaginar y, por ello, no debes descartar utilizarla ahora o en el futuro. Ten en cuenta que es la herramienta digital que mayor Retorno de Inversión genera.

En cualquier caso, lo más importante de todo es que no olvides que el Email Marketing sigue siendo (y cada vez más) uno de los medios más utilizados por los consumidores y el preferido para conectarse con sus marcas predilectas. 

Por ello, es de vital importancia que trabajes con él adecuadamente y que le prestes la atención necesaria. Solo así conseguirás mejorar las ganancias de tu negocio y disfrutar de clientes más fieles y satisfechos.

• ¿Te ha gustado? Compártelo: