Dark mode : Optimiser les logos et pictos via des bordures et fonds blancs

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

On vous a déjà dit qu’on aimait beaucoup beaucoup nos lecteurs ? Bon avec Benoît, on se connait depuis longtemps, on s’est croisé à de nombreuses reprises ! Et ce week-end, v’la t’y pas qu’il se permet de nous donner des conseils. À nous. Sur nos propres newsletters. À propos de notre gestion du Dark Mode ! Mais quel toupet !

À propos de Benoît Duchesne : Benoît a passé toute sa carrière dans diverses agences à Bruxelles. Il a commencé il y a 15 ans chez Tagora puis Redleg, avant de passer chez Beejee pour se retrouver aujourd’hui chez Serviceplan Group. Il a travaillé sur les emails d’annonceurs comme le groupe Fiat et Bouygues Telecom entre autres.

Allez, on passe l’éponge pour cette fois. Par contre, on ne va quand même pas garder ces bonnes recos rien que pour nous ! On vous copie/colle l’email de Benoît presque littéralement.

Benoît fait son Dark Mode

Comme vous le savez, je vous suis avec attention depuis de nombreuses années… à vrai dire d’autant plus après avoir été l’anti-héros d’un article mémorable sur le CNG, hé oui ça venait de chez Beejee, que de souvenirs !

Depuis, le temps a passé et je me suis perfectionné dans l’emailing, notamment grâce à votre aide sur le lancement du projet Bouygues Telecom lors de mon arrivée chez Plan.Net.

Bref, je continue à vous suivre et je dois dire que vos “lives”, les 24 jours de l’email entre autres et surtout votre livre blanc sur les bonnes pratiques HTML sont de vraies pépites !

Donc j’ai eu envie de moi aussi pouvoir vous apporter quelque chose en retour !

Ayant suivi le webinar de Halloween organisé par Email on Acid sur le dark mode, j’ai commencé à optimiser les emails de tous mes clients, et profitant (enfin) de ce weekend pourri pour investiguer en profondeur sur le sujet, je me suis demandé comment vous faisiez… et c’est là que j’ai remarqué que votre newsletter passait globalement bien en dark mode, sauf les logos et pictos (principalement dans le header et le footer) :

La newsletter actuelle en affichage normal
La newsletter actuelle en Dark Mode
Le footer actuel en version normale
Le footer actuel en version Dark Mode

Il semble possible de cibler le dark mode via @media (prefers-color-scheme: dark), mais ça fait du travail en plus et donc pas la meilleure solution.

Par contre, en ajoutant une couleur de fond derrière ou autour des images, on obtient vite un résultat beaucoup plus parlant comme ceci (et cela n’a aucun impact sur la version “normale” puisque les contours et fonds sont les #F6F6F6 ou #FFFFFF que vous utilisez) :

La proposition d’optimisation de Benoît
Le footer optimisé de Benoît

Dans son élan de générosité… Benoît nous a même envoyé les images et pictos optimisés dans un petit fichier zip. Sois béni Benoît !

Cet article vous a plu ? Vous en voulez plus ? N’hésitez pas à découvrir notre livre blanc sur l’intégration HTML pour l’email. Et si vous voulez, on peut aussi vous coacher, vous former ou développer votre prochain gabarit email.

Photo par Breno Machado sur Unsplash

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

Une réponse

Laisser un commentaire

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