Mode sombre pour le contenu des e-mails dark-mode
Le mode sombre permet à un client de messagerie ou à une application de support d'afficher les e-mails avec des arrière-plans plus sombres et des couleurs plus claires pour le texte, les boutons et d'autres éléments visuels. Ce type d'écran peut réduire la fatigue visuelle, économiser l'autonomie de la batterie et améliorer la lisibilité dans les environnements à faible luminosité pour une expérience de visionnage plus confortable. Tendance croissante au sein des principaux systèmes d’exploitation et applications, il est désormais important de prendre en compte dans la conception d’e-mails modernes afin de s’assurer que le contenu reste lisible et visuellement attrayant pour tous les utilisateurs et utilisatrices.
Lorsque vous créez le contenu de votre e-mail dans l’espace de conception visuelle Journey Optimizer B2B Edition, vous pouvez passer à la vue Mode sombre . Dans cette vue, vous pouvez également définir des paramètres personnalisés spécifiques pour la prise en charge des clients de messagerie lorsque leur mode sombre est activé.
Remarques concernant le client de messagerie
Il existe des différences significatives dans la manière dont les différents clients de messagerie et applications appliquent le mode sombre. Pour cette raison, prenez en compte les attentes en matière de rendu en mode sombre avec précaution. Avant d’utiliser le mode sombre dans l’espace de conception d’e-mail, tenez compte des cas d’utilisation de client de messagerie suivants :
Certains clients de messagerie ne prennent pas du tout en charge cette fonctionnalité, tels que :
- Yahoo! Mail
- AOL
Si vous définissez des paramètres personnalisés en mode sombre dans la conception d’e-mail, ces clients de messagerie ne peuvent pas afficher de rendu en mode sombre.
Certains clients de messagerie appliquent systématiquement leur propre mode sombre par défaut à tous les e-mails reçus. Ils ajustent automatiquement les couleurs, les arrière-plans, les images et d’autres éléments en fonction de leurs paramètres de mode sombre. Les paramètres externes ne sont pas possibles. Ces clients sont les suivants :
- Gmail (messagerie électronique pour ordinateurs de bureau, iOS, Android™, messagerie électronique mobile)
- Outlook Windows
- Outlook Windows Mail
In this case, the client dark mode settings override the custom dark mode settings that you define in Journey Optimizer B2B Edition
Many of the most popular email clients offer the option to render custom dark mode with the @media (prefers-color-scheme: dark) query, which is the method used by the Journey Optimizer B2B Edition email styles. This list of clients includes:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
In this case, the specific settings you define in the Journey Optimizer B2B Edition are rendered. However, some restrictions could apply according to each email client. For example, some clients (such as Apple Mail 16 (macOS 13)) do not generate dark mode if images are present in the email content.
For optimal results, test your content with the email clients that you are targeting. To see a simulation that comes as close as possible to the final result for each client, use the Litmus email test rendering integration in the email design space.
Design for dark mode
As you style your email content for dark mode in Journey Optimizer B2B Edition, the visual design space provides two types of tools:
-
Use the preview function to review the default dark mode rendering for most supporting email clients.
-
If you want to override the default settings of supporting email clients, define and apply custom dark mode settings to your email content. Learn more
Prévisualiser le mode sombre par défaut preview-dark-mode
-
Open the email content in the email design space.
At the top right of the canvas, there is a light-dark selector that toggles the content display between light (default) and dark mode.
-
Change the selector to Dark mode (
The canvas displays the content using the default dark mode preview.x
By default, the dark mode preview applies the
full color invertcolor scheme to all elements except images and icons. This color scheme detects areas with light and dark elements and inverts them. Light backgrounds become dark and dark text becomes light, or dark backgrounds become light and light text becomes dark.
Define custom dark mode settings custom-dark-mode
After switching to dark mode, you can choose to edit specific styling elements of your content that are displayed only when dark mode is enabled in the recipient's email client (provided it supports that feature).
The custom dark mode styling in the email design space uses the @media (prefers-color-scheme: dark) CSS query, which detects if the email client is set to dark mode and applies the dark-themed design that is defined in your email.
To define custom dark mode settings :
-
If needed, move the selector to Dark mode (
-
Edit any styling color attributes, such as text, backgrounds, or buttons.
-
For the images and icons, define specific assets for dark mode only.
You cannot change the colors of images and icons, but you can define alternative assets to be used for dark mode. You can experiment with different color combinations for your icons or make adjustments for color and saturation for photographic images.
Select any image and switch to Dark mode using the dedicated toggle in the Settings pane. Then, select a different image asset.
See Add image assets for more information about selecting an image asset.
-
At any point during your design changes, select Switch to live view to check how your content might render on various device sizes.
From this view, change the selector to Dark mode (
note caution CAUTION Le mode en direct est une prévisualisation générique conçue pour comparer l’aspect du rendu sur différentes tailles d’appareils. Le rendu final peut varier en fonction du client de messagerie du destinataire. -
Une fois vos modifications du mode sombre effectuées, cliquez sur Simuler du contenu.
Utilisez les outils de prévisualisation et de relecture pour tester votre conception d’e-mail. Voir Prévisualiser et tester le contenu de votre e-mail pour plus d’informations.
-
Si vous disposez d’un compte d’entreprise Litmus, sélectionnez Rendu de l’e-mail pour afficher le rendu final en mode sombre pour divers clients de messagerie dans Litmus .
Voir Test du rendu des e-mails avec Litmus pour plus d’informations.
note caution CAUTION Bien que la simulation se rapproche de la façon dont les e-mails apparaissent en mode sombre, le rendu réel peut différer en raison de variations au niveau des fournisseurs de services de messagerie ou des paramètres au niveau de l’appareil.
Bonnes pratiques best-practices
À mesure que l’adoption du mode sombre augmente dans les principaux clients de messagerie, il est essentiel d’examiner le rendu de vos e-mails à la fois dans les environnements clairs et sombres, que vous utilisiez le mode sombre personnalisé ou non.
Le mode sombre peut modifier les couleurs, les arrière-plans et les images, parfois en remplaçant les choix définis lors de la conception. Pour garantir la cohérence visuelle, l’accessibilité et l’intégrité de la marque, appliquez les bonnes pratiques suivantes :
Liste de vérification :
- Enregistrez les logos et les icônes en tant que fichiers PNG avec des arrière-plans transparents pour éviter les zones blanches visibles en mode sombre.
- Évitez les images avec des arrière-plans blancs ou clairs codés en dur.
- Si vous ne pouvez pas utiliser la transparence, placez les images sur un arrière-plan uni dans votre conception pour éviter des inversions de couleurs inappropriées.
Liste de vérification :
- Vérifiez que le contraste entre le texte et les couleurs d’arrière-plan est suffisant pour garantir une bonne lisibilité en mode clair et en mode sombre.
- Évitez de vous fier uniquement aux couleurs d’arrière-plan pour du contenu important. Certains clients remplacent les couleurs de fond en mode sombre, afin de s’assurer que les informations clés sont toujours visibles.
Liste de vérification :
- Utilisez des combinaisons de couleurs faciles à distinguer pour les personnes atteintes de daltonisme.
- Utilisez une palette de tons moyens pour garantir un contraste adéquat par rapport à des arrière-plans clairs et sombres.
- Utilisez des combinaisons de couleurs accessibles avec un contraste élevé pour améliorer la lisibilité et respecter les normes Web Content Accessibility Guidelines (WCAG). Utilisez des outils tels que WebAIM Contrast Checker pour vérifier le contraste des couleurs.
- Évitez les polices de caractères fines, car elles peuvent affecter la lisibilité. Si votre marque nécessite l’utilisation d’une police fine, mettez-la en gras en mode sombre.
- Ignorez le blanc pur sur le noir pur, ce qui peut entraîner une fatigue oculaire et pourrait être inversé automatiquement dans certains clients de messagerie.
- Fournissez un style de secours accessible si le mode sombre n’est pas pris en charge.
Liste de vérification :
- Utilisez l’aperçu en mode sombre dans l’espace de conception d’e-mail, qui utilise des modèles de couleurs inversés pour repérer les problèmes dès le début.
- Utilisez un compte d’entreprise Litmus avec l’option Rendu d’e-mail pour simuler vos conceptions sur les principaux clients de messagerie (tels qu’Apple Mail, Gmail et Outlook) et voir comment les couleurs et les images se comportent en mode sombre.