Guía definitiva para los correos electrónicos en modo oscuro

El modo oscuro está de moda últimamente, y con razón: con solo unos toques, puedes cambiar la apariencia general de tu dispositivo a un esquema de colores más oscuro, más agradable a la vista y visualmente más agradable con poca luz. Este interés también se ha extendido al mundo del email marketing, animando a más desarrolladores y diseñadores de email marketing a pasarse al lado oscuro.

En esta publicación, hablaremos sobre los beneficios del modo oscuro, cómo puedes diseñar tus propios correos electrónicos en modo oscuro y algunos consejos para tratar con clientes de correo electrónico.

¿Qué es el modo oscuro?

El modo oscuro es una tendencia de diseño que revoluciona el esquema de color tradicional blanco sobre negro. En el modo oscuro, el texto y otros elementos de la interfaz se muestran en colores oscuros sobre un fondo claro. Esto proporciona una experiencia visualmente agradable y agradable al leer o usar una aplicación o sitio web en entornos con poca luz.

El modo oscuro es perfecto para quienes pasan mucho tiempo frente a la pantalla, ya que puede ayudar a reducir la fatiga visual. También se ha demostrado que mejora la duración de la batería en dispositivos con pantallas OLED.

¿Cuáles son los beneficios de los correos electrónicos en modo oscuro?

Si bien el modo oscuro es definitivamente estéticamente agradable y moderno, también ofrece algunas ventajas interesantes para los usuarios.

Alivia la fatiga ocular

La luz azul que emiten la mayoría de las pantallas de nuestros dispositivos cotidianos puede, lamentablemente, cansar mucho la vista. Dado que muchos trabajamos muchas horas y pasamos la mayor parte del día mirando pantallas, ahora es más importante que nunca cuidar nuestros ojos. El modo oscuro es una excelente manera de hacerlo, ya que los colores más oscuros son mucho más fáciles de ver, lo que mejora la legibilidad y la concentración.

Reduce el reflejo de la pantalla

Cuando un correo electrónico se muestra en modo claro, el fondo brillante puede causar un reflejo que dificulta la lectura. Esto es especialmente cierto si intentas leerlo en el teléfono bajo la luz solar directa. El modo oscuro elimina este problema invirtiendo los colores: el texto es blanco y el fondo es negro. Esto facilita la lectura del correo electrónico desde cualquier lugar.

Ayuda a ahorrar la batería de tu dispositivo

Se ha demostrado que el modo oscuro ahorra batería en los dispositivos, ya que el dispositivo no tiene que esforzarse tanto ni consumir tanta energía para mostrar un color oscuro en comparación con uno claro. Esto es especialmente beneficioso en dispositivos móviles, donde la batería suele durar menos que en portátiles o ordenadores de escritorio.

¿Qué clientes de correo electrónico admiten el modo oscuro?

Una cantidad cada vez mayor de clientes de correo electrónico importantes admiten el modo oscuro hasta cierto punto, pero aquí hay un desglose de las opciones disponibles para aplicaciones móviles, aplicaciones de escritorio y la web.

Móvil

• Aplicación Outlook (Android)

• Aplicación de Outlook (iOS)

• Aplicación de Gmail (Android)

• Aplicación de Gmail (iOS)

• Correo de Apple

• Correo de iPad

De oficina

• Apple Mail (Mac OS)

• Outlook (Windows)

• Outlook (Mac OS)

Web

• Hola.com

• Outlook.com

¿Cómo afecta exactamente el modo oscuro al diseño del correo electrónico?

Si bien la disponibilidad del modo oscuro varía en cada plataforma, también varía su visualización en diferentes clientes. La mejor manera de categorizar estas diferencias es según cómo los clientes afectan los elementos del diseño de un correo electrónico. Algunos no afectan el diseño en absoluto, otros solo lo afectan ligeramente y otros lo modifican drásticamente. Veamos un poco.

Sin cambios

Estos clientes no realizarán cambios automáticos en tus correos electrónicos. Esto significa que todos los elementos de tu diseño, incluyendo imágenes, colores de fuente y botones, se mostrarán igual tanto en modo claro como en modo oscuro.

• Correo de Apple

• Correo de iPad

• Hola.com

Inversión parcial

Algunos clientes solo modificarán parcialmente la apariencia de sus correos electrónicos al invertir las áreas con fondos claros. Las áreas que ya aparecen oscuras no se verán afectadas en general.

• Outlook.com

• Outlook (Mac OS)

• Aplicación de Outlook (iOS y Android)

• Aplicación de Gmail (Android)

Inversión completa

Los clientes con inversión de color afectan tanto a fondos claros como oscuros. Esto significa que las áreas claras se invertirán para mostrarse con colores más oscuros, pero también ocurrirá lo mismo con los colores oscuros.

• Outlook (Windows)

• Aplicación de Gmail (iOS)

¿Cuáles son algunos consejos para diseñar correos electrónicos en modo oscuro?

Hacer que los fondos de las imágenes sean transparentes

Siempre que sea posible, haz que el fondo de tus gráficos sea transparente, especialmente el de logotipos e iconos de redes sociales. La idea es evitar que las imágenes se visualicen de forma extraña si el cliente de correo electrónico del destinatario está configurado en modo oscuro. A veces, si los colores de fondo de las imágenes están invertidos, podría quedar un bloque alrededor de la imagen que podría no coincidir con el resto del correo electrónico. Sin embargo, cuando el fondo es transparente, la imagen se verá igual tanto en modo oscuro como en modo claro, lo que le da un aspecto más limpio y coherente.

Añadir un contorno blanco a imágenes y textos oscuros

Por otro lado, añadir un contorno claro a ciertas imágenes puede ayudarlas a resaltar más. Probablemente quieras considerar esto con un logotipo o icono, especialmente uno que suele ser de un color más oscuro. En el modo claro, el contorno no se verá, pero en el modo oscuro, ayudará a dar forma a la imagen y mejorar su visibilidad.

Sin embargo, tenga en cuenta que esto puede no ser ideal para todos los gráficos, incluidos los logotipos. Si añadir un contorno hace que un logotipo sea irreconocible o contradice los estándares de la marca, probablemente sea mejor omitirlo y usar otra alternativa.

Utilizar consultas de medios

Las consultas de medios permiten modificar el diseño y la presentación de los correos electrónicos según las necesidades del cliente. Esta es probablemente la forma más común de hacer que los correos electrónicos sean compatibles con diferentes clientes.

Por ejemplo, puedes detectar si los destinatarios tienen la interfaz configurada en modo claro u oscuro y mostrar elementos específicos para cada tema. Para ello, usa el siguiente bloque CSS:

@media ( prefiere esquema de color : oscuro ) {
  .dark { fondo : #000 ; color : blanco ; }


@media ( prefiere-esquema-de-color : claro ) {
  .light { fondo : #bbb ; color : negro ; }
}

El ejemplo anterior solo afectaría el color de fondo y los colores de fuente en el correo electrónico, pero también puede usar estas consultas de medios para cambiar imágenes, botones o cualquier otro elemento con CSS.

Utilice el prefijo [data-ogsc] para Outlook

Lamentablemente, las consultas de medios por sí solas podrían no funcionar para los destinatarios que usan la aplicación Outlook, pero la buena noticia es que si simplemente insertas el prefijo [data-ogsc], puedes activar el modo oscuro. Tu código se vería así:

@media ( prefiere esquema de color : oscuro ) {
[ data-ogsc ] .dark-bg { color de fondo : #fff ; }

¿Existen desventajas al utilizar correos electrónicos en modo oscuro?

Si bien los correos electrónicos en modo oscuro ofrecen una serie de beneficios, hay algunas cosas a tener en cuenta.

El primero es que aún no todos los clientes de correo electrónico lo admiten. Si tus destinatarios usan un cliente de correo electrónico que no admite el modo oscuro, verán tu correo en su modo claro habitual. Esto podría generar inconsistencias en tu imagen de marca.

Otra desventaja es que los correos electrónicos en modo oscuro pueden ser difíciles de leer si no están bien diseñados. Debe asegurarse de que el texto sea legible sobre un fondo más oscuro y de que los botones de llamada a la acción y otros elementos sigan siendo fácilmente visibles.

¿Hay algo más que deba tener en cuenta al diseñar correos electrónicos en modo oscuro?

• Asegúrate de que todos tus enlaces sean visibles y fáciles de hacer clic. El contraste es clave cuando se trata de enlaces en modo oscuro, ya que quieres que sean fáciles de identificar sobre un fondo oscuro.

• Evite usar colores de texto que puedan desentonar con un fondo oscuro. Por ejemplo, colores como el rojo o el verde pueden funcionar perfectamente en un correo electrónico claro, pero en el modo oscuro, podrían ser difíciles de leer o simplemente desagradables a la vista. Es mejor usar blanco, gris claro o colores más neutros.

• Presta atención a la elección de fuentes. Algunas se ven mejor en modo oscuro que otras. Las fuentes sans-serif suelen funcionar bien, al igual que las fuentes delgadas con alto contraste.

Puede que el Modo Oscuro no sea una función nueva en el mercado del correo electrónico, pero su popularidad está creciendo rápidamente entre los clientes y desarrolladores. Si bien presenta algunos desafíos, implementar la compatibilidad con el modo oscuro en tus diseños de correo electrónico es una excelente manera de demostrar a tu audiencia que te preocupas por sus preferencias e incluso puede mejorar la interacción.

¿Necesitas ayuda para diseñar correos electrónicos en modo oscuro? ¡Scalero te ayuda! Nuestros expertos desarrolladores de correo electrónico pueden diseñar y programar plantillas personalizadas que se verán geniales tanto en modo claro como oscuro.

Contáctanos para comenzar !