Esta guía trata sobre el modo oscuro, incluyendo qué es y cómo puedes asegurarte de que tus correos electrónicos se muestran correctamente para aquellos que lo utilizan.
¿Qué es el modo oscuro?
El modo oscuro es un ajuste que cambia los colores de una interfaz para facilitar su lectura. El fondo se oscurece y el texto se vuelve blanco. La principal ventaja es que reduce la fatiga visual del usuario. También se dice que el modo oscuro reduce el consumo de batería.
Es probable que los desarrolladores estén bastante familiarizados con el modo oscuro, ya que ha sido una forma popular de ver el código durante varios años. El modo oscuro también es beneficioso para las personas con sensibilidad a la luz o que trabajan de noche, ya que es más fácil leer en modo oscuro en un entorno con poca luz.
Algunas aplicaciones populares tienen una opción de modo oscuro para su interfaz de usuario, incluidas las aplicaciones de correo electrónico. Pero los clientes de correo electrónico deben gestionar el modo oscuro de forma diferente, y ahí es donde entra el reto.
Los retos del modo oscuro para los vendedores de correo electrónico
Cuando activas el modo oscuro, la interfaz de usuario de la aplicación de correo electrónico puede cambiar. Pero algunos clientes de correo electrónico también cambian el aspecto de todo el mensaje. El script de comprobación del color examina cualquier color o color de fondo con una propiedad CSS de background, color, background-color, o un atributo HTML de bgcolor o color.
En pocas palabras, el modo oscuro cambia los colores del fondo y la fuente de los correos electrónicos para que sean más claros cuando se ven en una pantalla oscura.
"Vale", estarás pensando, "pues cambiemos las fuentes para que esta transición funcione en modo oscuro". Lamentablemente, solucionar este problema no es tan sencillo.
Los mensajes de texto sin formato, con texto negro sobre fondo blanco, no suelen presentar problemas en el modo oscuro. Sin embargo, cuando los correos electrónicos se desarrollan en HTML, las cosas se complican mucho más.
Cómo preparar los correos electrónicos para el modo oscuro
Aunque mucha gente ve los correos electrónicos en modo oscuro, no todos lo hacen. Por lo tanto, el primer reto al que se enfrentan los profesionales del marketing es desarrollar mensajes de correo electrónico que funcionen tanto en el modo oscuro como en el claro. He aquí un par de buenas prácticas a adoptar.
Cambiar JPEG por PNG
Si utilizas PNG transparentes para tus imágenes, el cambio de color de fondo en modo oscuro será perfecto. De este modo, el fondo de la imagen siempre coincidirá con el nuevo color de fondo.
Pero aún así debes prepararte para el texto y los iconos negros.
Trazos blancos, elementos de diseño negros
A veces, los correos electrónicos en modo oscuro pueden hacer que tus campañas desaparezcan. Esto ocurre cuando el texto negro, los iconos, los logotipos y demás se vuelven invisibles sobre fondos oscuros.
Añadir trazos blancos alrededor del texto y los iconos es una forma eficaz de hacer que sus correos electrónicos sean más digeribles. Cuando los usuarios vean el mensaje en modo claro, los trazos blancos no serán visibles. Pero cuando lo vean en modo oscuro, los trazos blancos ayudarán a resaltar las cosas.
¿Realmente importa?
Crear correos electrónicos que funcionen en modo oscuro puede parecer mucho trabajo extra. Pero, si no lo hace, creará correos electrónicos ilegibles o que proporcionarán una mala experiencia a sus suscriptores. Ambos conducirán a la cancelación de la suscripción y a la falta de compromiso con una pieza de su estrategia de marketing que, de otro modo, sería prolífica.
Si la gente quiere ver los correos electrónicos en modo oscuro, es mejor satisfacer sus necesidades y ofrecerles esa experiencia.
Modo oscuro y compatibilidad con clientes de correo electrónico
Quizá el mayor problema de utilizar el modo oscuro para el correo electrónico es que los distintos clientes de correo electrónico, como Gmail, Apple Mail y Outlook, muestran las cosas de forma diferente.
Algunos clientes de correo electrónico invierten los colores automáticamente, mientras que otros no. Algunos clientes de correo electrónico admiten consultas de medios para esquemas de colores claros y oscuros, mientras que otros no.
Echa un vistazo:
- Apple Mail (iPhone/iPad)
Invierte automáticamente los colores cuando el fondo es transparente o blanco puro (#fffff).
- Apple Mail (macOS)
Se invierte automáticamente cuando el fondo es transparente o blanco puro (#fffff).
- Outlook (iOS)
Puede oscurecer el color de fondo.
- Outlook (macOS)
Puede oscurecer el color de fondo.
- Outlook (Windows)
Esta opción de Outlook invierte automáticamente los colores.
- Outlook.com(correo web)
Esta es la única opción de Outlook en la que funciona el intercambio de imágenes.
Puede oscurecer el color de fondo.
- Gmail (Android)
Invierte automáticamente los colores.
- Gmail
No se invierte automáticamente.
- AOL (correo web)
No hay interfaz de usuario actual en modo oscuro.
- Yahoo! (correo web)
No hay interfaz de usuario actual en modo oscuro.
Si alguien utiliza un sistema operativo o un dispositivo diferente, puede resultar más difícil utilizar el modo oscuro para el correo electrónico. Por eso es útil probar cómo se verán tus campañas en diferentes dispositivos y sistemas operativos. De esta forma, puedes ver qué funciona y qué no antes de enviarlas.
Cómo comprobar la legibilidad de los mensajes de correo electrónico en modo oscuro
Probar suena bastante fácil, ¿verdad? Envíate un correo electrónico, asegúrate de que todo se ve bien y funciona, y ¡boom! probado. Pero... como todo con el modo oscuro, no es tan sencillo. Frustrante, ¿verdad?
A ver si podemos aliviar un poco esa frustración.
1. ¿Qué clientes de correo electrónico utilizan sus suscriptores?
Compruebe qué clientes de correo electrónico utilizan más sus suscriptores. Y pruebe primero su plantilla en esos clientes.
2. Activar el modo oscuro
Antes de enviar correos electrónicos de prueba, activa el modo oscuro en tu dispositivo.
3. Envíese los correos electrónicos a sí mismo
Envía los correos electrónicos a tu propia cuenta (o a una cuenta de prueba). Compara el original con el modo oscuro. ¿Cómo se ve? ¿Qué hay que cambiar?
5. Realice cambios, inténtelo de nuevo
En un proceso de prueba manual, es fundamental utilizar el método de ensayo y error. Probar los correos electrónicos en distintos clientes, modos y dispositivos. Esto puede llevar bastante tiempo. Con suerte, después de unos meses de pruebas, podrás entender mejor qué funciona y qué no.
6. Pruebe una herramienta de modo oscuro
La forma más eficaz de probar su correo electrónico es conectarlo a una herramienta de prueba en modo oscuro. Algunos programas y aplicaciones de marketing por correo electrónico ofrecen este servicio. En estos casos, puedes conectar tu correo electrónico a la herramienta y ésta te mostrará los distintos modos de previsualización y dónde pueden estar las deficiencias. En lugar de enviarte (y reenviarte) correos electrónicos a ti mismo y comprobar diferentes dispositivos, lo tienes todo en un solo lugar.
¿Tienes algún consejo para diseñar en modo oscuro?
Nosotros sí, y estamos encantados de compartirlo. En primer lugar, aquí tienes algunos recursos útiles sobre la relación entre el desarrollo del correo electrónico y el modo oscuro:
- Buenas prácticas de diseño en modo oscuro del BEE Design Blog (2022)
- 5 consejos para el diseño de correos electrónicos en modo oscuro del blog de diseño BEE (2020)
- La Guía Definitiva del Modo Oscuro para Email Marketers de Litmus
- Modo oscuro para el correo electrónico: Qué es y cómo afrontar lo desde Email on Acid
- Modo oscuro en el correo electrónico HTML de Sidemail
Litmus acaba de publicar una guía para programadores: How to Conquer Coding Emails for Dark Mode: A Guide For Email Developers
Aquí hay dos imágenes que hablan por sí solas:
En lenguaje de desarrolladores, significa que admite el modo oscuro
Si usted o alguien de su equipo es desarrollador, hay dos formas de cambiar los colores de sus correos electrónicos para que sean más oscuros. El modo oscuro funcionará de forma diferente para los distintos clientes de correo electrónico. Pero si quieres usar tus propios colores de modo oscuro, puedes hacerlo.
@media (prefiere esquema de color: oscuro)
Puede utilizar este método para crear un tema de modo oscuro personalizado para su sitio web. Esto es similar al uso de un bloque de estilos dentro de una consulta @media para su vista Mobile Responsive, excepto que este bloque CSS funcionará para cualquier interfaz de usuario que esté configurada en modo oscuro.
@media (prefiere-color-esquema: oscuro) le permite cambiar diferentes aspectos de su sitio web, como las imágenes y el fondo, cuando alguien está utilizando el modo oscuro.
[data-ogsc]
Este método se utiliza para orientar la aplicación Outlook. Con los estilos @media (prefiere esquema de color: oscuro), ahora puede añadir los prefijos [data-ogsc] adecuados a cada regla CSS.
Probar tu correo electrónico en modo oscuro puede ser un proceso complicado, pero con los consejos adecuados, puede ser manejable. Esperamos que nuestros consejos te hayan ayudado a entender qué hacer cuando pruebes tus correos electrónicos en modo oscuro. Si necesitas más ayuda o quieres probar una herramienta de modo oscuro, te sugerimos que consultes las capacidades de Cakemail.
