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

Publié le : 5 décembre 2019 par Thomas Leroy

Impossible d’y échapper : les modes « sombres » se généralisent dans les applications… y compris celles dans lesquels vos destinataires vous lisent. Selon les configurations, comment le dark mode 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.

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 : 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é :

  • une consultation plus agréable lorsque la luminosité est faible (l’écran « éblouit » moins) ;
  • une batterie moins sollicitée, donc plus endurante (un fait confirmé à la fois par Google et par Apple) ;
  • une moindre fatigue visuelle (encore que ce point reste à démontrer scientifiquement).

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.

Rendus de mode sombre dans les différents systèmes d'exploitation d'Apple
Apple a beaucoup mis en avant le mode sombre de ses nouveaux OS desktop et mobile

L’email aussi est impacté

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 :

  • le noir devient blanc
  • le gris foncé devient gris clair
  • et un lien bleu passera à l’orange

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.
Dark mode dans l'email : comportement dans Gmail

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…
Dark mode dans l'email : comportement dans Outlook en inversant les couleurs

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.

Dark mode dans l'email : comportement déviant dans d'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 campagnes 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 :

  • le fermer
  • l’effacer
  • quitter sa boîte de réception

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 de façon à ce qu’elles soient bien lisibles en mode clair comme en mode sombre. Pour cela, quelques petites astuces :

  • passez un maximum de visuels en fonds transparents (au format .PNG), pour éviter les « placards » blancs lorsque le fond est sombre
  • évitez les visuels avec des aplats noirs ou sombre
  • si votre logo (comme c’est souvent le cas) est basé sur une police de caractère sombre, entourez-le d’un liseré clair (de la couleur de votre arrière-plan en mode clair) pour qu’il se détache correctement en dark mode

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.

Un exemple d'email designé avec le dark mode en tête, par Adobe

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.

  • Il est en mode clair ? Votre email doit lui aussi comporter un fond clair et des polices et autres éléments sombres.
  • Il est en dark mode ? Votre email doit alors passer (sans dommage) sur un fond sombre et des polices qui contrastent suffisamment.

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 !

Aucun commentaire pour l'instant

Quelque chose à dire ?

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

(Very) good news !

Le meilleur de l'actualité email marketing rédigée

(ou dénichée) par nos experts dans votre boîte mail.