Modo oscuro en el correo: tres comportamientos de los clientes y qué hacer con ellos

Más de una cuarta parte de los correos se abre hoy en modo oscuro, y los clientes lo tratan de tres formas distintas: dejan los colores intactos, los invierten parcialmente o los invierten del todo. Puedes influir con dos metaetiquetas y una media query, pero no funcionan en todas partes. A continuación, qué hace exactamente cada cliente y qué código da más control.

Hasta qué punto está extendido

El modo oscuro dejó de ser un ajuste minoritario. Los datos de Litmus sitúan las aperturas en oscuro por encima de la cuarta parte del total, y el crecimiento viene del móvil, donde el tema suele seguir la configuración del sistema.

Hay otra cifra que importa más y que casi nadie cita. Las aperturas en modo oscuro son bastante más propensas a ser instantáneas: se abre el correo y se cierra enseguida. La diferencia es demasiado grande para ser casualidad, y la explicación es sencilla: un correo roto por la inversión resulta ilegible y se cierra.

Otro dato revelador del mismo estudio: solo el 11% de los marketers tiene siempre en cuenta el modo oscuro al maquetar, aunque muchos más lo prueban. El problema se ve, pero no se resuelve, porque la solución no es evidente.

Tres comportamientos de los clientes

No es evidente porque no existe un comportamiento único. Los clientes se dividen en tres grupos, y el mismo correo se ve distinto en cada uno.

• no tocan los colores: el correo se muestra tal como se maquetó y solo cambia la interfaz alrededor
• inversión parcial: los fondos claros se oscurecen y el texto oscuro se aclara, pero los colores de marca sobreviven
• inversión total: se invierten todos los colores, incluidos los que pusiste a propósito

La traicionera es la inversión total. Si hiciste el correo oscuro a propósito, ese cliente lo volteará a claro y obtendrás justo lo contrario de lo que pretendías.

El código que toma el control

Lo primero y más importante: dos metaetiquetas en la cabecera. Le dicen al cliente que has contemplado ambos esquemas, y eso por sí solo detiene la inversión forzada en varios clientes.

Después va una media query con tus propios colores oscuros. La entienden Apple Mail, el correo de iOS, Outlook 2019 y posteriores, Thunderbird y Samsung Mail: una parte considerable de la audiencia.

Fíjate en los dos enfoques del ejemplo: los colores de fondo y texto se redefinen, mientras que para el logotipo hay dos versiones preparadas y una se oculta. Es más fiable que confiar en que la inversión lo trate bien.

Qué se rompe con más frecuencia

• un logotipo oscuro sobre fondo transparente se vuelve invisible
• el texto gris claro sobre blanco pasa a gris oscuro sobre oscuro tras la inversión y pierde contraste
• las imágenes con fondo blanco dejan rectángulos claros en medio de un correo oscuro
• los botones con relleno claro se funden con el fondo tras el volteo
• los separadores y bordes finos desaparecen por completo
• un correo hecho oscuro a propósito se vuelve claro con la inversión total

El logotipo: el gran quebradero de cabeza

El logotipo es el problema más frecuente, y en las encuestas a marketers las imágenes se señalan como la parte más difícil de preparar para el modo oscuro.

Hay tres soluciones que funcionan, y la elección depende de cuánta precisión de marca necesites. Primera, un logotipo con contorno o placa blanca: funciona en todas partes pero se ve de compromiso. Segunda, dos versiones del logotipo, clara y oscura, conmutadas por media query: elegante pero no universal. Tercera, un logotipo con colores legibles sobre cualquier fondo, decisión que suele tomarse a nivel de manual de marca.

Cómo probarlo

No pruebes en un solo sitio. El conjunto mínimo es Apple Mail en el teléfono, la app de Gmail en el teléfono y Outlook en el ordenador: entre los tres cubren los tres comportamientos.

• envíate una prueba y ábrela en el teléfono con el modo oscuro activado
• cambia el tema del sistema sin cerrar el correo: algunos clientes lo repintan al instante
• revisa por separado el logotipo, los botones y las imágenes con fondo blanco
• comprueba que el texto se lee: el contraste importa más que la precisión del color

Cómo funciona en Mailvex

Mailvex admite el modo oscuro a nivel de correo: los colores de fondo, texto y bloques se definen por separado para claro y oscuro, y las metaetiquetas se añaden a la cabecera automáticamente al compilar.

Puedes cargar dos versiones del logotipo y el cambio ocurre solo. La vista previa alterna entre esquemas dentro del editor, así que los problemas aparecen antes de enviar y no después.

Preguntas frecuentes

¿Hace falta un correo aparte para el modo oscuro?

No. Un correo aparte exigiría conocer de antemano el tema del destinatario, y esa información no está disponible para quien envía. El camino correcto es un solo correo con una media query que el cliente aplique cuando corresponda.

¿Por qué un correo se ve bien en una bandeja y roto en otra?

Porque los clientes aplican modelos de inversión distintos, y lo hacen después de la entrega. Quien envía no controla qué modelo elige el cliente; solo puede declarar una preferencia y preparar una alternativa.

¿Bastan las metaetiquetas por sí solas?

Resuelven el problema principal: la inversión total forzada en algunos clientes. Pero definir colores oscuros concretos exige una media query. Las metaetiquetas sin ella dan previsibilidad, no control.