Les bases du mode sombre dans les emails

Nous savons bien que la lumière finit généralement par l’emporter sur l’obscurité. Il suffit de regarder Star Wars, Le Seigneur des anneaux… ou même La Divine Comédie, d’ailleurs. La pop culture (ou la culture tout court, en réalité) nous a appris que le côté obscur n’est pas le meilleur endroit où se trouver. Et pendant longtemps, nous y avons cru. Mais ces dernières années, le côté sombre de nos applications est devenu le choix privilégié de nombreux utilisateurs. Il n’y a pas que Discord ou Twitter :  le mode sombre est quasiment partout, y compris dans l’email. 

Nous comprenons. Le développement d’emails est déjà suffisamment complexe. Mais il s’agit d’une tendance à laquelle vous ne pouvez pas échapper. Alors, accrochez-vous et préparez-vous à découvrir ce qui rend le mode sombre si populaire, comment il peut améliorer votre délivrabilité et comment optimiser vos emails pour le mode sombre. 

Inutile de chercher des définitions complexes : le mode sombre dans les emails correspond exactement à ce que son nom indique. Le mode sombre est un paramètre que les utilisateurs peuvent activer pour que le texte d’une application s’affiche sur un fond noir au lieu de son fond clair habituel. Tous les sites Web ou applications ne disposent pas d’une fonctionnalité de mode sombre, mais elle est courante sur les plateformes avec beaucoup de texte et de fond blanc comme les réseaux sociaux (Twitter, Instagram) et, bien sûr, les clients de messagerie.

L’engouement pour le mode sombre est une raison suffisante pour vous motiver à vérifier que vos emails sont optimisés pour cette fonctionnalité. Près de 82 % des utilisateurs interrogés par Android Authority utilisent les paramètres du mode sombre sur les applications et les smartphones seuls.  Traditionnellement, le mode sombre était adopté et mis en avant par un public plus technique, mais des statistiques récentes sur l’iPhone montrent que les utilisateurs passent à peine plus de 50 % de temps en moins à utiliser leurs appareils lorsque le mode sombre est activé. Cela montre à quel point le mode sombre rend l’expérience utilisateur plus efficace. De nombreux arguments expliquent pourquoi le mode sombre est supérieur (et nous les aborderons plus en détail), mais voici les principaux :

• Une fatigue visuelle réduite
• Une réduction de la lumière bleue
• Des économies d’énergie (consomme moins de batterie)
• Plus d’options de personnalisation du design

 Quelles que soient les raisons, les statistiques le prouvent : le mode sombre sur les appareils est une option incontournable. Mais qu’en est-il spécifiquement pour l’email ?

Le mode sombre assombrit les couleurs de fond et transforme également le texte de couleur sombre en texte clair afin que les mots soient bien visibles sur le nouveau fond. Alors, à quoi cela ressemble-t-il dans une boîte de réception ?

Prenons notre propre newsletter Mailgun comme exemple. Il n’y a pas que la couleur de fond et le corps du texte qui changent, notre logo et nos icônes de réseaux sociaux sont également modifiés.  

Un autre exemple est la boîte de réception Gmail et l’option permettant de basculer entre le mode sombre et le mode classique « clair » ou « jour ».

Source : Green Eye IT

Le mode « nuit » de Gmail ne change rien aux onglets, à la barre latérale ou à la mise en page générale de l’application. Les seuls changements concernent la couleur de fond et les couleurs de police à l’écran. 

Source : TechBlogBox

Le passage au mode sombre ne change rien aux onglets de Gmail, ni à sa mise en page générale et à son ergonomie. Les seuls changements concernent la couleur de fond et les couleurs de police à l’écran.

Ces changements mineurs peuvent sembler décevants : quel est l’intérêt du mode sombre, après tout ?

Il y a plusieurs raisons simples à l’existence du mode sombre : de nombreuses personnes le trouvent, littéralement, plus reposant pour les yeux. Bien qu’il y ait des études contradictoires pour savoir si le mode sombre réduit réellement la fatigue visuelle et l’exposition à la lumière bleue des écrans, certaines personnes préfèrent simplement un fond plus sombre. De plus, le mode sombre peut prolonger l’autonomie de votre téléphone ou de votre ordinateur portable en utilisant potentiellement moins d’énergie.

Le principal argument en faveur du mode sombre est probablement son rôle dans accessibilité des emails. Les contrastes de couleurs élevés et la luminosité réduite du mode sombre sont généralement considérés comme plus lisibles pour les personnes présentant des déficiences visuelles comme la sensibilité à la lumière.  

Si chacun a ses propres raisons d’utiliser le mode sombre, il est difficile de nier sa popularité croissante au cours des dernières années, à tel point que la plupart des grands clients de messagerie proposent des paramètres de mode sombre à leurs utilisateurs.

Il serait peut-être plus simple de lister les clients de messagerie qui ne proposent pas d’interface en mode sombre. Mais, pour vous donner un aperçu rapide, voici les principaux clients de messagerie qui proposent des paramètres de mode sombre pour les emails :

• Gmail (via navigateur Web, application mobile Android et application mobile iOS)
• Outlook (via navigateur Web Outlook.com, application de bureau Mac, application de bureau Windows, application mobile Android et application mobile iOS)
• Les plateformes Apple Mail (via l’application de bureau Apple Mail, l’application Mail sur iPhone et l’application Mail sur iPad)
• Yahoo (via navigateur Web, application mobile Android et application mobile iOS)

Selon notre l’engagement par email en 2021 (rapport), il est quasiment certain que la majorité de vos contacts utiliseront au moins l’un de ces fournisseurs. Le problème, cependant, est que tous ces clients affichent les emails en mode sombre un peu différemment. Certains inverseront automatiquement les couleurs, d’autres non. Certains supporteront @media (prefers-color-scheme), d’autres (nous pensons à vous, Gmail) non. Par conséquent, lors de l’envoi d’emails, la meilleure solution pour maximiser l’engagement est de vous assurer qu’ils s’affichent parfaitement en mode clair comme en mode sombre. Vous vous demandez peut-être comment faire ? Et pourquoi ? Découvrons ensemble comment le mode sombre peut affecter votre délivrabilité et ce que vous pouvez faire pour vous assurer de rester du bon côté du mode sombre.

Il est important de se rappeler que les paramètres du mode sombre sont avant tout une préférence contrôlée par l’utilisateur. Chaque client de messagerie, appareil ou service aura ses propres processus et options de design pour les utilisateurs souhaitant activer cette fonctionnalité.

Cela dit, tous les clients de messagerie ne se valent pas en matière d’optimisation pour le mode sombre. L’essentiel du travail de design et d’optimisation doit être effectué lors du développement de l’email, et vos emails doivent être testés et prévisualisés pour éviter les problèmes de délivrabilité.

Il y a une raison principale pour laquelle le mode sombre peut avoir un impact sur votre délivrabilité : les utilisateurs d’emails sont très exigeants. De nombreux clients de messagerie n’optimisent pas automatiquement les éléments visuels des emails (logos, photos, etc.) pour le mode sombre, et un contenu non optimisé peut rendre vos emails confus et difficiles à lire.

La plupart de vos abonnés qui utilisent le mode sombre ne perdront pas de temps à essayer de déchiffrer vos emails s’ils sont mal affichés. Et pourquoi le feraient-ils ? Au lieu de cela, ils les ignoreront, les supprimeront ou les marqueront comme spam , ce qui aura un impact négatif sur votre délivrabilité.

En revanche, si vous prenez le temps de vous assurer que vos emails s’affichent parfaitement même en mode sombre, ils auront beaucoup plus de chances d’être lus et de susciter de l’engagement. Et n’oubliez pas : de bonnes pratiques en matière d’emails et de bonnes statistiques d’engagement sont synonymes d’une bonne délivrabilité.

Alors, quels ajustements rapides pouvez-vous apporter au design de vos emails pour optimiser vos messages pour le mode sombre ?

Vous avez des questions, nous avons les réponses. Nous avons compilé pour vous les méthodes les plus simples et efficaces pour que vos emails conservent un rendu optimal en mode sombre.

Optimiser vos emails et vos modèles pour le mode sombre n’a rien de compliqué. Vous trouverez ci-dessous quelques-uns de nos meilleurs conseils de design pour adapter vos emails clairs au mode sombre.

Rendre vos images transparentes

Pour rendre les images de vos emails transparentes, il suffit de choisir des images sans fond de couleur ou blanc. Les images transparentes vous permettent de placer des logos, des photos et bien plus encore sur n’importe quel fond d’email sans créer de conflits de couleurs. Les images à fond transparent que vous trouvez en ligne présentent souvent un damier blanc et gris, comme dans l’exemple de notre ancien logo ci-dessous.

À l’inverse, les images avec un fond sombre conserveront ce fond, quel que soit l’affichage de l’email.

Veillez à choisir des images qui s’afficheront de la même manière sur n’importe quel fond et à les enregistrer au format PNG transparent. Lorsque votre utilisateur ouvrira votre email en mode sombre, vos images seront nettes et parfaitement intégrées. Vos utilisateurs pourront ainsi les visualiser sans être gênés par une mise en page brouillonne. N’oubliez pas de tester également le contraste de votre logo sur un fond clair et sombre. Si votre logo ne ressort pas, vos lecteurs ne sauront pas qu’il s’agit de vous.

Ajouter un contour blanc aux images et polices sombres

S’il est préférable d’éviter certains fonds d’image pour que vos graphismes se fondent dans le mode sombre, il peut parfois être utile d’attirer l’attention sur des polices et des images sombres pour améliorer leur visibilité. Vous pouvez très facilement ajouter un contour blanc à vos images et à votre texte dans des outils d’édition d’images comme Photoshop. 

Ainsi, vos images conservent exactement la même apparence qu’en mode clair. Cependant, elles ressortent mieux et restent lisibles pour les utilisateurs en mode sombre. Les utilisateurs ignoreront rapidement vos emails s’ils sont illisibles. Les contours offrent une solution simple pour préserver à la fois la lisibilité et l’impact visuel.

Envisager les emails en texte brut

Les emails en texte brut ne sont pas à négliger. Ils apportent de l’authenticité et suppriment les artifices inutiles qui détournent l’attention. Les designs plus simples sont d’ailleurs une tendance cette année. Peut-être que vous n’utilisez pas beaucoup d’images ou de logos sophistiqués dans votre programme d’emailing, ou que vous préférez éviter de vous compliquer la tâche. L’avantage des emails en texte brut est qu’ils s’afficheront toujours en mode sombre sans aucun problème : un fond clair devient sombre, le texte noir devient blanc, et le tour est joué. 

Si vous savez que votre liste de contacts apprécie les emails simples et sans fioritures, les emails en texte brut pourraient parfaitement vous convenir. Leur rendu sera impeccable, vos utilisateurs obtiendront ce qu’ils souhaitent et votre délivrabilité s’en portera à merveille.

Le rendu des emails est le cauchemar de toute équipe de développement. Et bien sûr, le mode sombre ne fait pas exception. Chaque client de messagerie affichant les emails en mode sombre différemment, il est difficile de concevoir un message qui aura la même apparence chez tous les fournisseurs.

Outre ces recommandations de design universelles, il existe plusieurs correctifs de codage que vous pouvez utiliser pour créer une expérience personnalisée en mode sombre pour vos emails. 

Activer le mode sombre avec les balises meta et le sélecteur :root

Utilisez dans la balise pour indiquer au client de messagerie que votre email prend en charge le mode clair et le mode sombre.

Si votre utilisateur a activé ce paramètre dans son application de messagerie, les balises meta ci-dessous permettront de s’assurer que le mode sombre est bien appliqué :  

                                

                                    <meta name="color-scheme" content="light dark">rnrn<meta name="supported-color-schemes" content="light dark">
                                
                            

Le sélecteur :root permettra au client de messagerie de rechercher le style de thème de couleur dont il a besoin sans avoir à parcourir tous les styles.

                                

                                    <style type="text/css">rn:root {rn  color-scheme: light dark;rn  supported-color-schemes: light dark;rn}rn</style>
                                
                            

Ajouter des styles de mode sombre via une media query

Vous pouvez créer des styles CSS personnalisés pour définir l’apparence de différents éléments lors de l’utilisation du mode sombre, comme les logos, la couleur de police, le fond ou le texte des liens.

Ajoutez cette media query à votre bloc  pour personnaliser ces éléments avec les valeurs de couleur de votre marque :

                                

                                    @media (prefers-color-scheme: dark ) {rn   /* Shows dark mode logo */rn.dark-logo-wrapper,.dark-logo {rn       display: block !important;rn}rn   /* Hides light mode logo */rn       .light-logo {rn         display: none !important;rn}rnrn   /* Creates a custom dark mode background color */rn  .body {rn    background-color: #282828 !important;rn    color: #ffffff  !important;rn}rnrn /* Sets the font color */rn  h1, h2, h3, p, td {rn    color: #ffffff !important;rn}rnrn/* Sets the text link color */  rn  a { rncolor: #43D6B7 !important;rn}rnrn/* More styles here */  rn}
                                
                            

Vous pouvez ajouter ceci à la section  de votre email pour créer des styles de mode sombre personnalisés pour iOS, Apple Mail et certaines versions d’Outlook.

Ajouter les bonnes classes et les bons styles aux éléments spécifiques au mode sombre

Si vous disposez de versions claires et sombres de certains éléments, comme les images, vous devez vous assurer que les styles créés pour le mode sombre et le mode clair s’affichent au bon moment. C’est particulièrement important si vous avez une version claire et une version sombre de votre logo et que vous souhaitez basculer de l’une à l’autre selon que le destinataire utilise ou non le mode sombre.

 Voici un exemple de ce à quoi cela ressemblerait dans votre HTML :

                                

                                    <!-- start HEADER_LOGO -->rn<a href="https://mailgun.com/" target="_blank">rnrn<img src="https://www.yoursite.com/images/mailgun-light.png" class="light-logo" />rnrn<!-- Hide the dark logo in Outlook and Windows 10 Mail with conditional code but it will be revealed if dark mode is triggered -->rn<div class="dark-logo-wrapper" style="mso-hide: all; display: none;">rn   <img src="https://www.yoursite.com/images/mailgun-dark.png" class="dark-logo" style="display: none;" />rn</div> rnrn</a>rn<!-- end HEADER_LOGO -->rn
                                
                            

Ces correctifs ne fonctionneront pas tous sur l’ensemble des clients de messagerie et, malgré tous nos efforts, nos emails en mode sombre risquent d’avoir une apparence légèrement différente selon les applications et les fournisseurs. Pour en avoir la certitude, testez le rendu de vos emails avant l’envoi.

Le mode sombre dans les emails est devenu une fonctionnalité très prisée depuis sa création. Il est important de vous préparer à optimiser vos emails pour votre liste de contacts si vous souhaitez générer de l’engagement et préserver votre délivrabilité.

Voici quelques conseils simples à retenir pour vos envois en mode sombre :

1. Choisissez des images et des logos qui ressortiront bien à la fois en mode clair et en mode sombre.
2. Utilisez des images transparentes sans fond dès que possible.
3. Ajoutez un contour blanc pour faire ressortir les polices, logos et images sombres.
4. Si cela convient à vos contacts, envisagez d’envoyer des emails en texte brut à votre liste pour un affichage automatique et sans accroc.

Surtout, n’oubliez pas de tester vos emails avant de les envoyer. Le monde de l’email est en constante évolution, tout comme le mode sombre. Veillez donc à tester vos emails sur les clients de messagerie les plus utilisés par vos contacts. Vous pouvez le faire manuellement ou utiliser des outils de test d’emails tels que Litmus ou Email on Acid. 

Soyons réalistes. Cela pourrait vous causer quelques maux de tête et s’avérer complexe, mais le côté obscur est là pour rester. Le mode sombre dans les emails présente de réels avantages en matière de délivrabilité et d’accessibilité. Il est donc temps de l’adopter. De plus, vous n’avez pas vraiment besoin de Dark Vador, de Sauron ou d’une visite dans le neuvième cercle de l’enfer pour y parvenir.

Auteur·trice: Mary Dolan Mary Dolan is a former Community Marketing Manager and Copywriter at Sinch Mailgun. She was our social media guru and community leader. She was dialed into the email network and writes about the email topics and trends you're probably talking about.