Bonnes pratiques en matière de conception d’e-mails en mode sombre

Objectif de cet article

Découvrez le mode sombre, un paramètre de l'appareil que certains utilisateurs activent pour assombrir leur écran. Ce paramètre a une incidence sur l'affichage des e-mails. Le mode sombre est un paramètre de l’utilisateur final qui est sélectionné au niveau de l’appareil, et Klaviyo n’a pas de contrôle direct sur la façon dont le mode sombre est mis en œuvre sur chaque appareil.

Pourquoi les gens utilisent-ils le mode sombre ?

Le mode sombre est devenu populaire, car on pense qu’il présente de nombreux avantages. Les utilisateurs peuvent choisir le mode sombre pour :

• Réduisez la fatigue oculaire.
• Favorisez des habitudes de sommeil plus saines.
• Prolongez l’autonomie de la batterie d’un appareil.
• Améliorer l’accessibilité.

Selon Litmus, le nombre de personnes qui consultent des e-mails en mode sombre est passé de 28 % en 2021 à 34 % en 2022.

Mode sombre et votre image de marque

Le mode sombre a un impact sur l'image de marque de votre e-mail en ajustant le code HTML utilisé pour l'afficher dans la boîte de réception. Ces ajustements peuvent être aussi minimes que l'inversion des couleurs dans les e-mails en texte seul (tout en laissant les e-mails en HTML inchangés), ou aussi importants que l'ajustement de toutes les couleurs dans votre modèle d'e-mail entièrement conçu.

Si vous ne tenez pas compte du mode sombre lors de la conception de vos e-mails, vous risquez d’avoir un texte difficile à lire, des couleurs qui ne correspondent pas au style de votre marque, et bien d’autres choses encore.

Prenez en compte le logo de SWAK Cosmetics. Sur un arrière-plan blanc, cela a fière allure.

Mais, lorsqu’il est affiché sur un appareil en mode sombre, il est impossible de le lire.

Remarquez les changements dans cet en-tête d’e-mail entre le mode clair et le mode sombre. La couleur d’arrière-plan de l’e-mail, la couleur du texte et la couleur de la barre de liens ont toutes été inversées.

Appareils et systèmes d’exploitation qui proposent le mode sombre

Les spécificités des modifications du mode sombre varient selon les appareils et les systèmes d'exploitation. Litmus propose une ressource sur les appareils qui offrent le mode sombre et sur la façon dont ils traitent les e-mails HTML.

En général, les boîtes de réception se répartissent en deux catégories : celles qui n'apportent que peu ou pas de changements et celles qui inversent les couleurs des e-mails.

Modifications minimales

Certaines boîtes de réception, comme Apple Mail sur ordinateur, ne modifient pas directement le contenu de votre e-mail (sauf si vous incluez des balises meta du mode sombre). Dans cette boîte de réception, le seul changement que vous verrez entre un message en mode sombre ou clair est la couleur derrière vos informations d’expéditeur.

Inversion des couleurs

D’autres boîtes de réception, comme Outlook sur ordinateur, inversent partiellement vos couleurs. Cela signifie que certaines couleurs plus claires sont remplacées par des teintes plus foncées, et certaines couleurs plus foncées sont remplacées par des teintes plus claires (p. ex., du texte foncé qui se trouvait auparavant sur un arrière-plan clair). Le résultat final est un e-mail nettement plus sombre que l’original.

Stratégies d’atténuation

Il existe plusieurs stratégies pour maintenir votre image de marque tout en optimisant pour les modes clair et sombre. Choisissez celle qui correspond le mieux à la capacité de votre équipe et à vos besoins en matière d’identité de marque.

Développer des designs en gardant à l’esprit les modes clair et sombre

Si vous utilisez l'éditeur "glisser-déposer" de Klaviyo pour envoyer vos e-mails, cette stratégie est la meilleure. Développez vos modèles d’e-mails en gardant à l’esprit les changements qu’ils subiront sur les appareils en mode sombre :

• Utilisez des logos et des images qui s’affichent parfaitement sur des arrière-plans clairs et sombres, comme celui-ci pour les produits de boulangerie de Bola.
  

• Ou ajoutez une ombre de couleur claire à un logo foncé avec un arrière-plan transparent, afin qu’il ressorte en mode sombre.
  

• Vous pouvez aussi utiliser des fichiers image qui incluent des couleurs d’arrière-plan, plutôt que d’utiliser un arrière-plan transparent. Si vous choisissez cette option, assurez-vous que votre image remplit entièrement l’espace qu’elle occupe (par ex., 600 px de large pour les images en pleine largeur).
  

• Utilisez du texte dans la mesure du possible, plutôt que des images contenant du texte. Cela permet une inversion complète des couleurs (en plus, c’est mieux pour l’accessibilité).

Versions sombre et claire du code personnalisé

Si vous disposez d'une équipe de développeurs capables de coder vos e-mails HTML à partir de zéro, vous pouvez fournir une feuille de style CSS qui détecte si l'internaute utilise le mode sombre ou le mode clair et ajuste la conception en conséquence. Cette option peut remplacer certaines options par défaut du mode sombre dans certaines boîtes de réception, ce qui vous permet de mieux contrôler la situation.

Vous pouvez utiliser @media (prefers-color-scheme: dark) et [data-ogsc] pour cibler spécifiquement les utilisateurs du mode sombre dans le code de votre e-mail. En savoir plus sur les clients de messagerie qui prennent en charge ces tags et sur le code à utiliser dans vos propres conceptions.

Utilisez des e-mails contenant uniquement des images

Nous vous déconseillons d'utiliser des e-mails contenant uniquement des images, et ce pour plusieurs raisons :

• Sans texte alternatif, votre e-mail peut sembler suspect pour les boîtes de réception et arriver dans le dossier spam.
• Les e-mails contenant uniquement des images ne constituent pas une bonne pratique en matière d'accessibilité, car ils sont difficiles à lire pour de nombreuses personnes et pour les lecteurs d'écran.
• L’utilisation d’e-mails composés uniquement d’images pour forcer une apparence en mode clair revient à contourner les préférences de vos abonnés.

Cependant, de nombreuses marques utilisent cette stratégie, il est donc utile de la mentionner ici. Les e-mails contenant uniquement des images ne dépendent pas du code HTML pour les couleurs, les polices, l'espacement, etc. Cela signifie qu’ils ne peuvent pas être inversés, de sorte que les boîtes de réception afficheront un e-mail qui correspond généralement à votre conception originale.