Modo oscuro para el contenido del correo electrónico dark-mode
El modo oscuro permite que un cliente de correo electrónico o aplicación compatible muestre correos electrónicos con fondos más oscuros y colores más claros para texto, botones y otros elementos visuales. Este tipo de pantalla puede reducir la fatiga visual, 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, ahora es una consideración importante en el diseño moderno del correo electrónico garantizar que el contenido sea legible y visualmente atractivo para todos los usuarios.
A medida que crea su contenido de correo electrónico en el espacio de diseño visual de Journey Optimizer B2B Edition, puede cambiar a la vista de modo oscuro . En esta vista, también puede definir la configuración personalizada específica para admitir clientes de correo electrónico cuando su modo oscuro esté habilitado.
Consideraciones del cliente de correo electrónico
Hay una variación significativa en la forma en que diferentes clientes de correo electrónico y aplicaciones aplican el modo oscuro. Por este motivo, debe tener en cuenta las expectativas de procesamiento en modo oscuro con precaución. Antes de utilizar el modo oscuro en el espacio de diseño del correo electrónico, tenga en cuenta los siguientes casos de uso del cliente de correo electrónico:
Algunos clientes de correo electrónico no admiten esta función en absoluto, como:
- Yahoo! Mail
- AOL
Si define la configuración personalizada de modo oscuro en el diseño de correo electrónico, estos clientes no pueden mostrar ningún procesamiento de modo oscuro.
Algunos clientes de correo electrónico aplican sistemáticamente su propio modo oscuro predeterminado a todos los correos electrónicos recibidos. Ajustan automáticamente los colores, fondos, imágenes y otros elementos según su configuración de modo oscuro y no son posibles los ajustes externos. Estos clientes incluyen:
- Gmail (Desktop Webmail, iOS, Android™, Mobile Webmail)
- Outlook Windows
- Outlook Windows Mail
En este caso, la configuración del modo oscuro del cliente anula la configuración del modo oscuro personalizado que se define en Journey Optimizer B2B Edition
Muchos de los clientes de correo electrónico más populares 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 los estilos de correo electrónico Journey Optimizer B2B Edition. Esta lista de clientes incluye:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
En este caso, se procesa la configuración específica que defina en Journey Optimizer B2B Edition. Sin embargo, podrían 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 que se aproxime lo más posible al resultado final de cada cliente, use la integración Litmus email test rendering en el espacio de diseño del correo electrónico.
Diseño para el modo oscuro
Al aplicar estilo al contenido del correo electrónico para el modo oscuro en Journey Optimizer B2B Edition, el espacio de diseño visual proporciona dos tipos de herramientas:
-
Utilice la función de vista previa para revisar el procesamiento predeterminado del modo oscuro para la mayoría de los clientes de correo electrónico de soporte.
-
Si desea anular la configuración predeterminada de los clientes de correo electrónico de soporte, defina y aplique la configuración personalizada del modo oscuro al contenido del correo electrónico. Más información
Previsualizar modo oscuro predeterminado preview-dark-mode
-
Abra el contenido del correo electrónico en el espacio de diseño del correo electrónico.
En la parte superior derecha del lienzo, hay un selector de claro a oscuro que alterna la visualización del contenido entre el modo claro (predeterminado) y el modo oscuro.
-
Cambie el selector a Modo oscuro (
El lienzo muestra el contenido con el modo oscuro predeterminado preview.x
De manera predeterminada, la vista previa en modo oscuro aplica el esquema de colores
full color inverta todos los elementos, excepto a las imágenes y los iconos. Esta combinación de colores detecta las áreas con elementos claros y oscuros y las invierte. Los fondos claros se vuelven oscuros y el texto oscuro se vuelve claro, o los fondos oscuros se vuelven claros y el texto claro se vuelve oscuro.
Definir configuración personalizada del modo oscuro custom-dark-mode
Después de cambiar al modo oscuro, puede editar elementos de estilo específicos del contenido que se muestran solo cuando el modo oscuro está habilitado en el cliente de correo electrónico del destinatario (siempre que admita esa función).
El estilo de modo oscuro personalizado en el espacio de diseño del correo electrónico utiliza @media (prefers-color-scheme: dark) consulta CSS, que detecta si el cliente de correo electrónico está configurado en modo oscuro y aplica el diseño de tema oscuro definido en el correo electrónico.
Para definir la configuración personalizada del modo oscuro :
-
Si es necesario, mueva el selector a Modo oscuro (
-
Edite cualquier atributo de color de estilo, como texto, fondos o botones.
-
Para las imágenes y los iconos, defina recursos específicos solo para el modo oscuro.
No puede cambiar los colores de las imágenes y los iconos, pero puede definir recursos alternativos para utilizarlos en el modo oscuro. Puede experimentar con diferentes combinaciones de colores para sus iconos o realizar ajustes de color y saturación para imágenes fotográficas.
Seleccione cualquier imagen y cambie a Modo oscuro con el conmutador específico del panel Configuración. A continuación, seleccione un recurso de imagen diferente.
Consulte Agregar recursos de imagen para obtener más información sobre cómo seleccionar un recurso de imagen.
-
En cualquier momento durante los cambios de diseño, selecciona Cambiar a la vista en vivo para comprobar cómo puede representarse el contenido en varios tamaños de dispositivo.
Desde esta vista, cambie el selector a Modo oscuro (
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 se hayan completado los cambios del modo oscuro, haga clic en Simular contenido.
Utilice las herramientas de previsualización y corrección para probar el diseño del correo electrónico. Consulte Previsualizar y probar el contenido del correo electrónico para obtener más información.
-
Si tiene una cuenta de Litmus Enterprise, seleccione Procesar correo electrónico para ver la representación final en modo oscuro para varios clientes de correo electrónico en Litmus
Consulte Probar el procesamiento de correo electrónico con Litmus para obtener más información.
note caution CAUTION Aunque la simulación se aproxima mucho al modo oscuro en que aparecen los correos electrónicos, el procesamiento real podría 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 estas prácticas recomendadas:
Lista de comprobación:
- Guarde los logotipos e iconos como archivos 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.
Lista de comprobación:
- 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 debe asegurarse de que la información clave sigue siendo visible.
Lista de comprobación:
- 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 con los estándares de Web Content Accessibility Guidelines (WCAG). Use herramientas como WebAIM Contrast Checker para comprobar 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.
- Omitir blanco puro sobre negro puro, que puede causar fatiga ocular y podría invertirse automáticamente en algunos clientes de correo electrónico.
- Proporcionar un estilo de reserva accesible si no se admite el modo oscuro.
Lista de comprobación:
- Use la vista previa en modo oscuro en el espacio de diseño del correo electrónico, que usa combinaciones de colores invertidos para detectar los problemas de forma temprana.
- Use una cuenta de Litmus Enterprise con la opción Procesar correo electrónico para simular los diseños en los principales clientes de correo electrónico (como Apple Mail, Gmail y Outlook) y ver cómo se comportan los colores y las imágenes en el modo oscuro.