Mode sombre pour e-mails : Qu’est-ce que c’est, et comment optimiser les e-mails

Pendant que les designers et les chercheurs discutent amplement à savoir si le mode sombre est sain et nécessaire, les gens l’utilisent de plus en plus.

Qu’est-ce que le mode sombre ?

Le mode sombre affiche du texte, des icônes et d’autres éléments de couleur claire sur un fond sombre.

Comment est-ce que cela fonctionne ? Certains croient que le mode sombre transforme les couleurs en contrastes (couleurs opposées sur la roue des couleurs) lorsqu’un e-mail est ouvert sur un appareil avec un mode sombre.

Mais ce n’est pas exactement vrai. Il n’inverse pas le vert en rouge ni le bleu en doré ou jaune. Le mode sombre utilise des teintes plus claires des mêmes couleurs (si vous n’avez pas donné une couleur spécifique à l’arrière-plan).

Comment cela se produit-il ? Un client e-mail détecte la couleur de fond du e-mail, puis applique un fond sombre s’il n’a pas été défini pour ensuite transformer les teintes des couleurs du contenu du e-mail.

(E-mail en mode clair)

(E-mail en mode sombre)

Par contre, lorsqu’il s’agit d’un fond noir, le mode sombre le transforme en blanc dans Gmail sur iOS et Android, le gris foncé se transforme en gris pâle, et ainsi de suite. 

Qu’est-ce qui rend le mode sombre si populaire ?

Cette fonction devient très populaire pour plusieurs convictions :

• Il est recommandé par les ophtalmologistes

Du texte clair sur un fond sombre est censé réduire la fatigue oculaire.
Par contre, les ophtalmologistes ne s’entendent pas encore sur le sujet ;

• C’est tendance actuellement

Oui, c’est vrai. Plusieurs personnes l’activent simplement parce que c’est nouveau et ils veulent l’essayer ;

• C’est confortable

Certains usagers trouvent plus confortable de lire sur des écrans sombres, spécialement lorsqu’il fait nuit ;

• Cela économise votre batterie

Google a confirmé que le mode sombre peut étendre la durée de la batterie jusqu’à 50 %. Par contre, cela n’est vrai que pour les écrans OLED.
Wired a dit que le mode sombre n’a aucun impact sur la durée de charge de la batterie pour les écrans LCD, qui sont largement utilisés par Apple. En passant, Apple a promis de remplacer tous ses écrans LCD pour des écrans OLED.

Liste des clients e-mail qui supportent le mode sombre et comment vos e-mails s’affichent dans ceux-ci

Le mode sombre commence à être populaire. Seules les dernières versions des systèmes d’opération le supportent et affichent les e-mails correctement.

• Application Gmail sur Android (Android 10)

Elle convertit les couleurs pleinement : non seulement pour l’interface, mais les e-mails sont aussi affichés en mode sombre.

Nous avons testé une variété d’e-mails. Un d’eux avait initialement un fond sombre et une barre/rangée blanche avec un menu. 

Android 10 n’a pas inversé les couleurs sombres en claires, mais a changé la rangée claire en sombre.

(e-mail sur Android 10, mode sombre)

Important de noter :

Comme nous l’avons dit, seule la dernière version d’Android — Android 10 — affiche les e-mails en mode sombre. Mais il y a d’autres conditions obligatoires auxquelles porter attention si vous voulez voir vos e-mails en mode sombre d’Android. Ces conditions sont :

1. Votre application Gmail doit être téléchargée depuis le PlayStore de Google, pas l’application par défaut sur votre téléphone. Les téléphones Samsung l’ont parfois.

2. Vous devez avoir la plus récente version de l’application Gmail, mise à jour en novembre 2019 minimum. 

• Application Gmail sur iOS (iOS 13)

Que fait l’application Gmail sur iOS ?

Mon e-mail était originellement sombre avec une rangée du menu claire, iOS a converti les couleurs sombres en claires et les couleurs claires en sombres.

Important de noter :

Gmail est encore en déploiement du mode sombre pour les e-mails sur iOS. C’est supposé être pleinement visible et disponible pour tous les usagers dans 2 semaines environ. Mais le même processus a pris pour Android deux mois au lieu de deux semaines. Nous devons simplement être patients.

• L’app Mail native du iPhone (Mail sur iOS)

L’application vous permet de passer su mode sombre pour l’interface et l’espace pour e-mails. Si vous avez défini un arrière-plan transparent, alors l’application Mail du iPhone le rendra sombre.

Sinon, vos e-mails apparaîtront identiques en modes sombre ou clair. 

 

• Apple Mail sur macOS 

Même situation ici. L’application permet de placer l’interface en mode sombre, mais n’impacte pas l’affichage de vos e-mails HTML dans le mode sombre.

 

• Gmail sur macOS et Windows

Elle n’invertit pas les couleurs, ou le fait partiellement – selon comment vous voulez l’appeler.

L’application vous permet d’activer le mode sombre pour l’interface, mais l’espace pour l’e-mail demeure clair — donc, il n’affecte pas l’affichage du e-mail. Vos e-mails s’afficheront de façon identique en mode sombre et en mode clair.

• App Outlook (2019) sur Android 

Il est réputé inverser les couleurs partiellement. Mais je dois avouer que je ne l’ai pas testé, car je n’ai pas Outlook 2019 sur mon smartphone.

• App Outlook (2019) sur iOS

Il est réputé inverser les couleurs partiellement. Mais je dois avouer que je ne l’ai pas testé, car je n’ai pas Outlook 2019 sur iPhone.

• Outlook 2019 sur macOS

Les couleurs sont complètement inversées. Il fait tout comme Android 10 – garde le design sombre tel qu’il est et convertit un arrière-plan clair en sombre.

• Outlook.com

La situation avec Outlook.com est très intéressante.
Il est sensé inverser les couleurs partiellement, mais, lorsque j’ai envoyé un e-mail avec un design sombre, Outlook.com a converti vers des couleurs claires lorsqu’en mode sombre. Et lorsque j’envoie un e-mail avec un design de couleurs claires, Outlook.com convertit les couleurs en sombres.

Faits intéressants à propos du mode sombre de Outlook.com :

1. Outlook.com ne change pas du tout le design des e-mails AMP.

Si vous avez défini un fond blanc — c’est ce que vos usagers vont voir dans ce client e-mail, même si le mode sombre a été activé.

2. Outlook.com vous permet de voir l’e-mail en mode clair ou sombre, sans changer la couleur de l’interface.

Pour passer du mode clair au mode sombre, ou vice-versa, vous n’avez qu’à cliquer ce bouton :

3. Outlook n’invertit pas les couleurs des bordures.

Trucs pour optimiser les e-mails pour le mode sombre

N’essayez pas de hacker le mode sombre pour que vos e-mails s’affichent comme ils le font sur les modes réguliers. Parce que si les gens utilisent ce mode, ils le font pour une raison et nous devons respecter cela.

Alors, pour optimiser vos modèles d’e-mails pour le mode sombre, vous devriez :

1. Travaillez vos images

a) utilisez des images avec des fonds transparents ou assurez-vous que les fonds sont des mêmes dimensions pour éviter ceci :

N’êtes-vous pas d’accord que ceci n’est pas le meilleur exemple d’un e-mail à thème sombre, car les images avec un fond blanc de différentes tailles ruinent l’impression générale ?

b) Soyez prudents avec les images transparentes

Vous êtes censés utiliser des images avec fond transparent pour les cartes de produit.

Par contre, les photos de personnes seront meilleures avec un fond défini.

2. Travaillez sur les logos

a) que vos logos n’aient aucun arrière-plan

b) Que vos logos ne soient pas écrits en noir pour bien s’afficher sur les modes clair et sombre.

Certains codeurs suggèrent que vous utilisiez deux logos et même fournissiez un code spécifique pour assurer que le logo noir s’affiche dans le mode clair et le logo blanc dans le mode sombre.

Nous avons testé — le code n’a pas aidé, mais a rendu notre e-mail beaucoup plus lourd.

c) Appliquez des ombres claires aux logos noirs

Si votre logo doit être écrit en noir, ajoutez-y une ombre claire. Il sera beau tout en respectant votre marque. 

3. Définissez des couleurs de fond pour les conteneurs du e-mail

Si vous ne voulez pas que votre contenu d’e-mail ait un fond sombre, vous pouvez le personnaliser avec Stripo.

La couleur que vous définissez comme « Couleur de fond du conteneur » demeurera intacte dans le mode sombre.

Définissez la couleur « transparent » pour la bande alors — dans ce cas, la couleur de fond sera appliquée au contenu du e-mail, mais pas à la totalité de l’espace du e-mail.

Assurez-vous d’utiliser le même thème de couleurs pour toutes les rangées. 

4. Testez vos e-mails

Toujours tester vos e-mails HTML dans les deux modes : clair et sombre.

5. N’ajoutez pas de code supplémentaire

Malgré certaines recommandations d’ajouter du code spécial à vos modèles pour les modes sombres qui est censé permettre à vos e-mails de bien s’afficher dans le mode sombre, ces exemples de code ne résolvent pas le problème encore, du moins selon de nombreux tests effectués.

Par ailleurs, les modèles d’e-mails fonctionnent plutôt bien dans la majorité des clients e-mail.

Donc, ce n’est pas si compliqué d’optimiser vos designs d’e-mails pour le mode sombre — vous devez simplement travailler sur l’apparence de votre e-mail. Pas besoin de travailler avec du code spécial pour le moment.

Comment est-ce que le mode sombre impacte les e-mails en mode texte ?

Les e-mails personnels en mode sombre sont dits être affichés correctement dans tous les clients qui supportent cette nouvelle fonction.

Mais est-ce vrai ? Vérifions :

1. Gmail sur ordinateur de bureau n’inverse pas nos e-mails du tout. Donc, nous ne devrions pas nous inquiéter à ce sujet.

2. Gmail sur iOS et Android affiche du texte clair sur un fond sombre

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

4. Les applications natives pour iPhone, et Apple Mail inversent les couleurs de fond de claires à sombres, et les couleurs du texte de sombres à claires lorsqu’il s’agit d’e-mails personnels en mode sombre.

Par contre, il y a quelques détails à propos des e-mails en mode texte dans les applications pour iPhone et Apple Mail qui valent la peine d’être mentionnées :

• Elles n’inversent les couleurs que si c’est le premier (ou le seul) message dans un échange. Parfois, le deuxième e-mail (et les suivants) auront un fond blanc et un texte sombre ;

• Même s’il s’agit du premier message dans un échange, mais qu’il contient une image, votre e-mail personnel pourrait être blanc, même en mode sombre. Votre logo de compagnie inclus dans votre signature est également considéré comme une image ;

• Les e-mails personnels qui vous ont été transférés peuvent aussi avoir un fond blanc.

Mot de la fin

Bien sûr, considérant que seulement une petite partie des usagers peut utiliser le mode sombre, nous pourrions être tentés de nous demander si cela vaut la peine de s’en soucier. Oui ! Premièrement, les gens l’utilisent pour une raison. Nous devons respecter cela et adapter nos designs pour le mode sombre.

Deuxièmement, la popularité de cette fonction est en croissance et, bientôt, un plus grand nombre de nos abonnés activeront ce mode.