Administrar contenido en modo oscuro dark-mode
Al diseñar los mensajes de correo electrónico, Journey Optimizer Email Designer le permite cambiar a la vista Modo oscuro.
En esta vista de modo oscuro, también puede definir la configuración personalizada específica que se mostrará en los clientes de correo electrónico de soporte cuando su modo oscuro esté activado.
¿Qué es el modo oscuro? what-is-dark-mode
La forma en que se representa el modo oscuro en los distintos clientes de correo electrónico es compleja. Definamos primero el modo oscuro.
El modo oscuro permite a los clientes de correo electrónico y a las aplicaciones de soporte mostrar correos electrónicos con fondos más oscuros y colores más claros para el texto, los botones y otros elementos de la interfaz de usuario. Permite reducir la fatiga ocular, ahorrar batería y mejorar la legibilidad en entornos con poca luz para una experiencia de visualización más cómoda.
Como tendencia creciente en los principales sistemas operativos y aplicaciones, se ha convertido en una consideración importante en el diseño moderno de correo electrónico garantizar que el contenido siga siendo legible y visualmente atractivo para todos los usuarios.
Mecanismos de protección guardrails
Las expectativas en términos de procesamiento en modo oscuro deben considerarse con precaución, ya que la forma en que la aplican los distintos clientes de correo electrónico puede variar mucho.
Antes de usar el modo oscuro en Journey Optimizer Email Designer, es crucial entender cómo lo gestionan los principales clientes de correo electrónico. Hay tres casos que se deben distinguir:
Clientes que no admiten el modo oscuro not-supporting
Algunos clientes de correo electrónico no admiten esta función en absoluto, como:
- Yahoo!Mail
- AOL
Tanto si define la configuración personalizada de modo oscuro como si no lo hace en Email Designer, estos clientes de correo electrónico nunca muestran ningún procesamiento de modo oscuro.
Clientes que aplican su propio modo oscuro default-support
Algunos clientes de correo electrónico aplican sistemáticamente su propio modo oscuro predeterminado para todos los correos electrónicos recibidos. Colores, fondos, imágenes, etc. se ajustan automáticamente con la configuración del modo oscuro específica del cliente de correo electrónico, lo que significa que no es posible realizar ninguna modificación externa.
Estos clientes son, por ejemplo:
- Gmail (Desktop Webmail, iOS, Android, Mobile Webmail)
- Ventanas de Outlook
- Outlook Windows Mail
En este caso, si define la configuración personalizada del modo oscuro en el Designer de correo electrónico, dicha configuración se sobrescribe con la configuración del cliente de correo electrónico.
Es importante comprender que estos clientes de correo electrónico sí gestionan el modo oscuro, pero no se procesará su diseño específico de modo oscuro.
Clientes que admiten el modo oscuro personalizado custom-support
Otros clientes de correo electrónico ofrecen la opción de procesar el modo oscuro personalizado con la consulta @media (prefers-color-scheme: dark), que es el método utilizado por el Designer de correo electrónico Journey Optimizer.
Esta es una lista de los principales clientes que administran esta opción:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android
En este caso, se debe mostrar la configuración específica que defina en la Designer de correo electrónico.
Sin embargo, pueden aplicarse algunas restricciones según cada cliente de correo electrónico. Por ejemplo, algunos clientes como Apple Mail 16 (macOs 13) no generan el modo oscuro si las imágenes están presentes en el contenido del correo electrónico.
Para obtener resultados óptimos, pruebe el contenido con los clientes de correo electrónico a los que está dirigiendo. Para ver una simulación lo más parecida posible al resultado final de cada cliente, use la opción Procesamiento de correo electrónico en el Designer de correo electrónico.
Modo oscuro en el Diseñador de correo electrónico dark-mode-email-designer
Cuando se trata del modo oscuro en el Designer de correo electrónico, hay dos aspectos que hay que tener en cuenta:
-
Puede obtener una previsualización del modo oscuro predeterminado en la mayoría de los clientes de correo electrónico de soporte. Más información
-
Si desea anular la configuración predeterminada de los clientes de correo electrónico de soporte, puede definir la configuración personalizada del modo oscuro aplicable al correo electrónico que está editando. Más información
Previsualizar modo oscuro predeterminado preview-dark-mode
Para acceder al modo oscuro en Email Designer y obtener una previsualización de la configuración predeterminada del modo oscuro, siga los pasos a continuación.
-
En la página de inicio de Email Designer, seleccione la opción Diseñar desde cero. Más información
-
Agregue estructuras y componentes de contenido al contenido.
-
En la parte superior derecha del lienzo central, cambie el conmutador a Modo oscuro.
-
Se muestra la previsualización predeterminada del modo oscuro.
De forma predeterminada, la previsualización en modo oscuro de Email Designer aplica el esquema de colores "inversión de color completo" a todos los elementos, excepto a las imágenes y los iconos.
Significa que detecta áreas con elementos claros y oscuros y los invierte, de modo que los fondos claros se vuelven oscuros y el texto oscuro se vuelve claro, mientras que los fondos oscuros se vuelven claros y el texto claro se vuelve oscuro.
Definir modo oscuro personalizado define-custom-dark-mode
Después de cambiar a Modo oscuro, puede elegir editar elementos de estilo específicos de su contenido que se mostrarán solo cuando el modo oscuro esté habilitado en el cliente de correo electrónico del destinatario, siempre que admita esa función.
Para aprovechar el estilo de modo oscuro personalizado de Email Designer, Journey Optimizer usa @media (prefers-color-scheme: dark) consulta CSS, que detecta si el cliente de correo electrónico del usuario está configurado en modo oscuro y aplica el diseño de tema oscuro definido en su correo electrónico.
Para definir la configuración personalizada del modo oscuro, siga los pasos a continuación.
-
Asegúrese de cambiar a la vista previa de Modo oscuro en el Designer de correo electrónico. Descubra cómo
-
Edite cualquier atributo de color de estilo, como texto, fondos, botones, etc.
-
No puede cambiar los colores de las imágenes y los iconos, pero puede definir recursos específicos únicamente para el modo oscuro. Para ello, seleccione cualquier imagen. Cambie a Modo oscuro con el conmutador específico del panel Configuración y seleccione un recurso diferente.
-
En cualquier momento puedes Cambiar a la vista en vivo para comprobar cómo se puede presentar tu contenido en varios tamaños de dispositivo. En esta vista, seleccione el conmutador Modo oscuro de la parte superior de la pantalla para previsualizar la versión en modo oscuro del contenido en los distintos dispositivos.
note caution CAUTION La vista en directo es una previsualización genérica diseñada para comparar el aspecto que podría tener la renderización en varios tamaños de dispositivo. La renderización final puede variar según el cliente de correo electrónico del destinatario. -
Cuando esté satisfecho con los cambios del modo oscuro, haga clic en Simular contenido.
-
Seleccione Procesar correo electrónico y conéctese a su cuenta de Litmus. Puede ver el procesamiento final del modo oscuro para varios clientes de correo electrónico. Más información sobre Procesamiento de correo electrónico.
note warning WARNING Mientras que la simulación se aproxima mucho al modo oscuro en el que aparecerán los correos electrónicos, el procesamiento real puede diferir debido a variaciones en los proveedores de servicios de correo electrónico o en la configuración del nivel de dispositivo.
Prácticas recomendadas best-practices
A medida que la adopción del modo oscuro aumenta en los principales clientes de correo electrónico, es esencial tener en cuenta cómo se procesan los mensajes de correo electrónico en los entornos claro y oscuro, tanto si utiliza modo oscuro personalizado como si no.
El modo oscuro puede alterar colores, fondos e imágenes, a veces anulando las opciones de diseño. Para garantizar la coherencia visual, la accesibilidad y la integridad de la marca, siga las prácticas recomendadas que se enumeran a continuación.
Optimizar imágenes y logotipos
-
Guarde los logotipos e iconos como PNG con fondos transparentes para evitar cuadros blancos visibles en modo oscuro.
-
Evite imágenes con fondos blancos o claros codificados.
-
Si la transparencia no es una opción, coloque las imágenes sobre un fondo sólido en el diseño para evitar incómodas inversiones de color.
Observe sus fondos
-
Asegúrese de que haya suficiente contraste entre los colores del texto y del fondo para facilitar la lectura tanto en los modos claro como oscuro.
-
Evite depender únicamente de los colores de fondo para el contenido crítico. Algunos clientes omiten los colores de fondo en el modo oscuro, por lo que asegúrese de que la información clave sigue visible.
Diseñar contenido accesible en modo oscuro
-
Utilice combinaciones de colores fáciles de distinguir para las personas con daltonismo.
-
Utilice una paleta de medios tonos para garantizar el contraste con fondos claros y oscuros.
-
Utilice combinaciones de colores accesibles con alto contraste para mejorar la legibilidad y cumplir los estándares de las Directrices de accesibilidad del contenido web (WCAG). Utilice herramientas como el verificador de contraste de WebAIM para verificar el contraste de color.
-
Evite las fuentes delgadas, ya que pueden afectar a la legibilidad. Si su marca requiere una fuente fina, atíguela en modo oscuro.
-
Omita el blanco puro sobre el negro puro, ya que puede causar distensión ocular y algunos clientes de correo electrónico podrían invertirlo automáticamente.
-
Proporcionar un estilo de reserva accesible si no se admite el modo oscuro.
Pruebe sus correos electrónicos en el entorno de modo oscuro
-
Use la vista previa en modo oscuro de Email Designer, que usa esquemas de color invertidos para detectar los problemas de forma temprana.
-
Utilice la opción Procesamiento de correo electrónico que aprovecha Litmus para simular los diseños en los principales clientes de correo electrónico (Apple Mail, Gmail, Outlook) y ver cómo se comportan los colores y las imágenes en modo oscuro.