Le Dark Mode

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

Allez encore une nouvelle tendance qui débarque ! Décryptage by Badsender.
Bon c’est quoi le “Dark mode” ? Un Jedi qui passe du côté obscur de la Force ?
Hé bien presque !
Aujourd’hui de nombreuses applications ont dans leurs paramètres le Dark Mode (au niveau des “Thèmes” le plus souvent).
En effet le Dark Mode ne s’applique d’ailleurs pas exclusivement à l’email. C’est bien une tendance digitale et celle-ci s’annonce durable.
Le Dark Mode ne sera pas qu’un effet de mode.


Mais c’est quoi le Dark mode ?

On inverse simplement les couleurs ! Habituellement on écrit en noir sur fond blanc. Dark mode = on écrit en blanc sur fond noir.

La définition d’Emailonacid : Le mode sombre est un paramètre d’accessibilité qui décale la palette de couleurs de l’interface pour afficher le contenu en contraste élevé en utilisant des couleurs d’arrière-plan sombres et un premier plan clair. En fin de compte, il minimise la lumière bleue et améliore la lisibilité pour réduire la fatigue oculaire.

Selon Johnny Hallyday : Dark Mode c’est Dark Mode…
“Ok je sors !”


Mais qu’apporte le Dark mode à un utilisateur ?

Objectif 1 :
Sauver la planète ! Ou presque… Passer du côté obscur est bon pour l’environnement.
Hé oui qui dit moins de luminosité dit écran moins brillant. Moins brillant, moins de batterie utilisée. Donc moins de batterie à produire et surtout à recharger.
Globalement on consomme moins d’énergie.

Objectif 2 :
Combattre la fatigue oculaire surtout si on lit l’écran dans un environnement sombre. On parle ici de confort de lecture pour l’utilisateur. Cela peut s’avérer utile car faites le calcul du nombre d’heures passées devant des écrans.

Email sur fond noir repose ton œil le soir et email sur fond blanc, email aveuglant

un poète anonyme

Concrètement ça donne quoi sur les emails ?

On va prendre cet email-ci en exemple :

3 types d’interprétation sont au programme :

1°) Pas de modification. Rien à dire ou à faire, circulez 😉

2°) Inversion partielle des couleurs :

Le fond blanc passe en noir, la typo s’inverse aussi. Le logo Badsender en jpg ayant un fond blanc autour de lui, cela explique son rendu.

3°) Inversion totale :

Cela touche toutes les couleurs surtout les arrières-plan. Le jaune flash est passé foncé et on voit bien l’image en jpg ressortir avec l’ancien fond jaune. On voit comment résoudre cela un peu plus loin 😉

Le bouton s’est foncé aussi. Les 2 couleurs de base de ce CTA sont claires sur le bouton. Bleu clair en fond de base et blanc en typo. On passe bleu foncé et noir en mode sombre. Pensez donc à utiliser 2 couleurs tranchées pour le fond et les typos sur les CTA : une sombre et une foncée. Ça évitera le ton sur ton en cas de modification vers le Dark mode

Qui prend en charge le Dark mode ?

Les 3 plus grands du marché sont au fait :
– Apple depuis IOS 13.0.
– Microsoft a un dark mode pour IOS et Android sur Outlook. (août 2019)
– Gmail aussi a déployé un mode sombre. (septembre 2019)

Que faire au point de vue annonceur ?

2 tendances :

  • Live & let die : on ne change rien et on envoie les emails comme à l’habitude. On ne touche pas à la préférence personnelle de lecture choisie par l’utilisateur. Hé oui n’oublions pas ceci qui est essentiel : c’est l’utilisateur final qui fait sciemment ce choix.
  • Il existe quelques hacks et/ou soluces simples pour prendre en compte ce Dark mode.

Mettre en place les quelques hacks ou astuces

  • Directement avec les medias-queries avec lesquelles on va pouvoir définir le mode clair / sombre

<style>
/* Mode clair par défaut */
     body {
         background: white;
         color: #000000;
     }
@media (prefers-color-scheme: dark) {
    /* Mode sombre */

    body {
        background: black;
        color: #ffffff;
    }
}
</style>

  • Passer ses images en png. Ainsi on s’évite d’avoir le fond de couleur dans l’image. Si l’arrière plan change, pas de problème puisque l’image aura sa transparence. Souvenez-vous du verre à cocktail lorsque le fond jaune change sur notre exemple.
  • Échanger des images avec le css.
    Exemple : prévoir un logo clair et un logo foncé.
  • Mettre des traits noirs/blancs autour des typos & images
Un trait blanc autour du logo à gauche est invisible sur fond blanc alors qu’il fait ressortir le logo sur fond noir qui serait invisible sinon.

Conclusion

A l’instar de l’émission d’Évelyne Thomas : “C’est mon choix !”, toute l’équipe de Badsender est d’accord sur le fait qu’ici nous arrivons aux limites du code.
Et c’est bien un choix de l’utilisateur de passer au Dark mode. Devons-nous nous adapter ? Non ce ne sera pas notre préco. Aller à l’encontre des souhaits et réglages de l’utilisateur sont des principes bien trop intrusifs.
Donc en gros, testez vos emails sur les 2 modes en espérant qu’ils passent bien sur les 2.
Et qui sait, on va peut-être bientôt arriver à faire des emails transparents ^^.

Sources :
– https://litmus.com/blog/the-ultimate-guide-to-dark-mode-for-email-marketers
– https://www.emailonacid.com/blog/article/email-development/dark-mode-for-email/
– https://sidemail.io/articles/dark-mode-in-html-email/
– https://www.campaignmonitor.com/blog/email-marketing/2019/10/designing-an-email-for-dark-mode-dark-and-light-optimization/

https://taxiforemail.com/blog/dark-mode-in-email-easy-solutions/
– Évelyne Thomas “C’est mon choix” – France 3

Partager sur facebook
Partager sur twitter
Partager sur linkedin
Partager sur email

Contactez l'auteur de l'article

Réponses

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