Guía de tips HTML

Especificaciones, diseño y armado de piezas HTML

Detalles generales:

Utiliza códigos HTML compatibles con la mayoría de los usuarios de correo electrónico. Los clientes de correo electrónico interpretan el código HTML de manera diferente, por lo que es importante resaltar la importancia de la compatibilidad de los códigos a utilizar. Evita el uso de elementos avanzados de HTML o CSS, como JavaScript, animaciones y transiciones, ya que pueden no ser compatibles en todos los clientes.

Los 4 puntos principales para comenzar a armar un HTML para Email Marketing son los siguientes:

No incluir TAGS <SCRIPT> , y por tanto, ningún código JAVASCRIPT en el mismo.

Al momento de incluir TAGS <STYLE>, se debe comprender que cada proveedor de correo puede entender los parámetros de manera diferente. Por eso, si se decide utilizar clases se recomienda testear en varios dispositivos antes de realizar el envió final.

Se sugiere evitar programar el HTML siguiendo las nuevas definiciones de HTML 5. Por lo tanto, el mismo debe ser programado en base TABLAS y evitando preferentemente la utilización de DIVS. Esto se debe a que los motores de muchos programas de correo no reconocen las nuevas herramientas de desarrollo, y esta es la única forma de intentar unificar el criterio para que la visualización sea relativamente uniforme utilizando una única plantilla.

Se recomienda que el peso máximo del HTML no supere los 100kb ya que es el máximo renderizado por Gmail. Si excede este peso Gmail corta el código y agrega un enlace para ver el newsletter completo en una nueva ventana.

En la plataforma ICOMMKT es recomendable subir sólo la tabla que con tiene todo el HTML, sin los siguientes tags.

a. <html></html>
b. <head></head> ni todo lo que pueda llegar a incluirse en este como: title, metatags, etc.
c. <body></body>

Todos los estilos que se le quieran asignar a los objetos del HTML deberán ser declarados en forma INLINE, es decir, dentro del atributo style de cada objeto.

Se sugiere, además, que cada tabla, celda o columna tenga especificado su estilo, ya que dependiendo desde que proveedor de correo se esté visualizando la pieza, puede o no heredar bien los estilos.

Los anchos y altos en las tablas, celdas o columnas se recomienda además de especificarlo en el style, agregarlo con su atributo width=”ancho” y height ”alto”.

Un ejemplo de esto sería lo siguiente:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="550" style="width:550px;" align="center" valign="top"></td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>

Todos los textos deberán estar dentro de un <span></span>, el cual debe incluir su formato en el style.

Teniendo en cuenta el ejemplo anterior, al agregarle un texto quedaría de la siguiente manera:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="550" style="width:550px;" valign="top">
            <span style="font-family:Tahoma, Arial; font-size:18px;color:#000000; line-height:20px;">Titulo.<br /></span>
            <span style="font-family:Tahoma, Arial; font-size:15px;color:#000000; line-height:17px;">Subtitulo.<br /></span>
            <span style="font-family:Tahoma, Arial; font-size:12px;color:#000000; line-height:14px;">Comentario.<br /></span>
        </td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>

Tipografía y diseño

El diseño debe ser fácil de leer. Utiliza un tamaño de letra suficiente para que los destinatarios puedan leer el contenido sin tener que hacer zoom. Emplea un tipo de letra claro y de tamaño legible, como Verdana, Arial, o cualquiera de las tipografías de sistema, es decir, que forme parte de las que vienen instaladas por default en la mayoría de los ordenadores, las cules son:

Arial,
bold, bold italic, italic
Comic Sans,
bold, bold italic, italic
Georgia,
bold, bold italic, italic
Lucida Sans Unicode,
bold, bold italic, italic
Tahoma,
bold, bold italic, italic
Times New Roman,
bold, bold italic, italic
Trebuchet,
bold, bold italic, italic
Verdana,
bold, bold italic, italic

Si se utiliza una tipografía personalizada solo la podrán visualizar correctamente las personas que la tengan instalada en su PC. Y al momento de agregarlas en el código, no utilizar comillas simples o dobles.

Recomendaciones para imágenes

Las imágenes pueden mejorar el aspecto visual de tus correos electrónicos, pero asegúrate de que sean apropiadas y relevantes para el contenido del mismo. En lo posible, deben tener completo el atributo ALT con la descripción de la imagen. Esto genera los siguientes beneficios:

Disminuye la posibilidad de ser considerado spam
Garantiza que el usuario conozca el contenido de la imagen, aún sin haber descargado las misma.

Utiliza imágenes optimizadas en tamaño y peso para que la carga del correo electrónico sea rápida.

El peso máximo recomendado es 1 MB, para así mejorar el tiempo de carga del email, más puntualmente cuando la comunicación se abre desde un celular con 3G / 4G.

Se pueden usar GIF animados: Además de tratar de tener en cuenta el peso máximo recomendado, algunos proveedores de correo, principalmente la app Outlook de escritorio, no son capaces de mostrarlos animados. Muestran el GIF, como una imagen estática del primer frame de la animación, por lo cual se recomienda que si el GIF animado contiene algo que sea vital para la comunicación, este armado en el primer frame animado para asegurar la visualización en todos los dispositivos ya sea que se muestre animado o no.

Por otro lado, también es recomendable agregarle el ancho y alto al tag <IMG> (como atributos HTML y por style) para que el newsleter mantenga
la misma forma por más que el usuario decida no descargar las imágenes del news.

Asimismo, es importante agregar el siguiente valor al style de dicho TAG: display: block. Este permite resolver la incompatibilidad entre Hotmail y Chrome, por la cual se muestran espacios en blanco entre imágenes consecutivas.

Las celdas que contengan imágenes (<TD>) deberán tener por style el siguiente parámetro: line-height:1px. Esto permite resolver una inconsistencia que hay entre ciertos programas de correo y los navegadores desde los cuales se accede a los mismos.

Un ejemplo de una tabla con una imagen sería el siguiente:

<table cellpadding="0" cellspacing="0" border="0" width="600" style="width:600px;">
    <tr>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
        <td width="500" style="width:500px; line-height:1px;" valign="top">
            <img src="RutaImagen.jpg" alt="Descripcion Imagen" width="500" height="150" style="width: 500px; height: 150px; display: block;" />
        </td>
        <td width="25" style="width:25px;" align="center" valign="top"></td>
    </tr>
</table>

Recomendaciones: Se debe evitar el uso de MAPAS de IMÁGENES para garantizar el correcto funcionamiento de los LINKS sobre imágenes, así como el posterior seguimiento estadístico dentro de la plataforma. En su lugar, se sugiere cortar todas las imágenes donde se quiera incorporar un LINK.

Buenas prácticas

Sigue estas buenas prácticas para crear correos más atractivos y efectivos para tu campaña de email marketing.

Optimiza para dispositivos móviles: La mayoría de las personas revisan su correo electrónico desde su teléfono móvil, por lo que es importante que tus correos estén optimizados para estos dispositivos. Utiliza un diseño responsive que se adapte al tamaño de la pantalla y asegúrate de que los botones y enlaces sean lo suficientemente grandes como para ser tocados fácilmente en pantallas táctiles.

Incluye una opción de texto plano: Incluye una versión de texto plano del correo electrónico para los destinatarios que no puedan o no deseen ver la versión HTML. Esto también puede ayudar a evitar que el correo electrónico sea filtrado como spam.

Haz pruebas en diferentes clientes de correo electrónico: Antes de enviar tu correo electrónico a la lista de destinatarios, realiza pruebas en diferentes clientes de correo electrónico para asegurarte de que se vea correctamente. Prueba en diferentes dispositivos y navegadores para asegurarte de que el correo electrónico sea legible y tenga un aspecto consistente.

Consulta nuestro artículo: Cómo crear Newsletter HTML

Actualizado el: 17/02/2023

¿Este artículo te resultó útil?

¡Gracias!