UX & créa
22 février 2020
13minutes

Emailing et dark mode | Comment gérer le nouveau mode sombre dans ses emailings et newsletter

 

dark mode newsletter header

 

Connaissez-vous le « dark mode » ? Cette tendance, qui existait depuis quelques années à un niveau applicatif, s’est généralisée depuis l’été 2019. Notamment avec l’arrivée de systèmes d’exploitations comme Android 10, iOS13 et macOS Mojave.

De plus en plus de plateformes telles que Google Chrome, Gmail, Youtube, Instagram proposent désormais une interface « Dark Mode ». Pourtant tout est loin d’être bien calé ! Vous l’avez peut être constaté sur les emailing et newsletters que vous envoyez, le rendu est différent du « mode jour » classique. Ce qui peut rendre désagréable la lecture de vos envois… et désengager vos clients. S’assurer que vos emails sont agréables à regarder malgré ce « Dark Mode » est donc le nouveau challenge de tout webmarketeur. Dans cet article, nous vous proposons des solutions concrètes afin de gérer au mieux cette nouvelle tendance.

 

 

Sommaire

Le Dark Mode, c’est quoi ?

Résumé du problème des newsletters

Des exemples qui piquent les yeux

Les recommandations d’experts

La méthode Eficiens

Analyse clients au cas par cas

Analyse webmail au cas par cas

FAQ

 

Le Dark Mode c’est quoi ? Et pourquoi est-ce un problème !

Le « Dark Mode », ou « Mode Sombre » en français, est un schéma qui vous propose une interface plus sombre, noire sur l’ensemble de votre smartphone ou ordinateur. Ne le confondez pas avec le « thème sombre » qui correspond à l’habillage d’une application seule et dont nous ne traiterons pas ici. Le mode sombre transmet l’information de votre appareil à l’ensemble du contenu (application, page web ou e-mail) qui peut en tenir compte.

Il faut donc gérer une sorte de  collision entre l’OS <> L’application <> Le moteur de rendu de l’email

 

Phénomène de mode ou réel confort visuel, cet affichage, est de plus en plus répandu chez les utilisateurs, et ce n’est pas par hasard. Il cumule un certain nombre d’avantages qui lui font la préférence face au « light mode » classique :

1️⃣ Il permet de réduire la fatigue visuelle. L’écran blanc de vos écrans est composé en partie de la lumière bleue, nocive pour les yeux. Le noir, n’en contient pas ! Le mode sombre permet donc d’atténuer les effets de cette lumière bleue.

2️⃣ Il s’adapte parfaitement aux environnements moins éclairés et la source lumineuse de votre appareil gène moins votre entourage.

3️⃣ Il consomme moins d’énergie. Des tests effectués sur iOS avec écran OLED indiquent une économie de 30% sur la batterie, ce qui prolonge la durée de vie de celle-ci (un petit geste pour la planète qui est à considérer !).

4️⃣ Il optimise l’ergonomie. Certaines couleurs ressortent mieux et donc améliorent la lisibilité. Il est plus facile de lire un texte blanc sur fond noir que l’inverse.

5️⃣ Le noir, c’est classe ! Beaucoup d’utilisateurs ont tout simplement plus d’affinités visuelles avec des interfaces plus sombres.

 

Résumé / Points d’attention

Si ce système est largement répandu aujourd’hui, il n’est pas infaillible pour autant. Et c’est là le cœur de votre problème ! Bien supporté ou totalement ignoré, de nombreux cas posent problème. Tout d’abord sur iOS, depuis iOS 13 en septembre dernier. Ensuite, l’application Gmail pour iOS ou Android crée sa propre version sombre du contenu de l’email sans tenir compte de la CSS. L’application Outlook en fait de même si la version sombre n’a pas été prévue lors de l’intégration. Le Webmail Outlook.com obtient également un mauvais rendu si le mode sombre est défini au niveau du webmail et pas au niveau de l’OS.

La gestion du « dark mode » est encore inégale, pas complètement sûre et surtout, elle impacte l’esthétisme et l’ergonomie de vos emailing et newsletters. Pourtant, il faut prendre le problème à bras le corps et ne pas se laisser dépasser !

 

Des exemples qui piquent les yeux

 

Screencast de newsletters en mode « light », soit sans filtre sombre.

 

Screencast de newsletters en « dark mode » iOS 13 – Iphone 11 – APP mail native + gmail iOS

 

Screencast de newsletters en « dark mode »  sur Android 10 – Huawai P30 – APP Gmail native.

 

Les recommandations techniques de Litmus et de notre expert HTML email

Litmus est une solution de testing de rendus emails cross-plateforme virtualisée. Litmus a écrit un article fort complet sur le sujet. Voici le résumé :

 

Les clients emails supportant le Dark Mode (Janvier 2020)

  • Sur mobile : l’App GMail (iOS et Android) – Client Mail iPhone natif – Outlook App (iOS et Android)
  • Sur PC / Mac : Apple Mail – Outlook 2019 (PC/Mac)

 

Les comportements détectés en fonction du client mail

  • Pas de changement de couleurs – Apple Mail sur iOS par exemple – pas de changement (sauf les emails plain-text)
  • Inversion de couleur partielle – client Outlook
  • Inversion de couleur totale – Gmail App (iOS et Android) et Outlook 2019 (Windows). C’est le pire rendu. Vos emails deviennent illisibles.

 

impact dark mode par client email

Aller plus loin et appliquer ses propres CSS pour forcer le Dark Mode. Il y a 2 méthodes et balises à utiliser :

 

@media (prefers-color-scheme: dark)

Cette méthode va appliquer un bloc de style à l’intérieur de la @media query pour votre vue mobile responsive (mais uniquement les utilisateurs qui ont leur interface en mode dark)

[data-ogsc] and/or [data-ogsb]

Cette méthode (inventée par Mark Ronnis) cible l’app Outlook. On duplique le style @media (prefers-color-scheme: dark) et on ajouter simplement le prefixe approprié [data-ogsc] and/or [data-ogsb] à chaque règle CSS.

 

Note complémentaire de notre intégrateur : les CSS qui définissent les @media queries ne sont interprétées qu’après que l’utilisateur ait accepté de charger le contenu distant (images). Sinon, le contenu de l’e-mail est affiché en “mode clair”.

Remplacement des couleurs par l'app Gmail en fonction de la luminosité et de la saturation

Remplacement des couleurs par l’app Gmail en fonction de la luminosité et de la saturation. Test en niveau de gris et avec des couleurs saturées à 100%. Pour cache test, le mail est afficher en « light mode » puis en « dark mode ».

 

L’article complet de Litmus : https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers

 

Les recommandations Eficiens – la méthode à suivre pas à pas

Réussir à gérer le mode sombre dans vos emailing et newsletters est votre nouveau défi. Et la tâche est loin d’être simple. Ce n’est pas parce que plusieurs utilisateurs ont fait le choix du mode sombre qu’il faut tous les traiter de la même façon.

Posez-vous les bonnes questions ! Ne vous précipitez pas à tout refaire.

 

La première étape est de connaître son audience

Dans un premier temps, analysez votre audience. Qui lit vos e-mailing ? Quel sont leurs taux d’ouverture ? Et surtout, cherchez à savoir à quelle heure vos clients les lisent, s’ils utilisent le mode sombre et avec quels appareils.

 

Dark mode client usage

Exemple de reporting sur l’usage des clients mail – Outil de routage Campaign Monitor

 

Autre solution, si cela est possible, posez directement la question (lors d’une inscription à une newsletter ou par le biais d’un petit questionnaire sur vos réseaux sociaux, par email, …). Et, vous pouvez toujours vous aider de l’analyse de l’audience sur votre site web. Certes, cela ne sera pas forcément le reflet de votre audience mail mais cela peut donner une indication. L’outil Google Tag Manager peut vous aider à tracker le mode enregistré par vos clients. Pour récupérer cette information, l’intégration d’un code Javascript personnalisé est nécessaire.

Puisqu’il s’agit d’un réglage que votre client choisi d’utiliser ou non, il faut prendre en compte les choix de votre audience.

L’email de votre client qui utilise le mode sombre peut gérer votre code de façon différente. Il n’y a aucune solution définie et universelle à ce problème. Mais ne baissez pas les bras, les mises à jours sont régulières avec une interprétation différente selon les applications. Dans tous les cas, il faut prévoir plus de testing sans être fiable à 100%.

 

Pour aller plus loin et adopter une approche pragmatique

 

  • SOLUTION 1 : gérer les e-mails parfaitement en mode sombre. Cela implique de prévoir le cas des e-mails sombres dans une charte graphique web. Dans les faits, cela veut dire d’adopter un gabarit minimaliste et de faire des emails quasiment full-texte. Avoir un template minimaliste et épuré sans images. Les choses simples ne sont pas forcément signe de manque de travail, bien au contraire !

 

  • SOLUTION 2 : opter pour des emails les plus adaptés à votre audience. On restera alors sur un template mêlant image et texte. Mais on optimisera pour le mode sombre sur le client mail et la plateforme réellement utilisés. Il faut donc créer un nouveau gabarit qui évitera par exemple les images de fond clair. Il faudra probablement revoir les intégrations en injectant un module CSS permettant « d’interroger » l’interface utilisateur pour adapter le contenu aux caractéristiques de l’appareil utilisé. Il faut être conscient qu’il peut y avoir des failles et que vous êtes à la merci d’une mise à jour OS / App / Moteur de rendu email.

    Exemple : si l’analyse de vos statistiques d’audience email ont montré que sur le mobile 60% consultaient via iPhone et 40% sur Android, vous optimiserez uniquement pour iPhone. Pourquoi ? Car la version 10 d’Android (qui gère le dark mode) représente probablement moins de 1% de vos lecteurs Android, c’est à dire, rien (voir plus bas) !

 

  • SOLUTION 3 : ne rien faire ! Accepter que le rendu peut-être variable et donc parfois dégrader la qualité des e-mails. C’est évidemment la solution la moins coûteuse mais aussi la moins satisfaisante en terme d’expérience utilisateur.

 

Android et le mode sombre. Laissez tomber !

L’analyse des parts de marché montre qu’Android 10 introduit officiellement à l’automne 2019 n’est encore quasiment pas diffusé. Hormis les quelques terminaux Android Google (les Pixel), le reste de l’industrie suit très lentement la migration vers Android 10. Même les terminaux grands publics Huawei et Honor souvent rapides dans la mise à jour n’ont pas encore vraiment migré. A ce jour, seuls les très modernes P30 et M20 ont migré sous Android 10. Et encore, nos tests ont montré que le mode sombre pouvait avoir été activé dans que le client GMail reçoive la mise à jour.

 

market share android et client mail

 

L’effort de supporter le mode sombre sur Android 10 par rapport à votre base réelle de lecteurs sous cet OS est donc déraisonnable. Reportez plutôt le support complet à 2021. Entre temps, vous aurez probablement changé de template.

 

Le cas par cas – les clients mail analysés

Clients e-mail – applications

Outlook (Windows 10)

Thème sombre : oui si défini dans l’application (pas de prise en compte du réglage OS)

Mode sombre : non

Outlook (iOS 13, Android 10)

Thème sombre : oui si défini dans l’OS

Mode sombre : oui si défini dans l’OS. ATTENTION : Si lors de l’intégration de l’e-mail, le mode sombre n’a pas été anticipé avec les @media queries adaptées, l’app modifie elle même la CSS pour assombrir le contenu.

Mail (OSX 10.15, iOS 13)

Thème sombre : oui si défini dans l’OS

Mode sombre : oui si défini dans l’OS

Gmail (Android 10)

Thème sombre : oui si défini dans l’OS

Mode sombre : oui si défini dans l’OS. ATTENTION : l’app modifie elle-même la CSS des emails sans tenir compte des @media queries qui aurait été définies lors de l’intégration

Gmail (iOS 13)

Thème sombre : oui

Mode sombre : non

BlueMail (Android 10)

Thème sombre : oui si défini dans l’application (pas de prise en compte du réglage OS)

Mode sombre : oui si défini dans l’application (pas de prise en compte du réglage OS). ATTENTION : l’app modifie elle-même la CSS des emails sans tenir compte des @media queries qui aurait été définies lors de l’intégration

 

Le cas par cas – les webmails analysés

Outlook.com (Windows 10, OSX 10.15)

Thème sombre : oui si défini dans l’application OU au niveau de l’OS

Mode sombre : oui. ATTENTION : si le mode sombre est défini au niveau du webmail, le rendu des e-mails n’est pas conforme à l’intégration. Si le mode sombre est défini au niveau de l’OS, le rendu est conforme à l’intégration.

Gmail (Windows 10, OSX 10.15)

Thème sombre : oui si défini dans l’application (pas de prise en compte du réglage OS)

Mode sombre : non

Yahoo (Windows 10, OSX 10.15)

Thème sombre : non

Mode sombre : non

Zimbra (Windows 10, OSX 10.15)

Thème sombre : non

Mode sombre : oui si défini dans l’OS

Roundcube (Windows 10, OSX 10.15)

Thème sombre : non

Mode sombre : oui si défini dans l’OS.

 

 

Questions / réponses

Comment passer ses emails en dark mode / mode sombre ?

Malheureusement, il n’y pas de solution universelle et/ou infaillible. Le support du mode sombre est fonction de trois paramètres : l’OS, l’applicatif (client mail, navigateur) et le codage de l’email proprement dit. Il faut donc travailler sur ces 3 éléments en fonction de l’audience de votre newsletter / emailing.

Quel smartphone supporte le mieux le mode sombre ?

Là aussi pas de « meilleur » ou « moins bon ». iOS et l’iPhone ont tendance à laisser le contenu de l’email en mode clair. Mais si vous utilisez Outlook ou Gmail sur iPhone, le rendu sera en mode sombre. Pas facile de s’y retrouver !

Je cherche une solution vraiment universelle sans y passer trop de temps. Que faire ?

Dans ce cas, il vous faut des emails plain-texte (pas d’image, pas de mise en page sophistiquée). Juste du texte. Et le mode sombre sera impeccable.

A-t-on une idée du nombre d’utilisateurs du mode sombre ?

Très difficile à dire car la tendance est récente. iOS 13 est installé sur 65% des devices iOS (qu’Apple estime à plus d’un milliard). Mais tous ne sont pas compatibles iOS 13 et tous les utilisateurs n’apprécient pas ce mode. Une fourchette large donne probablement entre 50 et 200 millions de personnes qui utilisent le mode sombre. C’est donc conséquent.

Pouvez-vous m’aider à migrer mes emails pour un support du mode sombre ?

C’est possible, rendez-vous sur notre page contact plus bas.

 

 

Article co-écrit avec la participation de : Céline Goulet / Sarada Nourby / Déborha Mathieu / Bruno Chériaux – Eficiens

 

Vous avez aimé ? Notez-nous !