El enfoque de diseño basado en tablas

Los clientes de correo electrónico — especialmente Outlook en Windows, que utiliza el motor de renderizado de Microsoft Word — no ofrecen compatibilidad con flexbox, grid ni siquiera con un diseño fiable a nivel de bloque. Las tablas son la única primitiva estructural que se renderiza de forma coherente en los principales clientes de correo.

Todo correo electrónico adaptable comienza con una <table> externa de ancho 100 % que actúa como cuerpo del mensaje, seguida de una tabla interna de ancho fijo (normalmente 600px) que contiene el contenido propiamente dicho. Este patrón de dos niveles constituye la base de casi todas las plantillas de producción.

Incluya siempre cellpadding="0" cellspacing="0" border="0" en todas las tablas. Sin ellos, Outlook inserta espacios inesperados. Añadir role="presentation" indica a los lectores de pantalla que omitan la semántica de tabla, lo cual es correcto porque las tablas de diseño no son tablas de datos.

Para crear varias columnas, anide una tabla con dos celdas <td> dentro de la fila de contenido. Cada celda contiene una columna. Evite div+float: Outlook ignora float y apila las columnas verticalmente de todos modos, lo que rompe el diseño.

El panel de vista previa de escritorio, de facto, tiene unos 600px de ancho. Diseñar para ese ancho mantiene el correo visible cómodamente y sin desplazamiento horizontal en Outlook, Gmail de escritorio, Apple Mail, Yahoo y Thunderbird al mismo tiempo.

Para las pantallas pequeñas, seleccione las celdas de la tabla interna mediante una media query que establezca width en 100 % y display en block, haciendo que las columnas se apilen verticalmente. iOS Mail y Gmail para Android respetan las media queries; Outlook 365 de escritorio las ignora, pero conserva el diseño de escritorio de 600px.

Los colores y las imágenes de fondo deben aplicarse a las celdas <td>, no a los divs. Outlook admite de forma fiable el atributo bgcolor en td, mientras que background-color de CSS en un div puede eliminarse o ignorarse por completo, según el cliente.

Outlook necesita Vector Markup Language (VML) para las imágenes de fondo. Envuelva el background-image de CSS moderno en comentarios condicionales <!--[if mso]>...<![endif]--> con una alternativa v:rect en línea para que Outlook renderice la imagen mientras todos los demás clientes usan CSS.

Evite flexbox, grid, las propiedades personalizadas (cuya compatibilidad es limitada) y la mayoría de las técnicas de posicionamiento. Limítese a display: block/inline, anchos fijos mediante atributos y estilos en línea. El resultado parece anticuado según los estándares web, pero se renderiza de forma idéntica en todas las bandejas de entrada.

Use cellpadding (atributo) y una sola celda <td> con relleno para el espacio interno. Los márgenes en las celdas de tabla no son fiables en Outlook; el padding en td es universal. Combine bgcolor y padding en el mismo td para crear componentes de «tarjeta» sin divs.

Añada role="presentation" a todas las tablas de diseño para que los lectores de pantalla no anuncien «fila, columna 1 de 2». Incluya también texto alternativo en todas las imágenes, texto real para cualquier contenido (no imágenes de texto) y un orden claro y jerárquico de los encabezados.

¿Por qué se utilizan tablas —en lugar de divs con CSS flexbox— para diseñar los correos electrónicos?

El diseño de los correos electrónicos HTML utiliza tablas anidadas con cellpadding/cellspacing/border en cero y role="presentation". Una tabla externa de ancho 100 % centra una tabla interna de 600px; las celdas td anidadas forman columnas que las media queries pueden apilar en móviles. Evite flexbox/grid, use bgcolor en td y añada alternativas VML para los fondos de Outlook.