Ce guide traite du mode sombre, notamment de sa nature et de la manière dont vous pouvez vous assurer que vos messages électroniques s'affichent correctement pour ceux qui l'utilisent.

Qu'est-ce que le mode sombre ?

Le mode sombre est un paramètre qui modifie les couleurs d'une interface pour la rendre plus facile à lire. L'arrière-plan devient sombre et le texte devient blanc. Le principal avantage de ce mode est de réduire la fatigue oculaire du spectateur. Le mode sombre permet également de réduire l'utilisation de la batterie.

Les développeurs connaissent probablement bien le mode sombre, car il s'agit d'un moyen populaire de visualiser le code depuis plusieurs années. Le mode sombre est également avantageux pour les personnes sensibles à la lumière ou qui travaillent la nuit, car il est plus facile de lire en mode sombre dans un environnement à faible luminosité.

Certaines applications populaires disposent d'une option de mode sombre pour leur interface utilisateur, notamment les applications courriel . Mais les clients de courriel doivent gérer le mode sombre différemment, et c'est là qu'intervient le défi.

Les défis du mode sombre pour les spécialistes du marketing par courriel

Lorsque vous activez le mode sombre, l'interface utilisateur de l'application courriel peut changer. Mais certains clients courriel modifient également l'aspect de l'ensemble du message. Le script de vérification des couleurs examine toute couleur ou couleur d'arrière-plan ayant une propriété CSS de background, color, background-color, ou un attribut HTML de bgcolor ou color.

En d'autres termes, le mode sombre modifie les couleurs de l'arrière-plan et de la police des messages électroniques pour les rendre plus claires lorsqu'ils sont affichés sur un écran sombre.

"D'accord", pensez-vous peut-être, "alors changeons simplement les polices pour que cette transition fonctionne en mode sombre". Malheureusement, il n'est pas aussi simple de résoudre ce problème.

Les courriels en texte brut, qui comportent du texte noir sur un fond blanc, ne posent généralement aucun problème en mode sombre. Cependant, lorsque les courriels sont développés en HTML, les choses se compliquent considérablement.

Comment préparer les e-mails pour le mode sombre

Si de nombreuses personnes consultent les e-mails en mode sombre, ce n'est pas le cas de tout le monde. Le premier défi que doivent relever les spécialistes du marketing est donc de développer des e-mails qui fonctionnent à la fois pour les modes sombre et clair. Voici quelques bonnes pratiques à adopter.

Remplacez les JPEGS par des PNGS

Si vous utilisez des PNG transparents pour vos images, le changement de couleur d'arrière-plan en mode sombre sera transparent. Ainsi, l'arrière-plan de l'image correspondra toujours à la nouvelle couleur d'arrière-plan.

Mais vous devez quand même vous préparer à recevoir du texte et des icônes noirs.

Traits blancs, éléments de conception noirs

Parfois, les e-mails en mode sombre peuvent entraîner la disparition de vos campagnes. Cela se produit lorsque du texte noir, des icônes, des logos et autres deviennent invisibles sur des arrière-plans sombres.

L'ajout de traits blancs autour du texte et des icônes est un moyen efficace de rendre vos e-mails plus digestes. Lorsque les internautes consultent votre site courriel en mode clair, les traits blancs ne sont pas visibles. Mais lorsqu'ils l'afficheront en mode sombre, les traits blancs feront ressortir les éléments.

Est-ce vraiment important ?

Créer des courriels qui fonctionnent en mode sombre peut sembler être un travail supplémentaire. Mais si vous ne le faites pas, vous créerez des e-mails qui seront illisibles ou qui offriront une mauvaise expérience à vos abonnés. Dans les deux cas, il en résultera des désabonnements et un manque d'engagement vis-à-vis d'un élément autrement prolifique de votre stratégie marketing.

Si les gens veulent voir leurs e-mails en mode sombre, il vaut mieux répondre à leurs besoins et leur offrir cette expérience.

Prise en charge du mode sombre et du client courriel

Le plus grand défi que pose l'utilisation du mode sombre pour courriel est peut-être que les différents clients courriel comme Gmail, Apple Mail et Outlook rendent les choses différemment.

Certains clients courriel inversent automatiquement les couleurs, d'autres non. Certains clients courriel prennent en charge les requêtes média pour les schémas de couleurs sombres et claires, d'autres non.

Voici un aperçu :

- Apple Mail (iPhone/iPad)

Inverse automatiquement les couleurs lorsque l'arrière-plan est transparent ou blanc pur (#fffff).

- Apple Mail (macOS)

Inversion automatique lorsque l'arrière-plan est transparent ou blanc pur (#fffff).

- Outlook (iOS)

Peut rendre la couleur de l'arrière-plan plus sombre.

- Outlook (macOS)

Peut rendre la couleur de l'arrière-plan plus sombre.

- Outlook (Windows)

Cette option d'Outlook permet d'inverser automatiquement les couleurs.

- Outlook.com(webmail)

C'est la seule option d'Outlook où l'échange d'images fonctionne.

Peut rendre la couleur de l'arrière-plan plus sombre.

- Gmail (Android)

Inverse automatiquement les couleurs.

- Gmail

Ne s'inverse pas automatiquement.

- AOL (webmail)

Pas d'interface utilisateur en mode sombre.

- Yahoo ! (webmail)

Pas d'interface utilisateur en mode sombre.

‍

Si quelqu'un utilise un système d'exploitation ou un appareil différent, il peut être plus difficile d'utiliser le mode sombre pour courriel. C'est pourquoi il est utile de tester l'apparence de vos campagnes sur différents appareils et systèmes d'exploitation. Ainsi, vous pouvez voir ce qui fonctionne et ce qui ne fonctionne pas avant de les envoyer.

Comment tester la lisibilité des e-mails en mode sombre

Le test semble assez facile, non ? Il suffit d'envoyer un message à l'adresse courriel, de s'assurer que tout est beau et fonctionne, et hop ! testé. Mais... comme pour tout ce qui concerne le mode sombre, ce n'est pas aussi simple. C'est frustrant, non ?

Voyons si nous pouvons atténuer un peu cette frustration.

‍

1. Quels clients courriel vos abonnés utilisent-ils ?

Vérifiez quels clients courriel vos abonnés courriel utilisent le plus. Testez d'abord votre modèle courriel sur ces clients courriel .

2. Activez le mode sombre

Avant d'envoyer des e-mails de test, activez le mode sombre sur votre appareil.

3. Envoyez les courriels à vous-même

Envoyez les e-mails à votre propre compte (ou à un compte de test). Comparez l'original avec le mode sombre. Comment cela se présente-t-il ? Qu'est-ce qui doit changer ?

5. Effectuez les modifications, réessayez

Dans un processus de test manuel, il est essentiel de procéder par essais et erreurs. Tester les e-mails sur différents clients, dans différents modes et sur différents appareils. Cela peut prendre un certain temps. Avec un peu de chance, après quelques mois de tests, vous pourrez mieux comprendre ce qui fonctionne et ce qui ne fonctionne pas.

6. Essayez plutôt un outil en mode sombre

Le moyen le plus efficace de tester votre courriel est de le brancher sur un outil de test en mode sombre. Certains programmes et applications de marketingcourriel proposent ce service. Dans ce cas, vous pouvez brancher votre courriel dans l'outil, qui vous montrera les différents modes de prévisualisation et où se trouvent les éventuelles lacunes. Au lieu d'envoyer (et de renvoyer) des courriels à vous-même et de vérifier différents appareils, tout se trouve au même endroit.

Avez-vous des conseils sur la conception pour le mode sombre ?

C'est certainement le cas et nous sommes heureux de le partager ! Tout d'abord, voici quelques ressources utiles sur la relation entre le développement de courriel et le mode sombre :

• Meilleures pratiques de conception en mode sombre du BEE Design Blog (2022)
• 5 conseils pour le design en mode sombre courriel du BEE Design Blog (2020)
• Le guide ultime du mode sombre pour les spécialistes du marketing par courriel from Litmus
• Dark Mode pour courriel: Ce que c'est et comment y faire face de courriel on Acid
• Dark mode in HTML courriel from Sidemail
  
  Litmus vient de publier un guide pour les programmeurs : How to Conquer Coding Emails for Dark Mode : A Guide For courriel Developers
  
  Voici deux images qui parlent d'elles-mêmes :

Langage de développeur pour la prise en charge du mode sombre

Si vous ou un membre de votre équipe est un développeur, il existe deux façons de modifier les couleurs de vos courriels pour les rendre plus sombres. Le mode sombre fonctionne différemment selon les clients courriel . Mais si vous souhaitez utiliser vos propres couleurs en mode sombre, vous pouvez le faire.

@media (prefers-color-scheme : dark)

Vous pouvez utiliser cette méthode pour créer un thème personnalisé en mode sombre pour votre site Web. Cette méthode est similaire à l'utilisation d'un bloc de styles à l'intérieur d'une requête @media pour votre vue Mobile Responsive, sauf que ce bloc CSS fonctionnera pour toute interface utilisateur définie en mode sombre.

@media (prefers-color-scheme : dark) vous permet de modifier différents aspects de votre site Web, comme les images et l'arrière-plan, lorsque quelqu'un utilise le mode sombre.

[data-ogsc]

Cette méthode est utilisée pour cibler l'application Outlook. Avec les styles @media (prefers-color-scheme : dark), vous pouvez maintenant ajouter les préfixes [data-ogsc] appropriés à chaque règle CSS.

‍

Tester votre courriel en mode sombre peut être un processus délicat, mais avec les bons conseils, cela peut être gérable. Nous espérons que nos conseils vous aideront à comprendre ce qu'il faut faire lorsque vous testez vos e-mails en mode sombre. Si vous avez besoin d'aide supplémentaire ou si vous souhaitez tester un outil de mode sombre, nous vous suggérons d'en apprendre davantage sur les capacités de Cakemail.

‍