Gérer le contenu en mode sombre dark-mode
Lors de la conception de vos e-mails, le Journey Optimizer Concepteur d’e-mail vous permet de passer à la vue Mode sombre.
Dans cette vue en mode sombre, vous pouvez également définir des paramètres personnalisés spécifiques qui seront affichés par les clients de messagerie en mode sombre.
Présentation du mode sombre what-is-dark-mode
La manière dont le mode sombre est rendu dans les différents clients de messagerie est complexe. Définissons d’abord le mode sombre.
Le mode sombre permet aux clients de messagerie et aux applications pris en charge d’afficher les e-mails avec des arrière-plans 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 , 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 l’ensemble des utilisateurs et utilisatrices.
Mécanismes de sécurisation guardrails
Les attentes en termes de rendu en mode sombre doivent rester mesurées, car leur application peut varier considérablement selon le client de messagerie.
Avant d’utiliser le mode sombre dans le Concepteur d’e-mail Journey Optimizer, il est essentiel de comprendre comment les principaux clients de messagerie le gèrent. Il existe trois cas :
Clients qui ne prennent pas en charge le mode sombre. not-supporting
Certains clients de messagerie ne prennent pas du tout en charge cette fonctionnalité, tels que :
- Yahoo!Mail
- AOL
Que vous définissiez des paramètres personnalisés pour le mode sombre ou non dans le Concepteur d’e-mail, ces clients de messagerie n’affichent jamais de rendu en mode sombre.
Clients qui appliquent leur propre mode sombre. default-support
Certains clients de messagerie appliquent uniquement leur propre mode sombre par défaut pour tous les e-mails reçus. Les couleurs, arrière-plans, images, etc. sont automatiquement ajustés avec les paramètres du mode sombre spécifiques au client de messagerie, ce qui signifie qu’aucune modification externe n’est possible.
Ces clients sont par exemple :
- Gmail (client de messagerie web de bureau, iOS, Android, client de messagerie web mobile)
- Outlook Windows
- Outlook Windows Mail
Dans ce cas, si vous définissez des paramètres de mode sombre personnalisés dans le Concepteur d’e-mail, ces paramètres sont remplacés par les paramètres du client de messagerie.
Il est important de comprendre que ces clients de messagerie gèrent le mode sombre, mais votre conception de mode sombre spécifique ne sera pas rendue.
Clients qui prennent en charge le mode sombre personnalisé. custom-support
D’autres clients de messagerie 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 le Concepteur d’e-mail Journey Optimizer.
Voici une liste des principaux clients qui gèrent cette option :
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android
Dans ce cas, les paramètres spécifiques que vous définissez dans le Concepteur d’e-mail doivent s’afficher.
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 visualiser une simulation qui se rapproche le plus possible du résultat final pour chaque client, utilisez l’option Rendu des e-mails 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
-
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.
-
É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.
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 des e-mails 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.