Resumen
-
Problemas comunes de renderizado en Outlook y sus soluciones
- Imágenes de fondo y estilos de botones en Outlook
- Bloqueo de imágenes por defecto
- Redimensionamiento de imágenes en Outlook
- Compatibilidad limitada con GIF animados
- Renderizado inconsistente de fuentes
- Problemas de estilo en listas en Outlook
- Columnas fantasma: corregir la alineación de columnas en Outlook
- Líneas blancas en emails de Outlook
- Hoja rápida de soluciones
Outlook es uno de los clientes de email más utilizados, pero sus diferentes versiones renderizan los emails de forma distinta. Las versiones anteriores, como Outlook 2000–2003, utilizaban Internet Explorer como motor de renderizado. Con el lanzamiento de Outlook 2007, el motor de renderizado pasó a ser Microsoft Word, que no es compatible con muchas propiedades estándar de HTML y CSS y tiene sus propios errores.
Tanto Internet Explorer como Microsoft Word tienen limitaciones específicas, que pueden hacer que los emails se muestren incorrectamente o aparezcan distorsionados.
Las soluciones de este artículo se aplican principalmente a Outlook clásico para Windows, que utiliza Microsoft Word como motor de renderizado. El nuevo Outlook para Windows y Outlook en la web utilizan un motor de renderizado moderno basado en web, por lo que algunas funciones CSS pueden comportarse de forma diferente en esas versiones.
Entender los diferentes motores de renderizado de Outlook
Las soluciones de este artículo se aplican principalmente a Outlook clásico para Windows, que utiliza Microsoft Word como motor de renderizado. Esto incluye Outlook 2007, 2010, 2013, 2016, 2019 y Outlook clásico para Microsoft 365. Como Microsoft Word no fue diseñado como un navegador web completo, tiene compatibilidad limitada con muchas propiedades modernas de HTML y CSS que se utilizan habitualmente en el diseño de emails.
El nuevo Outlook para Windows funciona de forma diferente. Está basado en la experiencia web de Outlook y utiliza Microsoft Edge WebView2, un motor de renderizado moderno basado en web. Como resultado, muchas funciones CSS que suelen fallar en Outlook clásico —como las imágenes de fondo CSS, las esquinas redondeadas, los GIF animados, los degradados y las propiedades de diseño avanzadas— están mejor soportadas.
Outlook en la web (Outlook.com y el webmail de Microsoft 365) también utiliza un motor de renderizado basado en navegador, similar al de los navegadores web modernos. Esto significa que los emails suelen renderizarse de forma mucho más parecida a como aparecen en clientes como Gmail, Apple Mail o navegadores modernos basados en Chromium.
Debido a estas diferencias, los problemas de renderizado y sus soluciones pueden variar considerablemente según la versión de Outlook que utilicen tus destinatarios.
Problemas comunes de renderizado en Outlook y sus soluciones
Al diseñar tus emails, ten en cuenta los siguientes problemas comunes:
Imágenes de fondo y estilos de botones en Outlook
-
⚠️Problema: Muchas versiones de Outlook —especialmente las versiones clásicas de escritorio que utilizan Microsoft Word como motor de renderizado— tienen compatibilidad limitada con imágenes de fondo basadas en CSS y estilos modernos de botones, como las esquinas redondeadas. Para mostrar estos elementos correctamente, Outlook clásico depende de VML (Vector Markup Language). Sin VML, las imágenes de fondo pueden no renderizarse y los botones pueden aparecer planos o rotos.
Aunque las versiones web recientes de Outlook, como Outlook.com y el webmail de Microsoft 365, son compatibles con fondos CSS, las versiones clásicas de escritorio siguen necesitando alternativas.
-
📉Impacto:
- Las imágenes de fondo pueden no aparecer.
- Los botones pueden perder su estilo y aparecer como rectángulos simples.
- Los emails pueden parecer incompletos o visualmente inconsistentes entre diferentes versiones de Outlook.
-
🛠️Solución:
- Utiliza un color de fondo sólido como alternativa.
- Para una compatibilidad completa, utiliza VML para renderizar botones e imágenes de fondo en Outlook clásico de escritorio.
- Como alternativa, utiliza una imagen de botón estática enlazada a una URL, o inserta los elementos visuales de fondo como bloques
<img>normales.
-
Ejemplos de imágenes de fondo:
- ❌ CSS estándar, funciona en clientes modernos pero no en Outlook clásico de escritorio:
<table width="600" height="200" cellpadding="0" cellspacing="0" border="0" style="background-image:url('https://via.placeholder.com/600x200'); background-size:cover;"> <tr> <td align="center" valign="middle" style="color: #fff; font-size: 24px;"> Esta es una imagen de fondo (método CSS). </td> </tr> </table>- ✅ Alternativa con VML, funciona en Outlook clásico de escritorio:
<!--[if gte mso 9]> <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:200px;"> <v:fill type="frame" src="https://via.placeholder.com/600x200" color="#cccccc"/> <v:textbox inset="0,0,0,0"> <![endif]--> <table width="600" height="200" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center" valign="middle" style="color: #fff; font-size: 24px;"> Esta es una imagen de fondo (VML para Outlook). </td> </tr> </table> <!--[if gte mso 9]> </v:textbox> </v:rect> <![endif]--> -
Ejemplos de botones redondeados:
- ❌ Botón CSS estándar, no compatible con Outlook clásico de escritorio:
<table cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif;"> Botón redondeado </a> </td> </tr> </table>- ✅ Botón VML para Outlook clásico de escritorio:
<!--[if mso]> <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="#" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#1a73e8" fillcolor="#1a73e8"> <w:anchorlock/> <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;"> Botón redondeado </center> </v:roundrect> <![endif]--> <!--[if !mso]><!-- --> <a href="#" style="display:inline-block; background:#1a73e8; color:#fff; padding:12px 30px; border-radius:24px; text-decoration:none; font-family:sans-serif; font-size:16px; font-weight:bold;"> Botón redondeado </a> <!--<![endif]-->
¿Qué es VML (Vector Markup Language)?
VML (Vector Markup Language) es un lenguaje basado en XML desarrollado por Microsoft para crear gráficos vectoriales, como formas, líneas y fondos.
En el contexto de los emails HTML, VML se utiliza como una solución alternativa para renderizar imágenes de fondo y botones con estilo en Microsoft Outlook, especialmente en versiones que utilizan el motor de renderizado de Word, como Outlook 2007-2019 y Outlook clásico para Microsoft 365.
¿Por qué es importante VML en el diseño de emails?
Outlook clásico no es compatible con propiedades CSS modernas como background-image o border-radius. VML permite a los diseñadores de emails:
- Mostrar imágenes de fondo en celdas de tablas o divs.
- Crear botones redondeados con estilos personalizados.
- Controlar elementos de diseño que, de otro modo, podrían romperse.
¿Cuándo deberías utilizarlo?
Utiliza VML solo cuando tu objetivo sea Outlook clásico de escritorio y necesites:
- Imágenes de fondo que se muestren de forma fiable.
- Botones con estilos visuales no compatibles de forma nativa.
Para todos los demás clientes de email, utiliza HTML y CSS estándar.
Bloqueo de imágenes por defecto
- ⚠️Problema: Outlook puede bloquear las imágenes a menos que el remitente sea de confianza.
- 📉Impacto: Los emails pueden parecer vacíos o rotos en la primera visualización.
- 🛠️Solución: Añade siempre texto alternativo descriptivo y considera utilizar colores de fondo o contenido HTML alternativo.
Redimensionamiento de imágenes en Outlook
- ⚠️Problema: Outlook clásico puede renderizar las imágenes con su tamaño nativo original, ignorando los anchos definidos por CSS. Esto resulta especialmente problemático al intentar reducir el tamaño de imágenes grandes y de alta resolución usando solo CSS, una práctica común para admitir pantallas de alta densidad de píxeles.
-
📉Impacto:
- Las imágenes pueden aparecer demasiado grandes en Outlook clásico.
- Los diseños pueden romperse o volverse inconsistentes entre clientes de email.
-
🛠️Solución: Para garantizar un tamaño de imagen consistente en Outlook, utiliza siempre el atributo HTML
widthdirectamente en la etiqueta<img>. Outlook respeta este atributo y ajustará la altura automáticamente para mantener las proporciones.
✅ Correcto, se redimensiona en Outlook clásico:
<img src="image.jpg" width="300" style="width:300px;">
❌ Incorrecto, Outlook clásico puede ignorarlo:
<img src="image.jpg" style="width:300px;">
width como en el estilo CSS para lograr la máxima compatibilidad entre todos los clientes.Compatibilidad limitada con GIF animados
-
⚠️Problema: Las versiones 2007–2016 de Outlook clásico para Windows solo muestran el primer fotograma de un GIF.
La animación GIF es compatible con las versiones más recientes de Outlook para Microsoft 365, las aplicaciones móviles de Outlook y Outlook.com. En Outlook para Microsoft 365, la reproducción también puede depender de la configuración de animaciones de Windows del usuario. - 📉Impacto: Si la información clave aparece en fotogramas posteriores, los usuarios no la verán.
- 🛠️Solución: Asegúrate de que el primer fotograma incluya tu CTA o el mensaje más importante.
Renderizado inconsistente de fuentes
- ⚠️Problema: En muchas versiones de escritorio de Outlook, las fuentes personalizadas no son compatibles. Cuando colocas una fuente personalizada al principio de tu lista de fuentes, Outlook puede ignorar toda la lista y usar Times New Roman por defecto, incluso si has definido fuentes alternativas seguras.
- 📉Impacto: Esto genera una tipografía inconsistente y puede afectar al branding, el diseño y la legibilidad de tu email cuando se visualiza en Outlook.
-
🛠️Soluciones:
-
✅ Utiliza selectores de atributos para sobrescribir fuentes personalizadas:
Escribe tu lista de fuentes como siempre, pero coloca la fuente personalizada al final de la lista. Después, añade este CSS:[style*="CustomFont"] { font-family: 'CustomFont', Helvetica, serif !important; }Este código garantiza que los clientes de email compatibles con selectores de atributos, como Gmail, Apple Mail y la mayoría de servicios de webmail, utilicen tu fuente personalizada si está disponible. Outlook clásico ignora selectores de atributos como
[style*="..."], por lo que utilizará las fuentes alternativas que hayas especificado.<html> <head> <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Tangerine"> <style> div {font-family: Helvetica, sans-serif, 'Tangerine';} [style*="Tangerine"] { font-family: 'Tangerine', Helvetica, serif !important; } </style> </head> <body> <div style="font-family: Helvetica, sans-serif, 'Tangerine';font-size: 48px;">Ejemplo de fuente personalizada</div> </body> </html> -
✅ Aplica CSS condicional solo para Outlook usando comentarios MSO:
Como alternativa, puedes definir tu lista de fuentes personalizadas en tu CSS y utilizar una declaración condicional MSO para sobrescribirla con fuentes de sistema estándar específicamente para Outlook.
<style> div { font-family: 'CustomFont', Helvetica, sans-serif; } </style> <!--[if gte mso 9]> <style type="text/css"> div { font-family: Helvetica, Arial, sans-serif !important; } </style> <![endif]--> - ✅ O simplemente utiliza fuentes de sistema estándar, como Arial, Calibri, Times New Roman o Verdana, que son totalmente compatibles con las versiones de Outlook.
-
Problemas de estilo en listas en Outlook
- ⚠️Problema: Las viñetas y los números pueden no mostrarse como se espera. Outlook clásico no siempre conserva el estilo predeterminado de las listas, especialmente cuando las listas están anidadas dentro de tablas o divs.
- 📉Impacto: Las listas pueden aparecer como texto sin formato, sin viñetas ni números.
-
🛠️Solución: Utiliza estilos inline o contenido alternativo. También puedes añadir símbolos manualmente, como
•, o utilizar celdas<td>para crear listas simuladas.
❌ HTML problemático, puede no mostrarse correctamente en Outlook clásico:
<table>
<tr>
<td>
<ul>
<li>Primer punto</li>
<li>Segundo punto</li>
</ul>
</td>
</tr>
</table>✅ HTML mejorado, lista simulada compatible con Outlook:
<table>
<tr>
<td style="font-family: Arial, sans-serif; font-size: 14px;">
• Primer punto<br>
• Segundo punto
</td>
</tr>
</table>Columnas fantasma: corregir la alineación de columnas en Outlook
- ⚠️Problema: Outlook clásico de escritorio suele gestionar mal los anchos exactos de columnas en diseños lado a lado. Incluso los emails responsive creados con dos columnas, como diseños de dos columnas que suman 600 px, pueden aparecer desalineados o apilados incorrectamente.
-
📉Impacto:
- Las columnas pueden moverse, apilarse incorrectamente o mostrar espacios.
- Los diseños que se renderizan correctamente en webmail o móvil pueden romperse en Outlook clásico de escritorio.
- 🛠️Solución: Envuelve las tablas de columnas dentro de una tabla “fantasma” de ancho fijo exclusiva para Outlook usando comentarios condicionales MSO. Outlook ve esta tabla fantasma y renderiza las columnas, mientras que otros clientes de email la ignoran, preservando el comportamiento responsive en el resto.
🎯 Ejemplo HTML
<table width="600" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="main_container">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center"><tr>
<td width="450">
<![endif]-->
<table width="450" align="left" border="0" cellpadding="0" cellspacing="0">
<tr><td>Contenido de la columna izquierda</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td><td width="150">
<![endif]-->
<table width="150" align="right" border="0" cellpadding="0" cellspacing="0">
<tr><td>Contenido de la columna derecha</td></tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td></tr></table>
<![endif]-->
</td>
</tr>
</table>Resumen: Utiliza columnas fantasma envueltas en comentarios MSO para forzar los anchos de columna en Outlook clásico de escritorio sin afectar al diseño en otros clientes. Es una solución ligera específica para Outlook que conserva un diseño limpio y responsive en el resto de clientes.
Líneas blancas en emails de Outlook
- ⚠️Problema: Outlook clásico de escritorio puede insertar ocasionalmente líneas horizontales blancas inesperadas entre bloques de contenido debido a errores de redondeo en las conversiones de píxeles a puntos y a una gestión inconsistente de las alturas de las tablas.
-
📉Impacto:
- Aparecen espacios no deseados en los diseños.
- Rompe el flujo visual y la consistencia de la marca.
- Difícil de predecir: puede aparecer de forma aleatoria.
- 🛠️Soluciones, prueba una o varias:
-
Utiliza valores de píxeles pares, preferiblemente múltiplos de 4
Configurafont-size,line-height,paddingyheightcon números pares, preferiblemente divisibles por 4, para reducir los errores de redondeo. -
Inserta saltos fantasma específicos para Outlook
Evita espacios con un salto de línea exclusivo para MSO:<!--[if gte mso 12]><br /><![endif]-->
-
Utiliza código específico de Microsoft
Este fragmento puede ayudar a reducir espacios no deseados al colapsar explícitamente los bordes y el espaciado de las tablas en Outlook:<!--[if gte mso 9]> <style type="text/css"> table { border-collapse: collapse; border-spacing: 0; } </style> <![endif]-->Añade este código a la sección
<head>de tu email y pruébalo a fondo. Dependiendo de tu diseño, puede afectar a otros elementos, así que siempre previsualiza tu email en Outlook antes de finalizarlo. -
Añade un espacio de no separación como buffer
Una solución alternativa común consiste en añadir un espacio de no separación ( ) justo antes de cerrar la etiqueta<td>:<table border="0" cellspacing="0" cellpadding="0"> <tr> <td> Tu oferta exclusiva te está esperando — haz clic abajo para reclamar tu descuento.<br> </td> </tr> </table>Esto puede añadir una pequeña cantidad de espacio adicional debajo del contenido, así que asegúrate de previsualizar y ajustar el diseño si es necesario.
-
Iguala los colores de fondo
Oculta las líneas configurando el cuerpo y las filas problemáticas de la tabla con el mismo fondo:<!--[if gte mso 9]> <style>body { background-color: #123456 !important; }</style> <![endif]-->
🎯 Ejemplo combinado
<!--[if (gte mso 9)|(IE)]>
<style>
table { border-collapse: collapse !important; border-spacing: 0 !important; }
</style>
<![endif]-->
<table width="600" cellpadding="0" cellspacing="0" border="0" style="background:#fff;">
<tr>
<td style="font-size:16px; line-height:16px; padding:0;">
Contenido por encima de la línea
<!--[if gte mso 12]><br /><![endif]-->
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr><td>Contenido por debajo de la línea</td></tr>
</table>
</td>
</tr>
</table>🛠 Hoja rápida de soluciones
| Problema | Solución rápida | Funciona en |
|---|---|---|
| Las imágenes de fondo no se muestran | Utiliza un color de fondo sólido como alternativa. Para una compatibilidad completa, utiliza VML en el editor HTML/MJML. | Outlook clásico de escritorio |
| Los botones pierden las esquinas redondeadas | Utiliza VML para botones con estilo, o una imagen de botón enlazada a una URL. | Outlook clásico de escritorio |
| Las imágenes se bloquean por defecto | Añade siempre texto alternativo descriptivo a las imágenes. Considera utilizar un color de fondo o contenido HTML alternativo. | Todas las versiones de Outlook |
| Las imágenes se muestran con un tamaño incorrecto | Define el atributo width en la etiqueta <img>, no solo en CSS. Ejemplo: <img src="..." width="300">
|
Outlook clásico para Windows |
| Los GIF animados no se reproducen | Asegúrate de que el primer fotograma del GIF contenga tu mensaje clave o CTA. | Outlook clásico 2007–2016 de escritorio |
| Las fuentes vuelven a Times New Roman | Utiliza fuentes de sistema, o usa selectores de atributos para fuentes personalizadas: [style*="CustomFont"] { ... }. |
Outlook clásico de escritorio |
| Las listas pierden viñetas o números | Utiliza viñetas de texto sin formato (•) o crea listas simuladas usando tablas y estilos inline. |
Outlook clásico de escritorio |
| Los diseños de columnas se rompen o se desalinean | Utiliza “columnas fantasma” con tablas condicionales MSO en HTML/MJML para Outlook de escritorio. | Outlook clásico de escritorio |
| Aparecen líneas blancas o espacios | Utiliza valores de píxeles pares, saltos fantasma MSO, bordes de tabla colapsados y colores de fondo coincidentes. Combina varias soluciones si es necesario. | Outlook clásico de escritorio |