Site icon Dartagnan l Le blog

Dark Mode Email : quels impacts sur vos campagnes (et comment y remédier) ?

Impossible d’y échapper : les modes « sombres » se généralisent dans les applications… y compris celles dans lesquelles vos destinataires vous lisent. Selon les configurations, comment le dark mode en email modifie le rendu de vos campagnes ? Et comment faire pour qu’elles restent impeccables dans tous les cas de figure ?

Nos écrans broient (de plus en plus) du noir. Applications (Twitter, Google Maps, Slack, Instagram), navigateurs (Chrome, Firefox) et systèmes d’exploitation (Android 10, iOS13 et macOS depuis Mojave)… Une bonne partie des environnements numériques que nous utilisons au quotidien se sont en effet mis au « dark mode »… y compris les principaux clients email et webmails. Voici ce que vous devez savoir pour adapter la charte graphique de vos campagnes email à cette nouvelle donne.

Dark mode en email : si vous n’avez pas le temps de tout lire (ou venez vérifier les derniers changements)

Informations mises à jour le : 1er juillet 2020

Dark Mode Email : 3 comportements possibles

Lorsque votre destinataire a activé le mode sombre, comment réagissent vos emails ? Nos tests nous ont permis de dégager 3 grands types de comportements :

Stable

(très fréquent)

🔵 L’arrière-plan : pas d’impact

🔵 Le texte : pas d’impact

🔵 Les images : pas d’impact

Sombre

(assez fréquent)

🔴 L’arrière-plan : passe en négatif*

🔴 Le texte : passe en négatif

🔵 Les images : pas d’impact

Déviant

(très rare)

🔴 L’arrière-plan : passe en négatif

🔴 Le texte : passe en négatif

🔴 Les images : passent en négatif

* En négatif, un fond clair deviendra sombre et un texte sombre clair, par exemple.

Pour en savoir plus sur les comportements observés dans les emails, cliquez ici

Dark mode : le comportement des emails dans les principaux environnements de lecture

Les emails en mode sombre sur mobiles

Environnement (OS) Application Activation du dark mode Comportement de l’email
Apple (iOS 12 ou inférieur) Native Apple Sur le mobile Déviant
Apple (iOS 12 ou inférieur) Gmail Sur le mobile Déviant
Apple (iOS 12 ou inférieur) Outlook Sur le mobile Déviant
Apple (iOS 13) Native Apple Sur le mobile Stable
Apple (iOS 13) Gmail Sur le mobile Stable
Apple (iOS 13) Gmail Dans l’app Sombre
Apple (iOS 13) Orange Sur le mobile Stable
Apple (iOS 13) Outlook Sur le mobile Stable
Apple (iOS 13) Outlook Dans l’app Sombre
Apple (iOS 13) Yahoo! Sur le mobile Stable
Android Native Samsung Sur le mobile ET/OU dans l’app Stable
Android Gmail Sur le mobile Stable
Android Gmail Dans l’app Sombre
Android Orange Sur le mobile Stable
Android Outlook Sur le mobile Stable
Android Outlook Dans l’app Sombre

Les emails en mode sombre sur ordinateurs

Environnement (OS) Client ou webmail Activation du dark mode Comportement de l’email
Mac [Client] Apple Mail Sur l’ordinateur ET/OU dans l’application Stable
PC/Mac [Webmail] Gmail Sur l’ordinateur ET/OU dans l’application Stable
PC/Mac [Webmail] Laposte.net Sur l’ordinateur ET/OU dans l’application Stable
PC/Mac [Webmail] Orange Sur l’ordinateur ET/OU dans l’application Stable
PC/Mac [Client] Outlook Sur l’ordinateur OU dans l’application Stable
PC/Mac [Client] Outlook Sur l’ordinateur ET dans l’application Sombre
PC/Mac [Webmail] Outlook.com Sur l’ordinateur ET/OU dans l’application Stable
PC/Mac [Webmail] Yahoo! Sur l’ordinateur ET/OU dans l’application Stable

À l’heure actuelle, c’est donc dans Outlook 2019 (client mail ordinateur) et Gmail (application mobile iOS ou Android), que le code et donc le rendu de vos campagnes sera vraiment altéré si l’utilisateur a activé le mode sombre dans l’application. Les comportements « déviants » s’observent sur d’anciens OS (et semblent être corrigés petit à petit). Le dark mode est obtenu sur ces OS lorsque l’utilisateur demande un rendu négatif, et s’attend donc à un rendu différent…

Dans cet article, des informations pour aller plus loin

Dark mode : de quoi s’agit-il (et pourquoi l’email est impacté) ?

Email en mode sombre : les différents cas de figure

Comment adapter vos campagnes au dark mode

Sommaire
Dark mode : de quoi s’agit-il (et pourquoi l’email est impacté) ?
Email en mode sombre : les différents cas de figure
Comment adapter vos campagnes au dark mode

Dark mode email : de quoi parle-t-on ?

Toutes les applications disposant d’un dark mode laissent en fait à leur utilisateur la possibilité de choisir en un mode « clair » (light, avec typo sombre sur fond blanc) et un mode « sombre » (fond foncé, typo claire). Avec pas mal d’avantages à la clé :

Les interfaces en dark mode, un choix autrefois cantonné aux purs « geeks », se popularisent donc rapidement : en à peine un mois, 50% des utilisateurs d’iPhone avaient ainsi basculé vers iOS13, un OS dans lequel la firme à la pomme « pousse » fortement à l’adoption de ce mode sombre.

Apple a beaucoup mis en avant le mode sombre de ses nouveaux OS desktop et mobile

L’email aussi est impacté par le dark mode

L’impact sur l’email marketing ? Il n’est pas à négliger. D’abord parce qu’avec 6 emails sur 10 consultés sur mobile, le fait que les deux systèmes d’exploitation les plus répandus disposent d’un dark mode rend la question incontournable.

Mais aussi parce que les environnements de lecture eux-mêmes (clients mail et webmails) proposent de plus en plus souvent des modes sombres. C’est le cas d’Outlook depuis cet été sur mobile, macOS et Office.com, Gmail a suivi peu après (sur Android, iOS et en webmail via Chrome). Nul doute que cette option va peu à peu se généraliser à la plupart des grands environnements de lecture de vos campagnes…

La question n’est donc plus de savoir si vous devez réfléchir à vos futurs emails en prenant en compte leur lecture en mode sombre. Mais comment.

Email + dark mode : c’est compliqué…

En théorie, l’impact du dark mode sur un contenu est assez simple : le fond d’écran va passer du clair (blanc ou approchant) au sombre (noir, gris foncé). Et les polices vont emprunter le chemin inverse. Notre hypothèse, c’est que le dark mode « inverse » les couleurs de chacun de ces éléments sur la roue chromatique :

Mais, comme toujours, l’email constitue un environnement un peu plus compliqué que le web… Nos divers tests dans les environnements mobiles et desktop nous ont permis de dégager trois cas de figure.

1. Premier cas de figure : le comportement « stable »

L’environnement de lecture passe en mode sombre (le menu, la sidebar, l’aperçu de la boîte de réception), mais l’email lui-même ne « bouge » pas. C’est le cas le plus répandu dans nos tests.

2. Deuxième cas de figure : le comportement « sombre »

Ici, l’email s’adapte au dark mode, son background passe au sombre, les polices et quelques autres styles CSS (comme les filets) deviennent clairs. Un comportement qu’on a surtout observé dans un premier temps sur l’application Outlook sous iOS13, mais aussi sur Outlook 365 Mac, si le destinataire a activé l’option « Changer d’arrière-plan ». Plus récemment (mai 2020), l’application Gmail (sur iOS13 et Samsung) a adopté le même comportement : les choses bougent donc assez vite, et il faut donc tester vos emails régulièrement…

3. Troisième cas de figure : le comportement « déviant »

Là, le rendu d’une campagne devient assez… spécial :

  • l’arrière-plan devient sombre
  • les polices et filets deviennent clairs
  • et les images… passent en négatif

On se doute que vous n’avez pas très envie que vos campagnes s’affichent ainsi. Heureusement, le cas est vraiment peu fréquent. Nous l’avons observé :

  • sur iPhone sous iOS 12
  • sur l’application native et l’application Gmail du Galaxy S8

Et ce, seulement en activant un mode « inverser les couleurs », qui était une sorte d’émulateur de mode sombre sur ces anciens OS.

En résumé : l’impact du dark mode dans les principaux environnements de lecture

Mobile

OS

iPhone

iOS12 et inférieurs

iPhone

iOS13

Samsung

Android

Application Gmail Déviant Sombre Sombre
Application native Déviant Stable Déviant
Desktop Outlook Outlook

Fond sombre activé

Gmail

Chrome

MAC Stable Sombre Stable
PC Stable Sombre Stable

Comment adapter vos emails au dark mode ?

Maintenant que vous avez en tête les possibles changements que le mode sombre va entraîner dans vos emails, reste donc la question la plus importante : comment vous y adapter ? Et comment faire en sorte que l’expérience de vos destinataires soit toujours optimale ?

Pour répondre à cette question, il existe trois réponses possibles.

1. Si vous souhaitez que vos campagnes ne « bougent » pas avec le dark mode

C’est la première attitude possible : vous désirez que vos emails s’affichent tels que vous les avez conçues, sans aucune modification. La parade ? Elle est (sur le papier) assez simple : il va s’agir de « forcer » un fond clair en répétant en arrière-plan un pixel blanc sur toute la « surface » du message.

Si vous utilisez Dartagnan, ce sera réalisable très simplement en utilisant un texture. Si vous n’utilisez pas (pas encore…) notre email builder, vous allez devoir coder un peu de CSS.

 

À gauche, une campagne avec une texture de fond blanche créée sous Dartagnan. A droite, la même telle qu’elle s’affiche avec le dark mode d’Outlook.

Dans un cas comme dans l’autre, vous voici donc avec un email « stable », qui ne sera pas dégradé en cas de lecture dans un mode sombre. Bien, mais est-ce la meilleure solution ?

Après tout, si votre destinataire opte pour un mode sombre, aller contre ce choix peut se révéler contre-productif : votre email « lumineux » risque de l’agresser. Et il va sans doute :

Dans tous les cas, l’objectif n’est pas atteint, et votre communication ne passe pas.

2. Vous souhaitez concevoir des emails qui « passent » malgré le dark mode

Une meilleure approche consiste à concevoir vos campagnes email de façon à ce qu’elles soient bien lisibles en mode clair comme en mode sombre. Pour cela, quelques petites astuces :

Autre possibilité, mais il faut que votre charte graphique le permette : concevoir vos campagnes « nativement » en mode sombre. C’est ce que fait Adobe Creative Cloud par exemple… mais il est vrai que ce traitement est parfaitement cohérent avec une marque et des logiciels (Photoshop, InDesign, Illustrator…) qui sont d’office en dark mode.

3. Vous souhaitez des emails qui s’adaptent au mode de consultation

Le « vrai » responsive (celui que Dartagnan applique à vos emails) consiste à optimiser la disposition d’un email en fonction de l’environnement de lecture (en choisissant d’afficher ou non des élements, en les disposant en ligne ou en colonne selon l’écran…) pour une expérience parfaite du destinataire.

Le « vrai » email dark mode consiste de même à afficher une campagne dans l’état le plus adapté au mode choisi par le destinataire.

De la science-fiction ? Même pas ! Car il existe une media query (un module CSS3 qui adapte le contenu d’une page web aux caractéristiques de l’appareil de l’utilisateur) permettant « d’interroger » l’interface de l’utilisateur. Et donc de savoir s’il est en mode sombre ou non.

La syntaxe de cette media query ?

@media (prefers-color-scheme: dark) {
/* Vos styles CSS applicables en dark mode */
}

Voici ce que cela peut donner avec un exemple (très rudimentaire) de CSS et d’HTML :

See the Pen
CSS email – Dark mode
by Adrien Guilleminot (@aguilleminot)
on CodePen.

Si vous souhaitez vous pencher plus longuement sur les possibilités qu’offre le CSS en dark mode, nous vous conseillons la lecture de cet excellent article de CSS Tricks (en anglais).

Alors : prêts à concevoir des campagnes aussi belles de jour que de nuit ?

Des campagnes impeccables quel que soit le contexte ?

Avec Dartagnan, vous adaptez simplement vos emails à la lecture en dark mode… Mais pas seulement. Un « vrai » responsive, une conception simple et conforme à votre identité de marque, un code HTML optimal.
Découvrez tout ce que notre email builder peut faire pour vous !

Quitter la version mobile