Meilleures pratiques en matière de conception d'e-mails en mode sombre
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 marqueLe 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.
Mais lorsqu'il est affiché sur un appareil en mode sombre, il est impossible à lire.
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 sombreAppareils 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 minimesChangements 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.
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.
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.
- Vous pouvez également ajouter une ombre de couleur claire à un logo sombre sur fond transparent, afin qu'il ressorte en mode sombre.
- 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).
- 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
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
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