Email HTML Design

Outlook usa el motor de renderizado de Microsoft Word, que ignora display:flex, display:grid y la mayor parte de CSS posicional. Maqueta cada email con <table role="presentation" cellpadding="0" cellspacing="0" border="0"> anidadas. El 9% de aperturas globales sigue ocurriendo en clientes Outlook de escritorio, suficiente para romper un lanzamiento.

<table role="presentation">
 <tr>
  <td>Producto</td>
  <td align="right">$1,290</td>
 </tr>
</table>

<div style="display:flex">
  <div>Producto</div>
  <div>$1,290</div>
</div>

El estandar de la industria es un contenedor de 600px de ancho maximo, que cabe en el panel de previsualizacion de Outlook sin scroll horizontal. Combinalo con width:100% para que se reduzca con fluidez en pantallas de 320-414px. El 60% de las aperturas ocurre en movil; un ancho fijo de 600px sin width:100% obliga a zoom out o scroll lateral.

Apple Mail y Outlook.com invierten colores automaticamente, a veces volviendo ilegible un logo negro sobre fondo oscuro. Declara @media (prefers-color-scheme:dark) para servir tu paleta intencional y anade las metaetiquetas color-scheme y supported-color-schemes. Para Outlook usa comentarios condicionales <!--[if mso]> que fuerzan fondos solidos.

Outlook y muchos clientes corporativos bloquean imagenes por defecto: hasta el 43% de usuarios las ve apagadas en la primera apertura. Cada <img> necesita alt descriptivo y un bgcolor en la celda contenedora para que el espacio no quede blanco vacio. Define width, height y display:block para evitar huecos bajo la imagen.

Outlook ignora padding y border-radius en anclas, dejando un enlace minusculo de un solo pixel clicable. Construye botones "bulletproof" con una tabla anidada que aporta el color de fondo via bgcolor y el espaciado via padding de la <td>. Apunta a un area tactil de al menos 44x44px para movil.

Solo Apple Mail e iOS soportan @font-face con fuentes web; Gmail y Outlook caen al fallback. Define siempre una pila completa terminando en una fuente web-safe del sistema: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif. Una fuente personalizada sin fallback se renderiza como Times New Roman serif en Outlook, rompiendo la jerarquia.

El preheader es el texto que la bandeja muestra tras el asunto; si lo dejas vacio, el cliente extrae el primer texto del email ("Ver en navegador", "image.png"). Coloca un <div> oculto con display:none;max-height:0;overflow:hidden de 40-100 caracteres que complemente el asunto. Anade caracteres invisibles (‌ ) para evitar que el cuerpo se filtre detras.

Envia cada campana como multipart/alternative con una parte text/plain ademas del HTML. Mejora la entregabilidad (los filtros de spam penalizan los emails solo-HTML), sirve a clientes texto-plano y a lectores de pantalla, y se muestra en relojes y notificaciones. La version texto debe contener las URLs completas, no "haz clic aqui".