Conclusiones rápidas

• Outlook para Windows procesa los correos electrónicos con el motor de Word e ignora las imágenes de fondo CSS.
• Los degradados en el correo electrónico fallan por completo en todas las versiones de Outlook para Windows.
• Siempre establezca un color de fondo sólido como alternativa detrás de cualquier imagen de fondo.
• Utilice VML en los comentarios condicionales de Outlook para forzar la representación de los fondos.
• Nunca coloques texto que soporte peso en una imagen que podría no cargarse correctamente.
• Prueba cada envío en clientes de correo electrónico reales antes de pulsar enviar.

Pasas horas perfeccionando una sección principal con un degradado a sangre completa y una imagen de marca que abarca todo el ancho. Se ve impecable en tu herramienta de diseño. Luego envías una prueba a Outlook 2016 y llega como un cuadro blanco vacío con texto flotando en su interior. Bienvenido al desarrollo de correos electrónicos.

Las imágenes de fondo y los degradados son algunas de las herramientas con mayor impacto visual para un diseñador, pero también de las menos fiables una vez que el correo electrónico sale del editor. Una imagen de fondo en un correo electrónico es cualquier imagen que se coloca detrás del contenido en lugar de insertarse en línea como una imagen estándar. El problema es que las bandejas de entrada suelen discrepar, y de forma contundente, sobre si ese fondo debería aparecer o no.

Esta es la guía práctica para la resolución de problemas de los equipos de operaciones de marketing B2B que trabajan con Oracle Eloqua y Adobe Marketo Engage. Explica con detalle por qué fallan los degradados y las imágenes de fondo en los correos electrónicos, qué clientes presentan problemas y las soluciones alternativas que mantienen el mensaje intacto cuando el diseño falla.

¿Por qué fallan los degradados y las imágenes de fondo en los correos electrónicos?

Fallan porque los clientes de correo electrónico no comparten un único motor de renderizado como lo hacen los navegadores web. Un navegador utiliza un motor moderno como Blink o WebKit; cada cliente de correo electrónico utiliza su propio sistema, y ​​algunos de estos sistemas tienen más de una década. Esta fragmentación explica por qué un mismo correo electrónico puede visualizarse correctamente en treinta o más combinaciones diferentes de clientes y dispositivos, y por qué la compatibilidad con CSS en los clientes de correo electrónico es tan desigual.

Outlook en Windows muestra el correo electrónico con Microsoft Word.

El principal culpable es Outlook para Windows. Todas las versiones de escritorio desde 2007 hasta 2021 renderizan el correo electrónico HTML usando el motor de renderizado de Microsoft Word, no un motor web. Por lo tanto, cuando alguien pregunta si Outlook admite imágenes de fondo, la respuesta honesta para la aplicación de escritorio de Windows es no: la propiedad se ignora y el elemento vuelve al color sólido que se haya configurado, o simplemente no muestra nada.

Para obtener una visión más amplia del concepto de representación gráfica que sirve de base a este artículo, consulte la guía práctica sobre diseño de correo electrónico adaptable para Eloqua y Marketo , a la que se suma este análisis en profundidad.

Microsoft documenta el motor de renderizado de Word y su CSS no compatible , nombrando explícitamente background-image, background-position y background-repeat como propiedades que ignora.

Gmail, Yahoo y Samsung filtran CSS de forma diferente.

Outlook es el principal culpable, pero no es el único. Gmail aísla los estilos y puede eliminar todo el atributo de estilo si no le gusta algún valor, lo que suele ser la razón por la que no se muestra la imagen de fondo en Gmail. Yahoo Mail aplica su propio filtrado CSS, y Samsung Email, a pesar de estar basado en Chromium, introduce sus propias peculiaridades en cuanto al tamaño y el posicionamiento. Apple Mail, basado en WebKit, es la excepción, ya que renderiza los fondos de forma muy similar a un navegador.

¿Funcionan los degradados en el correo electrónico? La división en la atención al cliente.

Los degradados en el correo electrónico cuentan una historia con dos caras. En los clientes modernos se visualizan a la perfección; en Outlook para Windows, simplemente no se visualizan.

La razón por la que esto es tan importante para los remitentes B2B es el alcance. Se estima que Outlook para Windows representa entre el 20 y el 40 por ciento de las aperturas en audiencias empresariales, por lo que una franja en el correo electrónico que simplemente desaparece no es un problema estético; significa que una gran parte de su lista ve un diseño defectuoso.

¿Qué clientes de correo electrónico admiten imágenes de fondo en los correos electrónicos?

La compatibilidad es mejor que la de los degradados, pero aún está lejos de ser universal. Según los datos de compatibilidad de Can I Email, la propiedad CSS background-image tiene una compatibilidad de alrededor del noventa por ciento en general, una cifra que oculta los clientes más importantes para los equipos B2B. Apple Mail, Gmail webmail e iOS Mail la manejan bien; Outlook para Windows no la admite en absoluto; Yahoo y Samsung son parciales e impredecibles, especialmente en lo que respecta al tamaño del fondo.

Para conocer la situación actual de cada cliente, Can I Email publica una tabla de compatibilidad de imágenes de fondo CSS en tiempo real que conviene consultar antes de adoptar cualquier técnica de fondo.

Un detalle práctico: el atributo `background` de HTML en una tabla o celda de tabla tiene un alcance mayor que la propiedad CSS, incluso en algunas versiones antiguas de Outlook. Por eso, el patrón confiable combina tres elementos: el atributo `background` de HTML, el estilo `background-image` en línea y un color sólido de reserva, de modo que al menos uno de ellos se aplique a todos los clientes.

¿Cómo se envían degradados e imágenes de fondo de forma segura?

No se puede obligar a todos los clientes a mostrar un fondo, así que lo mejor es buscar una degradación gradual: el correo electrónico debe seguir funcionando sin él.

Siempre establece un color de fondo alternativo.

Cada elemento con un degradado o una imagen de fondo necesita un color de fondo sólido alternativo, que se define con el atributo `bgcolor` o un estilo `background-color`. Elija un color extraído de la imagen para que el diseño se mantenga si la imagen no se carga. Vea el modo oscuro aquí: un color de fondo blanco alternativo detrás de un elemento oscuro puede invertirse a casi negro en Apple Mail o Gmail en Android, haciendo que el texto blanco superpuesto desaparezca, así que elija un color de marca medio oscuro como color alternativo.

Utilice el patrón por capas: atributo HTML, CSS en línea y VML para Outlook.

Cuando una sección realmente necesita la imagen, utilice un enfoque infalible. Una imagen de fondo infalible es aquella diseñada para funcionar incluso en clientes que rechazan el CSS. En el caso específico de Outlook, esto significa una imagen de fondo VML: lenguaje de marcado vectorial envuelto en comentarios condicionales de Outlook que solo Outlook puede leer, mientras que otros clientes utilizan el CSS estándar.

<!--[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="frame" src="https://yourdomain.com/hero-bg.jpg" color="#1a1a2e" />
  <v:textbox inset="0,0,0,0"><![endif]-->
<td background="https://yourdomain.com/hero-bg.jpg" bgcolor="#1a1a2e"
    style="background-image:url('https://yourdomain.com/hero-bg.jpg');
           background-color:#1a1a2e; background-size:cover; background-position:center;">
  <!-- your content here -->
</td>
<!--[if gte mso 9]></v:textbox></v:rect><![endif]-->

Este es el patrón estándar de la industria para plantillas empresariales. Su único inconveniente: VML requiere dimensiones fijas, lo que dificulta su uso en diseños totalmente fluidos; por lo tanto, resérvelo para secciones destacadas de alto valor en lugar de para cada bloque.

En caso de duda, utilice una imagen en primer plano y nunca confíe en el texto como elemento principal.

Si es imprescindible que un elemento visual aparezca en todas partes, utilice una etiqueta `<img>` de primer plano en lugar de una de fondo. Las imágenes de primer plano se visualizan correctamente en todos los navegadores principales, salvo en casos de bloqueo de imagen. Y sea cual sea la opción que elija, nunca coloque texto legible y de gran tamaño directamente sobre una imagen de fondo: si la imagen se bloquea o se elimina, el texto también se pierde y el mensaje deja de ser legible.

Donde esto muerde en Eloqua y Marketo

Ambas plataformas permiten insertar HTML personalizado, por lo que las técnicas de VML y comentarios condicionales están disponibles tanto si creas una campaña de Eloqua como un programa de Marketo. El problema reside en el propio editor visual: algunos creadores de arrastrar y soltar eliminan o escapan los comentarios HTML al guardar, incluidos los comentarios condicionales de Outlook que envuelven tu VML. Crea diseños estándar en el Editor de diseño de Eloqua o en el nuevo Diseñador de correo electrónico de Marketo , pero para tratamientos de fondo complejos, trabaja directamente en el código fuente HTML y confirma que los comentarios condicionales se conservan al guardar.

También es importante tener claro el vocabulario de la plataforma. En Eloqua, la iniciativa se denomina Campaña; en Marketo, Programa. La elección entre plantillas de correo electrónico de Eloqua y módulos de Marketo bloqueados o desbloqueados determina quién puede editar de forma segura un bloque de fondo. Si estandariza las secciones principales en varios envíos, crear plantillas de correo electrónico personalizadas y seguras para la marca es la forma más sencilla de bloquear el patrón una vez y reutilizarlo.

Una vez finalizada la compilación, considere las pruebas de control de calidad de la campaña de correo electrónico como el filtro principal y verifique cada cliente importante antes de enviar el correo. Los mismos servicios de pruebas entre clientes que utiliza 4Thought Marketing, Litmus y Email on Acid, permiten realizar estas previsualizaciones rápidamente, pero la decisión final recae en una persona.

Conclusión

Los degradados y las imágenes de fondo en los correos electrónicos no son imposibles; requieren un enfoque diferente al del diseño web. Supón que Outlook para Windows ignorará tu CSS, que Gmail podría eliminarlo y crea fondos que permitan que el correo se vea correctamente incluso si la imagen no llega. Establece un color de reserva, usa VML solo cuando sea necesario, evita incluir contenido que soporte peso en la imagen y deja que el control de calidad sea la última instancia. Si sigues estos pasos, tus correos electrónicos se verán profesionales en todas las bandejas de entrada importantes.

Si necesitas ayuda para crear plantillas de correo electrónico que se visualicen correctamente en Eloqua y Marketo, ponte en contacto con nosotros en 4Thought Marketing.

Acerca de 4Thought Marketing
Somos una consultora de automatización de marketing B2B e IA, especializada en lograr que la tecnología compleja funcione de verdad. Desde 2008, hemos ayudado a cientos de organizaciones de los sectores de servicios financieros, tecnología, manufactura e inmobiliario a sacar el máximo provecho de Eloqua, Marketo y sus integraciones con CRM. Ofrecemos a nuestros clientes servicios integrales en estrategia de automatización de marketing, ciclo de vida de los leads, IA, cumplimiento normativo, gestión de preferencias y mucho más. DESCUBRE NUESTROS SERVICIOS or Póngase en contacto .

Preguntas frecuentes