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 que les utilisateurs peuvent activer sur leur appareil ou dans leur application d’e-mail pour assombrir leur écran. Ce paramètre a une incidence sur l'affichage des e-mails. Klaviyo n’a pas de contrôle direct sur la manière dont chaque boîte de réception applique le mode sombre.

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.

Applications et appareils de messagerie offrant le mode sombre

Les spécificités des modifications du mode sombre varient selon les applications d’e-mail, les appareils, et les systèmes d’exploitation. Litmus propose une ressource sur les clients de messagerie 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, laissent les couleurs des e-mails HTML entièrement conçus inchangées, à moins que vous n’incluiez des métabalises de mode sombre. Les e-mails en texte seul peuvent tout de même changer en mode sombre. Lorsque le contenu de l’e-mail reste identique, seule la boîte de réception environnante change de couleur.

Inversion des couleurs

D’autres boîtes de réception, comme Outlook.com, inversent partiellement vos couleurs. Cela signifie que certaines couleurs plus claires sont remplacées par des teintes plus foncées, et que certaines couleurs plus foncées sont remplacées par des teintes plus claires (par exemple, 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.

Certaines boîtes de réception appliquent une inversion complète des couleurs, en modifiant les arrière-plans clairs et foncés. Par exemple, Outlook 2021 pour Windows peut rendre clair un arrière-plan sombre.

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.

Évitez les 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.

De nombreuses marques utilisent des e-mails contenant uniquement des images, car les fichiers image préservent les couleurs et les polices intégrées à l’image. Cependant, les e-mails contenant uniquement des images s’appuient toujours sur le HTML pour la mise en page, l’espacement et les arrière-plans environnants. Une boîte de réception peut modifier ces couleurs environnantes en mode sombre, cette approche ne garantit donc pas que l’e-mail entier correspondra à votre conception d’origine.

Testez votre e-mail en mode clair et sombre

Avant d’envoyer, vérifiez que vos logos, votre texte, et vos liens sont lisibles dans les deux modes. Le test de boîte de réception est disponible pour les comptes Klaviyo payants, et inclut 100 tests par utilisateur et par mois. Chaque aperçu de boîte de réception que vous générez compte comme 1 test.

1. Dans l’éditeur d’e-mail par glisser-déposer, cliquez sur Aperçu, puis sélectionnez Test de boîte de réception.
2. Sélectionnez un profil à utiliser pour la prévisualisation. Pour un e-mail qui utilise les données d’événement, sélectionnez l’événement concerné afin de pouvoir vérifier le contenu personnalisé.
3. Sous Sélectionner des tests de boîte de réception, développez Mode sombre, et choisissez les boîtes de réception utilisées par vos abonnés. Sélectionnez les versions en mode clair pour les comparer, et supprimez toutes les boîtes de réception présélectionnées dont vous n’avez pas besoin.
4. Cliquez sur Exécuter le test. Lorsque les aperçus sont prêts, cliquez sur chaque vignette pour l’examiner.
5. Cliquez sur Terminé pour revenir à l’éditeur. Apportez les modifications de conception nécessaires, puis exécutez de nouveaux tests pour vérifier l’e-mail mis à jour.

En savoir plus sur l’utilisation des tests de boîte de réception. Vous pouvez également envoyer un e-mail de test vers des boîtes de réception auxquelles vous avez accès et le comparer en mode clair et en mode sombre.

Ressources supplémentaires