[Beta]{class="badge informative"}
Gérer le contenu en mode sombre dark-mode
Lorsque vous concevez vos e-mails, le Concepteur d’e-mail Journey Optimizer vous permet de passer en mode sombre, dans lequel vous pouvez définir des paramètres personnalisés spécifiques. Lorsque le mode sombre est activé, les clients de messagerie pris en charge affichent les paramètres que vous avez définis pour ce mode.
La liste des clients de messagerie prenant en charge le mode sombre figure dans cette section.
Présentation du mode sombre what-is-dark-mode
Le mode sombre permet aux clients de messagerie et aux applications pris en charge d’afficher les e-mails avec des arrière-plans plus sombres et des couleurs plus claires pour le texte, les boutons et les autres éléments de l’interface d’utilisation. Il permet de réduire la fatigue oculaire, d’économiser la batterie et d’améliorer la lisibilité dans les environnements peu éclairés pour une expérience visuelle plus confortable.
Étant donné qu’il s’agit d’une tendance croissante dans les principaux systèmes d’exploitation et applications (Apple Mail, Gmail, Outlook, Twitter, Slack), cette fonctionnalité est devenue un point important à prendre en compte dans la conception d’e-mails modernes pour veiller à ce que le contenu reste lisible et visuellement attrayant pour tous les utilisateurs et utilisatrices.
Cependant, il n’est pas possible de garantir que votre e-mail s’affichera exactement de la même manière en mode sombre sur tous les appareils. Certaines variations visuelles peuvent également être provoquées par la modification forcée de la conception d’origine par l’application ou l’appareil de messagerie.
En effet, la manière dont le mode sombre est appliqué par les clients de messagerie peut varier comme suit :
-
Les clients de messagerie ne prennent pas tous en charge cette fonctionnalité.
note note NOTE La liste des clients de messagerie ne prenant pas en charge le mode sombre figure dans cette section. -
Certains clients de messagerie ajustent automatiquement les couleurs, les arrière-plans et les images. Dans ce cas, si vous définissez des paramètres personnalisés dans le Concepteur d’e-mail, le rendu de ces paramètres ne sera probablement pas affiché.
-
D’autres clients de messagerie offrent la possibilité d’afficher un mode sombre personnalisé (par exemple avec la méthode
@media (prefers-color-scheme: dark)). Dans ce cas, les paramètres spécifiques que vous définissez dans le Concepteur d’e-mail doivent s’afficher. Découvrez dans cette section comment définir les paramètres personnalisés du mode sombre dans le Concepteur d’e-mail.
Mode sombre dans le Concepteur d’e-mail dark-mode-email-designer
En ce qui concerne le mode sombre dans le Concepteur d’e-mail, deux aspects doivent être pris en compte :
-
Vous pouvez prévisualiser la manière dont le mode sombre par défaut s’affichera dans la plupart des clients de messagerie pris en charge. En savoir plus
-
Si vous souhaitez remplacer les paramètres par défaut des clients de messagerie pris en charge, vous pouvez définir des paramètres de mode sombre personnalisés qui s’appliquent à l’e-mail que vous être en train de modifier. En savoir plus
Prévisualiser le mode sombre par défaut preview-dark-mode
Pour accéder au mode sombre dans le Concepteur d’e-mail et prévisualiser les paramètres par défaut du mode sombre, procédez comme suit.
-
Dans la page d’accueil du Concepteur d’e-mail, cliquez sur le bouton Créer à partir de zéro. En savoir plus
-
Ajoutez des structures et des composants de contenu à votre contenu.
-
En haut à droite de la zone de travail centrale, cliquez sur le bouton pour passer en mode sombre.
-
La prévisualisation du mode sombre par défaut s’affiche.
Par défaut, l’aperçu en mode sombre du Concepteur d’e-mail applique le modèle de couleurs « inversion complète des couleurs » à tous les éléments, à l’exception des images et des icônes.
Cela signifie qu’il détecte les zones comportant des éléments clairs et sombres et les inverse, de sorte que les arrière-plans clairs deviennent sombres et que le texte sombre devient clair, tandis que les arrière-plans sombres deviennent clairs et que le texte clair devient sombre.
Définir le mode sombre personnalisé define-custom-dark-mode
Après avoir activé le mode sombre, vous pouvez choisir de modifier des éléments de style spécifiques dans votre contenu qui s’afficheront uniquement si le mode sombre est activé dans le client de messagerie de la personne destinataire, à condition que le client prenne en charge cette fonctionnalité.
Pour tirer parti du style du mode sombre personnalisé du Concepteur d’e-mail, Journey Optimizer utilise la requête CSS @media (prefers-color-scheme: dark), qui détecte si le client de messagerie de l’utilisateur ou de l’utilisatrice est en mode sombre et applique le thème sombre défini dans votre e-mail.
Pour définir les paramètres du mode sombre personnalisé, procédez comme suit.
-
Veillez à basculer vers l’aperçu en mode sombre dans le Concepteur d’e-mail. Voici comment procéder
-
Modifiez les attributs de couleurs du style, tels que le texte, les arrière-plans, les boutons, etc.
-
Vous ne pouvez pas modifier les couleurs des images et des icônes, mais vous pouvez définir des ressources spécifiques au mode sombre. Pour ce faire, sélectionnez une image. Passez en mode sombre à l’aide du bouton dédié dans le volet Paramètres et sélectionnez une autre ressource.
-
Vous pouvez à tout moment Passer en mode en direct afin de vérifier comment votre contenu s’affiche sur les différentes tailles d’appareils. Dans cette vue, cliquez sur le bouton Mode sombre en haut de l’écran pour prévisualiser la version en mode sombre de votre contenu sur les différents appareils.
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 de la personne destinataire. -
Une fois que vous avez apporté les modifications souhaitées pour le mode sombre, cliquez sur Simuler le contenu.
-
Sélectionnez Rendu d’e-mail et connectez-vous à votre compte Litmus. Vous pouvez voir le rendu final en mode sombre pour divers clients de messagerie. En savoir plus sur le rendu des e-mails.
note warning WARNING Bien que la simulation se rapproche beaucoup de la façon dont les e-mails s’afficheront en mode sombre, le rendu réel peut être différent en raison de variations au niveau des paramètres des fournisseurs de services de messagerie ou au niveau des paramètres des appareils.
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, suivez les bonnes pratiques répertoriées ci-dessous.
Optimiser vos images et vos logos
-
Évitez les images avec des fonds blancs ou clairs codés en dur.
-
Enregistrez les logos et les icônes au format PNG avec des arrière-plans transparents pour éviter la présence de zones blanches visibles en mode sombre.
-
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.
Vérifier vos arrière-plans
-
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 d’arrière-plan en mode sombre ; veillez donc à ce que les informations clés soient toujours visibles.
Concevoir du contenu accessible en mode sombre
-
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 à fort contraste pour améliorer la lisibilité et respecter les normes WCAG. Utilisez des outils tels que le vérificateur de contraste de WebAIM 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.
-
N’utilisez pas de blanc pur sur du noir pur, car cela peut entraîner une fatigue oculaire et peut être automatiquement inversé par certains clients de messagerie.
-
Fournissez un style de secours accessible si le mode sombre n’est pas pris en charge.
Tester vos e-mails dans un environnement en mode sombre
-
Utilisez la prévisualisation du mode sombre du Concepteur d’e-mail, qui utilise des modèles de couleurs inversées, pour repérer les problèmes en amont.
-
Utilisez l’option Rendu d’e-mail qui tire parti de Litmus pour simuler vos conceptions sur les principaux clients de messagerie (Apple Mail, Gmail, Outlook) et voir comment les couleurs et les images se comportent en mode sombre.
Clients de messagerie prenant en charge le mode sombre supporting-email-clients
Vous trouverez ci-dessous la liste des principaux clients de messagerie prenant en charge le mode sombre.
Clients de messagerie ne prenant pas en charge le mode sombre non-supporting-email-clients
Certains clients de messagerie permettent aux utilisateurs de basculer leur interface en mode sombre, mais ce paramètre n’affecte pas la manière dont les e-mails HTML sont affichés. Que l’interface soit en mode clair ou en mode sombre, votre e-mail s’affichera de la même manière. Voici la liste de ces clients :