Cómo adaptar el diseño de tus emails al modo oscuro (Dark Mode)

El modo oscuro en email marketing es una de las tendencias más populares. ¿Quieres aprender cómo adaptar tus campañas de email a ella? Te mostramos consejos y estructuras de diseño pensadas para que adaptes tus campañas de newsletter a esta opción que queda en manos del usuario.

Qué es el modo oscuro y por qué se utiliza

Esta tendencia ha tomado las riendas gracias a que los principales softwares de telefonía móvil y navegadores han habilitado la opción de visualizar las aplicaciones con unos colores menos brillantes que producen menor fatiga visual. Consiste en cambiar el entorno de aplicaciones y el propio móvil o navegador a oscuro, con tonos negros y letras claras.

En concreto, todo aquel que tenga el modo oscuro activado se beneficiará de:

• Ahorro de batería:  ofrece un menor consumo energético respecto al modo normal de luz.
• Mejor adaptación en entornos poco iluminados o nocturnos: por sus tonalidades y su brillo.
• Reducción de la fatiga visual: al no recibir tanta luz blanca intensa directamente, los ojos se sienten más descansados y no afecta tan bruscamente a la calidad del sueño.

Precisamente por este motivo, es tendencia que la gran mayoría de personas active esta opción de visualización en sus teléfonos móviles o incluso en Google o Gmail. Y ahí es dónde entramos nosotros para contarte cómo debes adaptar tus campañas de email marketing.

Cómo diseñar los emails adaptándose al modo oscuro

Este modo cambia los colores predeterminados que existen por los opuestos si detecta que los fondos son demasiado claros. Por eso mismo, esta lista de consejos te servirá para saber cómo diseñar newsletter este modo:

1. Diseña a nivel estructural para ambos modos

A nivel HTML, puedes poner etiquetas para que detecten cuando Gmail o el dispositivo móvil está utilizando el modo oscuro o el modo claro, así se usará un esquema de colores u otro. Otra opción es diseñar directamente para este modo, es decir, con el fondo oscuro y las letras claras, ya que se verá bien en ambos modos.

2. Utiliza imágenes transparentes

Es conveniente que las imágenes sean sin fondo (si el fondo va a ser blanco o muy claro), ya que el modo oscuro altera solo los colores en CSS, es decir, los del fondo y texto, pero no los de las imágenes y esto hará que encuadren mejor.

3. Prueba paletas de colores que no sean intensas

Lo mejor es que para el modo oscuro intentes no utilizar el negro puro (#000000) y utilices más bien tonos grises oscuros tirando a negros o azules oscuros, ya que es lo que el propio modo oscuro hace. Puedes utilizar colores en botones e imágenes, pero procura que no sean dañinos para la vista al combinarlos con el modo oscuro.

4. Escoge la tipografía adecuada

Si escogemos una tipografía demasiado fina, en el modo oscuro causará muchas dificultades a la hora de leerse. En este caso tenemos dos opciones:

• Escoger una tipografía que sea legible en ambos modos.
• Ponerle un borde claro al texto que no será visible en modo normal pero sí en modo oscuro y facilitará la lectura.

En definitiva, nos encontramos ante una tendencia evidente que no puedes obviar en las campañas de email marketing, por lo que deberías aprovechar estos consejos y empezar a adaptarte a esta opción de visualización en los dispositivos móviles, igual que lo están haciendo los grandes sistemas operativos y aplicaciones. ¡No te olvides de hacer testing en ambos modos antes de enviar las newsletter!