Cómo crear Plantillas HTML de Email

El diseño y maquetación de plantillas HTML para correos es un tarea un poco complicada debido a la diversidad de clientes de correo, por que interpretan de distinta forma el código HTML y CSS.

Clientes de correo

Los clientes de correo electrónico renderizan el HTML y CSS de manera diferente. Por ejemplo: Outlook utiliza el motor de renderizado de Microsoft Word, mientras que Gmail y otros clientes basados en web tienen sus propias reglas.

Estructura básica

Para crear la estructura básica en HTML utiliza tablas en lugar de divs. Crea una tabla contenedora y luego la tabla principal que debe debe tener un ancho máximo de 600px.


<!DOCTYPE html>
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Mailing Demo</title>
  <meta name="x-apple-disable-message-reformatting">
</head>
<body>
<table width="100%" bgcolor="#f6f6f6" cellpadding="0" cellspacing="0">
  <tr>
    <td>
      <table align="center" width="600" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
        <tr>
          <td>
            <!-- Email content -->
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Agregar tablas

Agrega el ancho total de la tabla con el atributo width.
Evitar unir celdas (colspan), estas no se visualizan correctamente.
Agrega el ancho a cada columna usando el atributo width.
Elimina separaciones de celdas con cellpadding="0" y cellspacing="0".
Utiliza el atributo bgcolor para poner color de fondo a las celdas.


<!-- section header -->
<table width="568" cellpadding="0" cellspacing="0" bgcolor="#ffffff">
  <tr>
    <td style="padding: 16px 0;">
      <!-- content header -->
    </td>
  </tr>
</table>

Agregar imágenes

Utiliza URLs absolutas para agregar imágenes.
Agrega el ancho y alto de la imagen con los atributos width y height.
Agrega el ancho y alto de la imagen con estilos inline.
Agrega display: block; a las imágenes para que se muestren correctamente.
Agrega margin: 0; para evitar márgenes innecesarios.
Siempre agrega el texto alternativo a las imágenes.


<img src="https://www.kodetop.com/images/logo-kodetop.png" alt="Kodetop"
    width="92" height="16px" style="width: 92px; height: 16px; display: block; margin: 0;">

Agregar textos

Los textos deben colocarse dentro de la etiqueta <p>.
Utiliza tipografías estándar del sistema como Arial, Verdana, y Georgia.
Utiliza css-inline, muchos clientes de correo no soportan CSS en el header o externos.
Los enlaces usan las mismas reglas que los textos.


<p style="color: #333; font-family: Arial; font-weight: normal; font-size: 15px; line-height: 1.4;">
  Los clientes de correo electrónico renderizan el HTML y CSS de manera diferente.
  Por ejemplo: <strong style="font-weight: bold;">Outlook</strong> utiliza el 
  motor de renderizado de Microsoft Word, mientras que
  Gmail y otros clientes basados en web tienen sus propias reglas.
</p>

Recomendaciones adicionales

Usa vistas previas en Gmail, Outlook, y otros clientes para probar cómo se ve tu correo.
Limita el ancho a 600px para garantizar la visualización en la mayoría de las pantallas.
Evita usar videos, JavaScript o formularios, estos no se visualizarán correctamente.
Siempre incluye texto alternativo para imágenes.
Evita el uso excesivo de imágenes y asegúrate de optimizarlas previamente.

Plantillas y Frameworks

Considera usar Frameworks específicos para emails como MJML o herramientas como Foundation for Emails que simplifican la creación de correos electrónicos responsive y compatibles.

Conclusión

La maquetación de mailings requiere atención al detalle y pruebas exhaustivas en múltiples clientes de correo. Siguiendo estas recomendaciones y utilizando las herramientas adecuadas, puedes crear correos electrónicos que lleguen a tus destinatarios tal como los diseñaste.