Meilleures pratiques en matière de conception d'e-mails en mode sombre

Estimé 5 minute de lecture
|
Mis à jour 17 déc. 2024, 10:16 EST
Vous apprendrez

Vous apprendrez

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 ?

Pourquoi les gens utilisent-ils le mode sombre ?

Le mode sombre est devenu populaire parce qu'on lui prête de nombreux avantages. Les utilisateurs peuvent choisir le mode sombre pour : 

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

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

Le mode sombre et votre image de marque

Le 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 le logo de SWAK Cosmetics. Sur un fond blanc, il est superbe.

Mode lumineux du logo SWAK sur mobile

Mais lorsqu'il est affiché sur un appareil en mode sombre, il est impossible à lire.

Logo SWAK en mode sombre sur mobile, non visible

Notez les changements dans l'en-tête de cet e-mail entre le mode clair et le mode foncé. 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 offrant le mode sombre

Appareils et systèmes d'exploitation offrant 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.

Changements minimes

Changements minimes

Certaines boîtes de réception, comme Apple Mail pour ordinateur de bureau, ne modifient pas directement le contenu de vos messages (à moins que vous n'incluiez des balises méta en mode sombre). Dans cette boîte de réception, le seul changement que vous verrez entre un message en mode sombre ou en mode clair est la couleur derrière les informations relatives à l'expéditeur.

Les emails de Bolas en mode clair et en mode foncé côte à côte

Inversion des couleurs

Inversion des couleurs

D'autres boîtes de réception, comme Outlook sur le bureau, inversent partiellement vos couleurs. Cela signifie que certaines couleurs claires sont remplacées par des teintes plus foncées et que certaines couleurs foncées sont remplacées par des couleurs plus claires (par exemple, un texte foncé qui était auparavant sur un fond clair). Le résultat final est un courriel nettement plus sombre que l'original. 

Versions en mode clair et en mode foncé d'un même courriel dans Outlook

Stratégies d'atténuation

Stratégies d'atténuation

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

Élaborer des conceptions en tenant compte des modes clair et foncé

Élaborer des conceptions en tenant compte des modes clair et foncé

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'intègrent parfaitement sur des fonds clairs et foncés, comme celui des produits de boulangerie Bola's.
    Logos Bolas sur fonds sombres et clairs
  • Vous pouvez également ajouter une ombre de couleur claire à un logo sombre sur fond transparent, afin qu'il ressorte en mode sombre.
    Logo SWAK sur fond clair et foncé
  • Vous pouvez également utiliser des fichiers images qui incluent des couleurs d'arrière-plan, plutôt que d'utiliser un arrière-plan transparent. Si vous choisissez cette option, veillez à ce que votre image remplisse entièrement l'espace qu'elle occupe (par exemple, 600px de large pour les images de pleine largeur).
    En-têtes Nani sur fond clair et foncé
  • 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 outre, c'est mieux pour l'accessibilité).
Code personnalisé pour les versions sombres et claires

Code personnalisé pour les versions sombres et claires

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. 

Chaque boîte de réception, appareil et système d'exploitation étant différent, vous devrez tenir compte d'une grande variété de destinataires lorsque vous concevrez les versions en mode sombre et en mode clair d'un message électronique. 

Vous pouvez utiliser @media (prefers-color-scheme : dark) et [data-ogsc] pour cibler spécifiquement les utilisateurs en mode sombre dans le code de votre e-mail. Découvrez quels clients de messagerie prennent en charge ces balises et quel code utiliser dans vos propres créations.

Utilisez des e-mails contenant uniquement des images

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 alt, votre courriel peut paraître suspect dans les boîtes de réception et atterrir 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 contenant uniquement des images pour forcer l'apparition d'un mode lumineux 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 courriel qui correspond généralement à votre conception originale. 

Ressources complémentaires

Ressources complémentaires

Cet article vous a-t-il été utile ?
Utilisez ce formulaire uniquement pour nous faire part de vos commentaires sur cet article. Comment contacter l’assistance.

Explorer d’autres contenus Klaviyo

Communauté
Contactez des membres de votre secteur, des partenaires et des experts Klaviyo pour trouver de l’inspiration, partager des informations et obtenir des réponses à toutes vos questions.
Formation en direct
Participez à une session en direct avec des experts Klaviyo pour découvrir les bonnes pratiques, apprendre à configurer des fonctionnalités clés et bien plus encore.
Assistance

Accédez à l’assistance via votre compte.

Assistance par e-mail (essai gratuit et comptes payants) Disponible 24h/24 et 7j/7

Chat/assistant virtuel
La disponibilité varie selon l'emplacement et le type de forfait