← Todos los artículos
· 14 min de lectura

Compatibilidad con clientes de correo electrónico: Qué funciona dónde

Conoce qué funciones de CSS y HTML funcionan en qué clientes de correo electrónico.

La compatibilidad con clientes de correo electrónico es el principal desafío del desarrollo de correo HTML. A diferencia de los navegadores web, que en gran medida han convergido en estándares, los clientes de correo renderizan HTML y CSS de manera inconsistente. Esta guía documenta qué funciona dónde.

Si quieres evitar lidiar directamente con la compatibilidad, constructores de correo como Sequenzy y frameworks como MJML manejan estos problemas por ti. Pero entender el panorama te ayuda a tomar decisiones informadas.

Los principales clientes de correo electrónico

Outlook (Windows)

El cliente más desafiante. Outlook 2007-2019 usa el motor de renderizado de Microsoft Word, no un motor de navegador. Esto significa:

  • Sin flotación CSS
  • Sin imágenes de fondo en divs (funcionan en celdas de tabla)
  • Soporte limitado para margen/relleno
  • Sin posicionamiento CSS
  • Las tablas son requeridas para el diseño

Outlook 365 (nuevo Outlook) es ligeramente mejor pero aún tiene limitaciones significativas.

Gmail

Gmail elimina las etiquetas style a menos que estén en el head (para algunos clientes). También elimina muchas propiedades CSS. Limitaciones clave:

  • Elimina algunos selectores CSS
  • Sin soporte para consultas @media incrustadas en algunos contextos
  • Requiere estilos en línea para fiabilidad
  • Bloquea imágenes externas por defecto

La app de Gmail (móvil) tiene mejor soporte CSS que Gmail web en algunas áreas.

Apple Mail (macOS/iOS)

El cliente de correo más capaz. Usa WebKit, similar a Safari. Soporta:

  • Consultas de medios
  • Animación CSS (casos de uso limitados)
  • Imágenes de fondo
  • Propiedades CSS modernas

Si tu audiencia es principalmente de usuarios de Apple, tienes más flexibilidad de diseño.

Yahoo Mail

Soporte CSS moderado. Elimina algunos estilos pero menos agresivamente que Gmail. Soporta imágenes de fondo con reservas.

Outlook.com (Hotmail)

Diferente de Outlook de escritorio. Usa un renderizador basado en navegador. Mejor soporte CSS que Outlook de escritorio pero aún tiene peculiaridades.

Soporte de propiedades CSS

Seguro de usar en todas partes

/* These work in all major clients */
color: #333333;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
line-height: 1.5;
text-align: center;
text-decoration: none;
background-color: #ffffff;
border: 1px solid #cccccc;
padding: 10px; /* on table cells */
width: 100%;
max-width: 600px;

Soporte parcial (requiere pruebas)

/* Work in most clients, issues in Outlook */
border-radius: 4px; /* No Outlook support */
background-image: url(...); /* Use VML for Outlook */
box-shadow: ...; /* Limited support */
margin: 10px; /* Inconsistent in Outlook */

Evitar o usar con precaución

/* These cause problems */
display: flex; /* No email support */
display: grid; /* No email support */
position: absolute/relative; /* Very limited */
float: left/right; /* Outlook issues */
transform: ...; /* Limited support */
animation: ...; /* Only Apple Mail */

Técnicas de diseño

Tablas para estructura

Las tablas siguen siendo el método de diseño confiable:

<table role="presentation" width="100%" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center" style="padding: 20px;">
      <table width="600" cellpadding="0" cellspacing="0">
        <tr>
          <td>Content here</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Comentarios condicionales de Outlook

Apunta específicamente a Outlook:

<!--[if mso]>
  <!-- Outlook-only code -->
  <table width="600"><tr><td>
<![endif]-->

  <div style="max-width: 600px;">
    Content for all clients
  </div>

<!--[if mso]>
  </td></tr></table>
<![endif]-->

VML para imágenes de fondo en Outlook

Las imágenes de fondo en secciones requieren VML para Outlook:

<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:300px;">
<v:fill type="tile" src="background.jpg" color="#ffffff" />
<v:textbox inset="0,0,0,0">
<![endif]-->

<div style="background-image: url(background.jpg); background-color: #ffffff;">
  Content here
</div>

<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->

Imágenes

Código de imagen básico

<img
  src="https://example.com/image.jpg"
  alt="Description"
  width="600"
  height="300"
  style="display: block; max-width: 100%; height: auto; border: 0;"
>

Atributos clave:

  • width/height: Establece dimensiones (Outlook las necesita)
  • display: block: Elimina el espacio debajo de la imagen
  • max-width: 100%: Escalado responsivo
  • border: 0: Elimina el borde de imagen enlazada

Formatos de imagen

  • JPG: Fotos, imágenes complejas
  • PNG: Transparencia, gráficos simples
  • GIF: Animación (con cuidado)
  • SVG: Soporte limitado, evitar en correo
  • WebP: No soportado en Outlook

Fuentes

Pila de fuentes web seguras

font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, Times, serif;
font-family: 'Courier New', Courier, monospace;

Fuentes personalizadas

Las fuentes web funcionan en algunos clientes (Apple Mail, iOS, algunos Android). Usa con reservas:

<style>
  @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
</style>

<p style="font-family: 'Open Sans', Arial, sans-serif;">
  Text with custom font
</p>

Outlook y Gmail usarán la reserva. Apple Mail usará la fuente personalizada.

Consultas de medios

El soporte varía significativamente:

<style>
  @media screen and (max-width: 600px) {
    .mobile-full-width {
      width: 100% !important;
    }
    .mobile-hide {
      display: none !important;
    }
    .mobile-stack {
      display: block !important;
    }
  }
</style>

Soporte de consultas de medios:

  • Apple Mail: Soporte completo
  • iOS Mail: Soporte completo
  • Gmail App (iOS): Soporte
  • Gmail App (Android): Soporte
  • Gmail (web): Limitado
  • Outlook: Sin soporte

Usar constructores de correo para compatibilidad

Los constructores de correo abstraen las preocupaciones de compatibilidad. Sequenzy genera HTML que funciona en todos los clientes. Diseñas visualmente, la herramienta maneja la salida técnica.

Frameworks como MJML compilan marcado semántico a HTML compatible. Escribes código limpio, el framework genera las tablas anidadas y estilos en línea.

Herramientas de prueba como Litmus muestran el renderizado en más de 90 clientes. Ve los problemas antes de enviar.

Estrategia de pruebas

  1. Prueba en Outlook primero. Si funciona allí, probablemente funcione en todas partes.
  2. Verifica en Gmail. La eliminación de CSS puede causar problemas.
  3. Verifica en móvil. Más del 60% de las aperturas son en móvil.
  4. Prueba con imágenes desactivadas. Asegúrate de que el mensaje sea claro sin imágenes.

La conclusión

La compatibilidad con clientes de correo electrónico es compleja pero manejable. Mantente en técnicas probadas: tablas para diseño, estilos en línea, fuentes web seguras con reservas. Prueba en varios clientes antes de enviar.

Para equipos que quieran evitar la complejidad, herramientas como Sequenzy y MJML manejan la compatibilidad automáticamente. La salida está probada, y te enfocas en el contenido en lugar de peculiaridades de renderizado.