Adapta tus emails al modo oscuro (dark mode)

Foto del avatar Rocío Cortázar · 24 Nov, 2023 · Diseño Gráfico · 5 min

modo oscuro en newsletters

El “modo oscuro” es una preferencia de visualización que se ha vuelto muy popular en aplicaciones de correo electrónico y sistemas operativos móviles y de escritorio. Cuando se activa, el modo oscuro cambia los colores claros de la interfaz de usuario por tonos más oscuros (generalmente en una tonalidad de gris o negro). Esto crea una nueva experiencia de usuario que:

  • Mejora la accesibilidad y reduce la fatiga visual en aquellos con sensibilidad a la luz.
  • Prolonga la vida de la batería de los dispositivos al reducir el brillo de la pantalla y utilizar menos energía.
  • Ofrece una interfaz oscura elegante y atractiva que muchos prefieren.

Con el aumento del tiempo de pantalla del usuario, está claro por qué cada vez más quieren esta opción.

Es hora de que los profesionales del marketing y los diseñadores dejen de ignorar el modo oscuro al diseñar. Dar el paso más allá mejorará la experiencia del usuario, asegurando que tu contenido sea accesible para todos al mismo tiempo que evitarás que tus correos electrónicos se envíen al lugar que no debe ser nombrado, es decir, la carpeta de SPAM.

Cosas que no puedes ignorar sobre el modo oscuro

Cada vez más gente usa el modo oscuro. Casi todos los clientes de correo electrónico han adoptado su versión y los usuarios esperan una experiencia consistente.

La regla número uno es considerar y probar cómo se ve el contenido en el modo oscuro frente al modo claro, preocúpate por crear una experiencia consistente, cohesiva y accesible para todos.

La mala noticia: los clientes de correo electrónico son bastante impredecibles.

Hay tres formas diferentes en que los clientes de correo electrónico pueden cambiar la apariencia de tu contenido pasando al modo oscuro:

  1. Ningún cambio en absoluto: En el caso de Yahoo Mail y Apple Mail, los correos electrónicos se ven exactamente igual.
  2. Inversión parcial de colores: algunos clientes de correo electrónico como Outlook solo detectan secciones de colores claros y los convierten en colores más oscuros.
  3. Inversión total de colores: Aquí todo se invierte. Todas las áreas claras se vuelven oscuras y viceversa. Esto es lo que hace la aplicación de Gmail.

Como ves, esto no hace más que complicar las cosas.

Es importante asegurarse de que los diseños se representen lo mejor posible tanto en el modo claro como en el modo oscuro. Si los lectores no reconocen de dónde proviene el correo electrónico, lo ignorarán, lo eliminarán y hasta es posible que se den de baja. Esto perjudicará tu tasa de entregabilidad a largo plazo. Da el paso adicional para garantizar que la experiencia del lector sea consistente y agradable, independientemente del modo que prefieran.

¿Cómo lo hago?

Diseñar para el modo oscuro no tiene por qué ser difícil. Aquí te dejamos algunos puntos clave para tener en cuenta al diseñar campañas de email marketing con el modo oscuro:

Regístrate gratis Empieza a enviar campañas de email e impulsa tu negocio.
  • Verifica el contraste: Asegúrate de que tus emails tengan suficiente contraste tanto en el modo claro como en el oscuro. Los colores pueden aparecer más apagados en modo oscuro, así que ajusta la paleta de colores para mantener la legibilidad. Puedes usar herramientas como ésta de Coolors.co, al menos consigue un contraste del 5.
contraste
  • Colores de fondo: Los colores de fondo pueden invertirse en modo oscuro. Utiliza colores sólidos y evita imágenes de fondo que puedan perderse o hacer ilegible el texto sobre ellas.

  • Colores de texto: El texto debería cambiar automáticamente a un color claro en modo oscuro. Asegúrate de que no estés forzando un color de texto que podría resultar ilegible.

  • Imágenes con transparencias: Usa imágenes PNG con transparencias para que se vean bien en fondos claros y oscuros. Recuerda también optimizar siempre tus imágenes.
comparación claro y oscuro
comparación modo claro y dark mode
  • Bordes de las imágenes: Considera agregar bordes a las imágenes para separarlas del fondo oscuro.

  • Logos y branding: Asegúrate de que tu logo y elementos de branding se mantengan consistentes y legibles en ambos modos. Si puedes usar una versión de tu logo que no sea ni negro ni blanco hazlo, asegurándote de que el contraste con un fondo claro y negro es suficiente para garantizar su legibilidad. Si esto no entra dentro de las posibilidades de tu branding puedes añadir un borde o un efecto de resplandor del mismo color del fondo (claro) a tu logo negro. En el modo claro no se percibirá porque se camuflará con fondo, ya que son del mismo color, y en el modo oscuro podrás separarlo del fondo negro.
diseño claro
Logo con efecto resplandor en diseño claro
diseño oscuro
Logo con efecto resplandor en diseño oscuro
  • Mantén tu identidad de marca: Aunque es necesario ajustar los colores y algunos elementos gráficos, trata de mantener una consistencia con la identidad visual de tu marca.

  • Accesibilidad para todos: El modo oscuro es especialmente útil para usuarios con sensibilidad a la luz o con ciertas discapacidades visuales. Asegúrate de que tu email sea accesible para todos, sin importar el modo que prefieran.

  • Feedback: Recopila comentarios de los usuarios sobre su experiencia en modo oscuro y ajusta tus diseños en función de sus preferencias.

  • Tests de prueba: Prueba tus emails en diferentes clientes y dispositivos para asegurarte de que se vean bien tanto en modo claro como oscuro.

  • Herramienta de vista previa: Todo esto está muy bien, pero, ¿cómo puedo comprobar que el todo lo que estoy poniendo en práctica está funcionando? Muy fácil, ¡con nuestro editor! Dentro de la vista previa tienes disponible un interruptor para activar la “vista previa de modo oscuro”. No es perfecto, porque ya te hemos contado que los clientes de correo son impredecibles, pero te va a poder dar un resultado muy aproximado a lo verán tus receptores. Identificarás y evitarás posibles problemas de diseño cuando un mensaje de correo electrónico es recibido por un lector que tiene habilitado el modo oscuro. Así podrás crear experiencias más cohesivas y consistentes para tus lectores sin limitaciones basadas en el modo que elijan usar.
vista previa acumbamail
Para poder ver tu diseño en el modo oscuro primero deberás acceder a la Vista previa general
cómo previsualizar en modo oscuro con acumbamail
Después solo tendrás que hacer click en el interruptor de “Vista previa modo oscuro” para activarla

Conclusión: dark mode en email marketing

Y hasta aquí nuestro tutorial para trabajar el modo oscuro en email marketing. Recordar estos aspectos te ayudará a asegurar que tus campañas de email marketing sean efectivas y atractivas para todos tus suscriptores, sin importar cómo elijan visualizar sus emails.

Foto del avatar
Escrito por Rocío Cortázar Diseñadora gráfica en Acumbamail y creo que tu logo sigue siendo demasiado pequeño (es broma). Seguir en Linkedin