Blog Email Marketing

Dark mode, así se ven tus emails

Por Lidia - 11-06-2020 - Categoría: Email Marketing

Imagen Dark mode, así se ven tus em

En 2018 Apple introdujo en su lector de correo de escritorio el “Dark mode” o “modo oscuro". Poco después Apple lo incorporó en iOS mail y le siguieron los grandes de la industria como Gmail y Outlook.com.

Actualmente el “modo oscuro” es una opción usada por muchos usuarios y por esta razón es importante asegurarnos que nuestros emails se ven bien en este nuevo entorno de lectura.

CONTENIDO

 

Qué es el “modo oscuro”

El dark mode, night mode o modo oscuro, es un esquema de color que se aplica a los lectores de correo y que consiste en utilizar colores claros para iconos, elementos de la interfaz de usuario y tipografías, sobre fondos de colores oscuros. Es una opción de accesibilidad disponible tanto en gestores de correo como en sistemas operativos y aplicaciones.

Por qué los usuarios utilizan el “modo oscuro”

El modo oscuro o dark mode, es una tendencia en auge por múltiples razones:

  • Reduce la fatiga visual: Los textos en colores claros sobre fondo oscuro, sobre todo en entornos con poca luz, hacen que el usuario experimente menos fatiga visual.
  • Ahorro de energía: Al reducir el brillo de la pantalla, la vida útil de la batería es mayor.
  • Legibilidad: Los textos son más fáciles de leer para muchos usuarios.
  • Preferencias: Muchos usuarios simplemente prefieren utilizar interfaces con colores oscuros.

Lectores de correo que soportan esta opción

Los usuarios pueden escoger utilizar el modo oscuro en los siguientes lectores de correo:

  • Aplicaciones móviles
    • Apple Mail
    • Gmail app (Android 10, iOs 13)
    • Outlook app (Android, iOs)
    • Yahoo app (Android, iOs)
  • Aplicaciones de escritorio
    • Apple mail (mac OS)
    • Outlook 2019 (mac OS, windows)
    • Windows 10 Mail
    • Mozilla Thunderbird
  • Webmail
    • Gmail
    • Outlook.com
    • Yahoo! Mail
    • Zoho Mail
    • AOL

 

Cómo aplican los lectores el “dark mode” a mis emails

No todos los lectores aplican el modo oscuro de la misma manera: unos solo cambian la interfaz de usuario, pero no modifican los colores de nuestros emails, algunos invierten parcialmente los colores y otros, los modifican por completo.

Imagen Email marketing darkm

 

Sin cambios en colores

Algunos lectores como Gmail, Yahoo mail y Apple mail solo cambian los colores de su interfaz al aplicar el modo oscuro. Esto significa que el dark mode no afecta a como se renderiza nuestro email y se visualizará exactamente como es.

Aquí tenéis un ejemplo con Gmail: El diseño de nuestro email se conserva sea cual sea el modo que se utilice:

Imagen Email marketing colors cha

 

Inversión parcial de colores

En algunos lectores, la opción de dark mode solo detecta las áreas de nuestro email que utilizan colores de fondo claros e invierte el color de fondo a oscuro y los textos a colores claros. Las áreas que ya utilizaban colores oscuros de fondo, no las modifica. El resto de elementos, tampoco.

Imagen partial cha

 

Este es el caso por ejemplo de Outlook.com. Si os fijáis, veréis que el borde del botón de color negro lo ha mantenido y no ha hecho ningún cambio en los fondos oscuros:

Imagen

 

Inversión total de colores

Otros lectores de correo, como Gmail para iOS o Zoho mail, invierten todos los colores. Es decir, no solo cambian los fondos claros a oscuro, sino los oscuros a claros. Este esquema de color es el que aplica cambios más radicales al diseño de nuestro email.

Imagen

 

Soporte de modo oscuro por lector de correo

A continuación, os mostramos una tabla de cómo actúa cada lector de correo al aplicar el modo oscuro. Esta tabla puede ir cambiando en el tiempo, ya que muchos lectores como Gmail, utilizan el feedback de los usuarios para aplicar mejoras a su tema dark mode.

Imagen

 

Consejos para optimizar tus emails para dark mode

No todos los lectores utilizan el mismo esquema de color cuando el usuario trabaja con el dark mode activo. Es decir, los colores que utiliza cada lector para sustituir los originales difieren uno de otros. Para evitar que esto suceda, podemos especificar en el html como queremos que nuestros emails sean renderizados en modo oscuro, pero no todos los lectores permiten indicarlo (por ejemplo, Gmail no lo acepta).

Si tenemos conocimientos de html, podemos utilizar estos dos métodos para indicar al lector como debe mostrar nuestro email:

@media (prefers-color-scheme: dark)

[data-ogsc] y/o [data-ogsb] , para Outlook app(Android)

 

No obstante, hay una serie de técnicas que podemos aplicar a nuestros emails para que se visualicen correctamente en modo oscuro sin necesidad de modificar el html.

 

Testear el diseño en modo oscuro y modo claro

Testea tu campaña para asegurarte que tu diseño y la legibilidad del contenido no se ve afectada en caso de que el usuario tenga el modo oscuro activo. Como hemos comentado, cada lector aplica su propio esquema de color, por lo que es recomendable testear nuestro email en los lectores más populares para ver el resultado en cada uno de ellos.

 

Utiliza imágenes con fondo transparente

Si utilizas imágenes con fondo transparente, al invertirse los colores con el modo dark mode, el diseño de tu newsletter se verá más uniforme y no tendrá una afectación tan visible.

En la siguiente imagen puedes ver la diferencia entre usar el logotipo con y sin fondo:

Imagen

 

Añade un contorno blanco a iconos y textos de color negro

Si utilizamos iconos o textos en imagen de color negro, estos no se verán en el modo oscuro. Para evitarlo, añade un borde de color blanco. En modo “normal” no se apreciará y en modo oscuro se visualizarán correctamente.

Imagen

Los clientes de correo están constantemente cambiando, sobre todo en lo que al dark mode se refiere, aplicando mejoras y modificaciones en sus esquemas de color para mejorar la experiencia del usuario que utiliza este modo de visualización de sus correos electrónicos.  Por esta razón, es imperativo testear nuestros emails para asegurarnos que se renderizaran correctamente en este modo en los lectores más populares.



Artículos relacionados


¿Aún no has probado Acrelia News?
Si te gustó este artículo, te gustará mucho más nuestra herramienta de email marketing: profesional, fácil de utilizar y en español.

CREAR CUENTA GRATUITA AHORA


X
llamada
Introduce el número de teléfono
al que quieres que te llamemos