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
Dans ce cas, les paramètres du mode sombre du client remplacent ceux que vous définissez dans Journey Optimizer B2B Edition
La plupart des clients de messagerie les plus populaires offrent la possibilité de rendre le mode sombre personnalisé avec la requête @media (prefers-color-scheme: dark), qui est la méthode utilisée par les styles d’e-mail Journey Optimizer B2B Edition. Cette liste de clients comprend :
- Apple Mail macOS
- Apple Mail iOS
- MacOS Outlook
- Outlook.com
- Outlook iOS
- Outlook Android™
Dans ce cas, les paramètres spécifiques que vous définissez dans le Journey Optimizer B2B Edition sont rendus. Cependant, certaines restrictions peuvent s’appliquer en fonction de chaque client de messagerie. Par exemple, certains clients (tels qu’Apple Mail 16 (macOS 13)) ne génèrent pas de mode sombre si des images sont présentes dans le contenu de l’e-mail.
Pour des résultats optimaux, testez votre contenu avec les clients de messagerie que vous ciblez. Pour voir une simulation qui se rapproche le plus possible du résultat final pour chaque client, utilisez l’intégration Rendu des tests d’e-mail Litmus dans l’espace de conception d’e-mail.
Conception pour le mode sombre
Lorsque vous mettez en forme le contenu de votre e-mail pour le mode sombre en Journey Optimizer B2B Edition, l’espace de conception visuelle fournit deux types d’outils :
-
Utilisez la fonction preview pour passer en revue le rendu du mode sombre par défaut pour la plupart des clients de messagerie de support.
-
Si vous souhaitez remplacer les paramètres par défaut des clients de messagerie de prise en charge, définissez et appliquez des paramètres de mode sombre personnalisés à votre contenu d’e-mail. En savoir plus
Prévisualiser le mode sombre par défaut preview-dark-mode
-
Ouvrez le contenu de l’e-mail dans l’espace de conception d’e-mail.
En haut à droite de la zone de travail se trouve un sélecteur clair-sombre qui permet de basculer l’affichage du contenu entre le mode clair (par défaut) et le mode sombre.
-
Remplacez le sélecteur par Mode sombre (
La zone de travail affiche le contenu à l’aide du mode sombre par défaut preview.x
Par défaut, l’aperçu en mode sombre applique le modèle de couleurs
full color invertà tous les éléments, à l’exception des images et des icônes. Ce jeu de couleurs détecte les zones comportant des éléments clairs et sombres et les inverse. Les arrière-plans clairs deviennent sombres et le texte sombre devient clair, ou les arrière-plans sombres deviennent clairs et le texte clair devient sombre.
Définition des paramètres personnalisés du mode sombre custom-dark-mode
Après le passage en mode sombre, vous pouvez choisir de modifier des éléments de style spécifiques de votre contenu qui s’affichent uniquement lorsque le mode sombre est activé dans le client de messagerie du destinataire (à condition qu’il prenne en charge cette fonctionnalité).
Le style personnalisé en mode sombre de l’espace de conception d’e-mail utilise @media (prefers-color-scheme: dark) requête CSS, qui détecte si le client de messagerie est en mode sombre et applique la conception avec thème sombre définie dans votre e-mail.
Pour définir les paramètres personnalisés du mode sombre :
-
Si nécessaire, déplacez le sélecteur vers Mode sombre (
-
Modifiez des attributs de couleur de style, tels que du texte, des arrière-plans ou des boutons.
-
Pour les images et les icônes, définissez des ressources spécifiques pour le mode sombre uniquement.
Vous ne pouvez pas modifier les couleurs des images et des icônes, mais vous pouvez définir d’autres ressources à utiliser en mode sombre. Vous pouvez tester différentes combinaisons de couleurs pour vos icônes ou ajuster la couleur et la saturation des images photographiques.
Sélectionnez une image et passez en mode sombre à l’aide du bouton dédié dans le volet Paramètres. Sélectionnez ensuite une autre ressource image.
Consultez Ajout de ressources d’image pour plus d’informations sur la sélection d’une ressource d’image.
-
À tout moment pendant vos modifications de conception, sélectionnez Basculer vers la vue en direct pour vérifier comment votre contenu peut s’afficher sur différentes tailles d’appareil.
Dans cet affichage, remplacez le sélecteur par Mode sombre (
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 les 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 d’e-mail pour afficher le rendu final en mode sombre pour divers clients de messagerie dans Litmus .
Pour plus d’informations, consultez Test du rendu des e-mails avec Litmus .
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 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.