Mode sombre pour les courriels : Qu'est-ce que c'est et comment optimiser les courriels ?

Alors que les concepteurs et les chercheurs discutent largement pour savoir si le mode sombre pour les e-mails est sain et nécessaire, les gens l'utilisent de plus en plus. Dans ce billet de blog, nous allons parler plus en détail du mode sombre en général, discuter des conseils de conception d'e-mails en mode sombre, et comment ajouter des styles en mode sombre à votre newsletter sans erreurs.

Qu'est-ce que le mode sombre ?

Le mode sombre affiche des textes, des icônes et des éléments d'interface utilisateur de couleur claire sur des fonds sombres.

Comment cela fonctionne-t-il ? Certains pensent que le mode sombre déplace les couleurs vers les couleurs contrastées (opposées à celles de la roue chromatique) lorsqu'un e-mail est ouvert sur un appareil doté du mode sombre.

Mais ce n'est pas tout à fait vrai. Il n'inverse pas le vert en rouge, ni le bleu en or ou en jaune. Le mode sombre utilise des nuances plus claires des mêmes couleurs (au cas où vous n'auriez pas défini une couleur spécifique comme arrière-plan du contenu).

Comment cela fonctionne-t-il ? Le client de messagerie détecte le schéma de couleurs d'arrière-plan du contenu du message. Il applique ensuite des arrière-plans sombres s'ils n'ont pas été définis et applique des nuances de contraste des couleurs du contenu de l'e-mail.

(Courriel en mode lumineux)

(Courriel en mode sombre)

Cependant, le mode sombre le transforme en blanc dans Gmail sur iOS et Android lorsqu'il s'agit d'un fond noir. Le gris foncé devient gris clair, etc.. 

Pourquoi le mode sombre est-il si populaire ?

Le mode sombre pour les e-mails devient si populaire pour plusieurs convictions :

• il est recommandé par les ophtalmologistes

On dit qu'un texte clair sur un fond sombre réduit la fatigue oculaire. Cependant, les ophtalmologistes ne s'accordent toujours pas sur le réglage du mode sombre et son impact sur nos yeux ;

• c'est à la mode en ce moment

Bien. C'est vrai. Beaucoup de gens l'activent juste parce que le mode sombre est quelque chose de nouveau, et qu'ils veulent l'essayer. En conséquence, il y a 81,9% d'utilisateurs avec le mode sombre sur les téléphones seulement ;

• c'est tout simplement comfortable

Certains utilisateurs trouvent qu'il est plus confortable de lire en mode sombre, notamment lorsqu'il fait nuit dehors ;

• il permet d'économiser l’autonomie de votre batterie

Google a confirmé que le mode sombre d'Android permet d'économiser jusqu'à 50 % de l'autonomie de votre batterie, car il réduit la luminosité de l'écran. Toutefois, cela ne concerne que les écrans OLED ;

Wired affirme que le mode sombre n'a aucun impact sur la batterie si l'on parle des écrans LCD, qui sont largement utilisés par Apple. À propos, Apple a promis d'abandonner tous les écrans LCD au profit des écrans OLED.

Liste des clients de messagerie qui prennent en charge le mode sombre, et comment vos messages s'affichent dans ces clients

Le mode sombre commence tout juste à être populaire. Seuls les derniers appareils Android et iOS dotés des dernières versions des systèmes d'exploitation prennent en charge le mode sombre et rendent correctement les styles en mode sombre. Voyons maintenant quels clients de messagerie prennent en charge le mode sombre et comment ils le gèrent.

Remarque : Tout ce qui ne figure pas sur cette liste (clients de messagerie de bureau, Web et mobiles traditionnels) ne changera rien, de sorte que les e-mails en mode sombre peuvent sembler bizarres dans d'autres clients de messagerie.

• Application Gmail sur Android (Android 13)

Il inverse complètement les couleurs : non seulement pour l'interface utilisateur, mais aussi pour les messages électroniques qui s'affichent en mode sombre.

Nous avons testé une grande variété d'e-mails. L'un d'entre eux avait initialement un fond sombre et une ligne/ruban blanc avec un menu.

Android 10 n'a pas inversé les couleurs sombres en couleurs claires, mais il a changé ma ligne blanche en couleur sombre.

(Courriel en mode sombre, thème sombre)

Remarque importante :

Comme nous l'avons dit, seule la dernière version d'Android - Android 10 - rend les e-mails en mode sombre. Mais il existe d'autres conditions obligatoires auxquelles il faut prêter une attention particulière si vous voulez voir les e-mails en mode sombre d'Android. Il s'agit des conditions suivantes :

1. Votre application Gmail doit être téléchargée à partir du Google PlayStore, et non pas l'application qui était sur votre téléphone par défaut. Les téléphones Samsung en ont parfois.
2. Vous devez disposer de la dernière version de l'application Gmail.

• Application Gmail sur iOS (iOS 13)

Que fait l'application Gmail sur iOS ?

Mon courrier électronique était à l'origine foncé avec la ligne de menu claire. iOS a inversé les couleurs de police ainsi que les arrière-plans. Par exemple, les arrière-plans clairs avec une couleur de texte foncée deviennent des couleurs foncées avec des couleurs de police claires.

Remarque importante :

Gmail est toujours en train de déployer le mode sombre pour les emails sur iOS. Il est censé être entièrement visible et disponible pour tous les utilisateurs dans environ deux semaines. Mais le même processus pour Android a pris à Google environ deux mois au lieu de deux semaines. Nous devons simplement être patients.

• L'application de messagerie native de l'iPhone (Native Mail sur iOS)

Apple a ajouté la prise en charge du mode sombre à partir d'iOS 13 dans son application de messagerie Apple native. Ce client de messagerie vous permet d'activer le mode sombre pour l'interface utilisateur et la zone de messagerie. Si vous avez défini une couleur d'arrière-plan transparente, l'application iPhone Mail la transformera en arrière-plan plus sombre.

Sinon, vos e-mails en mode sombre auront le même aspect dans les deux modes, clair et sombre.

• Apple Mail sur macOS

Même situation ici. Apple Mail permet d'activer le mode sombre pour l'interface utilisateur, mais cela n'affecte pas les schémas de couleurs pris en charge de vos e-mails HTML en mode sombre. En outre, Apple Mail sur macOS vous permet d'ajouter du code personnalisé pour modifier le mode sombre à votre convenance par le biais de CSS. Cela comprend des métabalises HTML, des cibles CSS et des propriétés mises à jour qui permettent aux développeurs d'e-mails de modifier les couleurs des polices, des visuels, des images d'arrière-plan, etc.

• Gmail sur macOS et Windows

Ce client de messagerie, l'un des plus populaires sur un système d'exploitation de bureau, n'inverse pas les couleurs ou le fait partiellement en mode sombre - appelez-le comme vous voulez.

Le client de messagerie vous permet d'activer le mode sombre pour l'interface utilisateur, mais la zone de messagerie reste claire, ce qui n'affecte en rien le rendu des messages. Vos e-mails auront exactement le même aspect en mode sombre et en mode clair.

• Application Outlook sur Android

Il est dit qu'il inverse partiellement les couleurs. Cependant, lorsque j'ai testé le mode sombre sur mon appareil Android, aucune inversion des couleurs n'a été constatée. Toutefois, si vous rencontrez un tel problème, ou si votre courriel en mode sombre est incompatible avec Outlook sur Android, il suffit d'ajouter le préfixe data-ogsc aux styles de mode sombre dupliqués. En conséquence, vous devriez avoir quelque chose comme ceci :

[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }

• L'application Outlook sur iOS

Ce client de messagerie est censé inverser partiellement les couleurs en mode sombre. Mais je n'ai pas non plus l'application Outlook sur mon iPhone.

• Outlook 2019 sur macOS

Lorsque vous activez le mode sombre dans ce client de messagerie, la palette de couleurs est inversée. Il fait exactement comme Android 10 - il laisse un schéma de couleurs sombres tel qu'il est et transforme un fond clair en fond sombre.

• Outlook.com

La situation avec Outlook.com est très intéressante.

Lorsque le mode sombre est activé, il est censé inverser partiellement les couleurs. Mais lorsque j'envoie un email avec un schéma de couleurs sombres, Outlook.com inverse les couleurs vers le clair en mode sombre. Et quand j'envoie un email avec le design fait en couleurs en mode clair, Outlook.com inverse les couleurs en mode foncé.

Faits intéressants concernant le mode sombre sur Outlook.com :

1. Outlook.com n'affecte pas du tout la conception des e-mails AMP.

Si vous avez défini un arrière-plan blanc, c'est ce que vos utilisateurs verront dans ce client de messagerie particulier, même si l'e-mail est en mode sombre.

2. Outlook.com vous permet de voir vos e-mails en mode clair et en mode foncé sans changer la couleur de l'interface utilisateur.

Pour activer l'effet du mode sombre pour vos e-mails, il vous suffit de cliquer sur ce bouton :

3. Outlook n'inverse pas les couleurs des bordures.

Conseils pour optimiser les e-mails en mode sombre

N'essayez pas de pirater le mode sombre personnalisé dans les e-mails pour que vos e-mails s'affichent comme dans les modes normaux. Parce que si les gens utilisent ce mode, ils préfèrent le schéma de couleurs pour une raison. Et nous devons respecter cela.

Ainsi, pour optimiser votre modèle d'e-mail pour le mode sombre et cibler les utilisateurs de ce mode, vous devez.. :

1. Travailler sur l'imagerie

a) Pour éviter ce problème, utilisez des icônes et des images à fond transparent ou assurez-vous que leur fond est de la même taille :

Seriez-vous d'accord sur le fait que ceci n'est pas le meilleur exemple d'un e-mail à thème sombre, car les images avec des fonds blancs de tailles diverses ruinent toute l'impression ?

b) Faites attention aux images PNG transparentes

Vous êtes censé utiliser des images transparentes pour les fiches produits afin de créer des images appropriées en mode sombre pour votre newsletter. N'oubliez pas d'ajouter un contour translucide aux PNG transparents contenant du texte sombre à votre e-mail en mode sombre.

Cependant, les photos de personnes seraient plus belles si elles avaient un fond spécifique.  En outre, il serait judicieux d'utiliser un contour et un fond coloré ou blanc pour les images sombres. En revanche, les images dont l'arrière-plan est de couleur foncée conserveront cet arrière-plan, quel que soit l'aspect de l'e-mail.

2. Travailler sur les logos

a) Que vos logos n'aient pas de fond

b) Vos logos ne doivent pas être rédigés en noir afin d'obtenir un bon rendu dans les thèmes sombres et clairs.

Certains codeurs suggèrent d'utiliser deux logos et fournissent même un exemple de code qui garantit que le logo noir s'affiche dans le thème en mode clair et le blanc - dans le mode sombre.

Nous avons testé - le code n'a pas aidé. Mais a rendu le code de notre courriel beaucoup plus lourd.

c) Appliquer un fond clair (ou un contour blanc) et des ombres au logo spécifique au mode sombre

Si votre logo doit être écrit en noir, ajoutez-lui une ombre légère. Il sera plus joli et respectera la palette de couleurs de votre marque.

3. Ajouter des styles de mode sombre pour @media via media query

Pour que votre message s'affiche correctement en mode sombre, vous devez ajouter une requête média spéciale à chaque élément média du message. Vous devriez obtenir quelque chose comme ceci :

@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
}

Cette requête média vous aidera à peaufiner vos listes de diffusion en mode sombre pour une meilleure compatibilité avec les clients de messagerie tels qu'Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) et Outlook App (iOS). Il suffit d'ajouter la requête (prefers-color-scheme : dark) à la section <style></style> de votre courriel pour créer des styles de mode sombre personnalisés.

4. Définir les couleurs d'arrière-plan des conteneurs d'e-mails

Si vous ne souhaitez pas que le contenu de vos e-mails ait un arrière-plan sombre, vous pouvez définir une couleur d'arrière-plan claire personnalisée ou un mode sombre personnalisé avec Stripo.

Le schéma de couleurs que vous avez défini comme "Couleur d'arrière-plan du contenu" restera le même dans le mode sombre des e-mails.

Définissez ensuite le schéma de couleurs "transparent" pour la bande - dans ce cas, la couleur de fond choisie sera appliquée au contenu de l'e-mail, mais pas à l'ensemble de la zone de l'e-mail.

Veillez à définir le même schéma de couleurs pour toutes les bandes/lignes.

4. Testez vos courriels

Testez toujours vos e-mails HTML en mode clair ou foncé.

5. N'ajoutez pas d'éléments de code supplémentaires

Malgré certaines recommandations d'ajouter des éléments de code spéciaux dans les modèles de vos thèmes sombres qui sont censés activer le mode sombre pour vos e-mails, ces échantillons de code ne résolvent aucun problème pour le moment. C'est du moins ce que montrent de nombreux tests de styles en mode sombre uniquement.

Par ailleurs, les modèles d'e-mails fonctionnent assez bien dans la plupart des clients de messagerie.

Il n'y a donc rien de sorcier à optimiser votre conception en mode sombre intégral. Il vous suffit de travailler sur l'apparence de vos e-mails pour obtenir des versions en mode sombre exceptionnelles de vos e-mails. Il n'est pas encore nécessaire de travailler avec des codes.

Quel est l'impact du mode sombre sur les e-mails en texte clair ?

Les courriels personnels en mode sombre sont censés s'afficher correctement sur tous les clients de messagerie qui prennent en charge cette nouvelle fonctionnalité.

Mais est-ce vrai ? Vérifions-le :

1. Gmail sur le bureau n'inverse pas du tout nos e-mails. Nous ne devons donc pas nous inquiéter à ce sujet.

2. Gmail sur iOS et Android affiche une typographie claire sur un fond sombre.

3. Outlook inverse également les couleurs de nos e-mails en texte clair en mode sombre.

4. Native iPhone et les applications Apple Mail inversent les couleurs d'arrière-plan de clair à foncé, et les couleurs de texte de foncé à clair lorsqu'il s'agit de courriers électroniques personnels en mode sombre.

Toutefois, certaines choses concernant les messages en texte brut dans Apple Mail et dans la messagerie de l'iPhone méritent d'être mentionnées :

• il n'inverse les couleurs que si c'est le seul ou le premier courriel d'une chaîne. Parfois, le deuxième courriel et tous les suivants auront un fond blanc et une typographie sombre ;

• même s'il s'agit du premier courriel d'une chaîne, mais qu'il contient une image, votre courriel personnel en mode sombre pourrait devenir blanc. Le logo de votre entreprise qui figure dans la signature de votre courriel est également considéré comme une image ;         
• Les courriels personnels qui vous ont été transférés peuvent également avoir un fond blanc.

Conclusions

Bien sûr, étant donné que seule une petite partie des utilisateurs peut voir le mode sombre, nous pourrions être tentés de nous demander : l'expérience du mode sombre vaut-elle vraiment l'effort qu'elle demande ? C'est le cas ! Tout d'abord, les gens l'utilisent pour une raison. Nous devons respecter cela et optimiser la conception de nos e-mails pour les styles personnalisés du mode sombre.

Deuxièmement, la popularité de cette fonctionnalité est croissante, et très bientôt, un plus grand nombre d'abonnés activeront ce mode. Vous devez donc être prêt à mettre en œuvre le mode sombre dans votre newsletter.