E-mail en mode sombre: votre guide pratique ultime


Mode sombre. L’industrie de la technologie bourdonne avec ces deux mots et le marketing par courriel ne fait pas exception. En 2018, Apple a ajouté le mode sombre à son client de messagerie de bureau. L’année suivante, Le mode sombre est arrivé sur iOS Mail. Et d’autres poids lourds de l’industrie, y compris Gmail, ont annoncé la prise en charge du mode sombre. Il est indéniable…

Le mode sombre prend le dessus sur la boîte de réception et faire en sorte que les e-mails soient beaux dans cet environnement de lecture est le nouveau grand défi pour les spécialistes du marketing par e-mail. Tweet ceci →

Dans cet article, nous détaillons les clients de messagerie qui proposent le mode sombre, l’impact des paramètres du mode sombre de chaque client sur la conception de vos e-mails et ce que vous pouvez faire pour améliorer vos e-mails pour les abonnés qui lisent en mode sombre.

Prêt à plonger? Récapitulons les bases.

Mode sombre: une palette de couleurs plus foncées pour les environnements peu éclairés ou nocturnes

Le mode sombre est un jeu de couleurs inversé qui utilise une typographie de couleur claire, des éléments d’interface utilisateur et une iconographie sur des arrière-plans sombres. C’est l’une des tendances de conception numérique les plus en vogue de l’année écoulée. Du système d’exploitation d’Apple aux applications comme Twitter, Slack ou Facebook Messenger, les systèmes d’exploitation et applications les plus populaires permettent désormais aux utilisateurs de passer en mode sombre. Le mode sombre est un sujet brûlant – et il y a de bonnes raisons. De nombreux utilisateurs préfèrent le mode sombre car:

  • Ses plus facile pour les yeux. Un texte clair sur un fond sombre est bien meilleur pour minimiser la fatigue oculaire, en particulier dans des situations de faible éclairage.
  • Il réduit la luminosité de l’écran, économisant la vie de votre batterie.
  • Ça peut améliorer la lisibilité du contenu et peut permettre à certains utilisateurs de consommer plus facilement du contenu sur ordinateur et mobile.
  • Ils peuvent simplement avoir un préférence pour les interfaces plus sombres.

Avec la popularité croissante du mode sombre, il n’est pas surprenant qu’il arrive également dans la boîte de réception.

Quels clients de messagerie prennent en charge le mode sombre?

Ces clients et applications proposent actuellement le mode sombre, soit en tant que paramètre que l’utilisateur peut définir manuellement, soit en détectant automatiquement le jeu de couleurs préféré de l’utilisateur:

Application mobile

Clients de bureau

  • Apple Mail
  • Outlook 2019 (Mac OS)
  • Outlook 2019 (Windows)

Clients Web

  • Perspectives & period; com
  • Salut & period; com

Mais ce n’est pas parce que tous ces clients de messagerie offrent un moyen de définir leur interface utilisateur sur un jeu de couleurs sombres qu’ils traitent vos e-mails de la même manière. Le rendu des e-mails est complexe. Un e-mail qui ressemble beaucoup à un client peut sembler cassé dans un autre. Maintenant, le mode sombre ajoute une autre couche de complexité. En fait, un client de messagerie en mode sombre peut traiter votre code de différentes manières.

Comment les clients appliquent-ils le mode sombre à mes e-mails?

Pour le moment, il semble y avoir trois types de couleurs fondamentalement différents que les clients de messagerie utilisent pour appliquer le mode sombre aux e-mails. Examinons-les un par un (ou passez directement au tableau de support du client de messagerie en mode sombre).

Aucun changement de couleur

Oui, vous avez bien lu. Certains clients de messagerie vous permettent de modifier leur interface utilisateur en mode sombre, mais cela n’a aucun impact sur le rendu de votre e-mail HTML. Que l’application soit définie sur le mode clair ou sombre, votre e-mail aura exactement la même apparence. Certains clients de messagerie afficheront toujours vos conceptions en mode clair par défaut (sauf si vous ajoutez spécifiquement du code pour déclencher le mode sombre, dont je parlerai plus tard). Voici une liste de ces clients:

  • Apple Mail
  • iPhone
  • iPad
  • Hey.com

Consultez cet exemple d’e-mail dans Apple Mail: la conception de l’e-mail reste exactement la même, peu importe si vous l’affichez dans l’interface utilisateur du client de messagerie sombre ou claire:

E-mail de tournesol sans modification de conception en mode clair ou en mode sombre

Il y a cependant quelques exceptions: d’abord, e-mails en texte brut faire déclencher l’application d’un thème Dark Modeet le code minimum qui empêche le mode sombre de s’appliquer à un e-mail en texte brut est une image 2 × 1. Ceci permet de garantir que vous pouvez inclure un pixel de suivi 1 × 1 tout en conservant une impression de «texte brut».

Deuxièmement, si vous quittez accidentellement le mode sombre balises dans votre modèle, Apple Mail / iPhone / iPad volonté convertir automatiquement toute instance de blanc pur #ffffff en gris foncé sauf si vous le remplacez par vos styles de mode sombre personnalisés. Ou bien, vous pouvez utiliser un blanc cassé comme #fffffe à la place.

Options du mode sombre: par défaut ou personnalisé

Il existe de nombreux clients de messagerie qui forceront automatiquement leur mode sombre par défaut sur votre messagerie si vous ne faites rien du tout. Mais si vous êtes comme la plupart d’entre nous et que vous n’êtes pas fan de ces styles par défaut, vous voudrez peut-être opter pour la troisième option: concevoir et coder votre propre thème du mode sombre. Ci-dessous, vous pouvez voir un e-mail côte à côte avec un thème Mode clair et un thème Mode sombre personnalisé.

Exemple d'e-mail en mode clair de Litmus et d'e-mail en mode sombre personnalisé

Modes sombre par défaut: inversion partielle des couleurs

Avant d’examiner comment aborder un thème de mode sombre personnalisé, voyons comment les autres clients de messagerie traitent leurs modes sombre par défaut. Le premier thème du mode sombre est ce que j’aime appeler une «inversion partielle des couleurs». Il ne détecte que les zones avec des arrière-plans clairs et les inverse pour que les arrière-plans clairs soient sombres, tandis que le texte sombre devient clair. Il laisse généralement les zones qui ont déjà des arrière-plans sombres, ce qui donne une conception entièrement en mode sombre. Heureusement, la plupart des clients de messagerie utilisant cette méthode aussi prend en charge le ciblage en mode sombre, vous pouvez donc remplacer le thème sombre par défaut du client.

Outlook.com est un client de messagerie qui inverse partiellement les couleurs, comme vous pouvez le voir sur cette capture d’écran:

Exemple d'inversion partielle de couleur par e-mail en mode clair et en mode sombre

Modes sombres par défaut: Inversion couleur

Le Full Color Invert est le jeu de couleurs le plus invasif: il inverse non seulement les zones avec des arrière-plans clairs, mais affecte également les arrière-plans sombres. Donc, si vous avez déjà conçu vos e-mails pour avoir un thème sombre, ce schéma les forcera ironiquement à devenir légers. Malheureusement, c’est actuellement la tactique utilisée par certains des clients de messagerie les plus populaires, tels que l’application Gmail (iOS13) et Outlook 2019 (Windows).

Dans l’exemple ci-dessous, vous pouvez voir que les arrière-plans clairs ont été convertis en versions sombres des couleurs d’origine. Et les zones qui avaient auparavant un arrière-plan sombre avec du texte clair sont maintenant claires avec du texte sombre.

Exemple d'inversion couleur par e-mail en mode clair et en mode sombre

Non seulement ce schéma Full Color Invert modifie le plus radicalement votre messagerie, mais les clients de messagerie qui utilisent cette logique ne permet pas non plus le ciblage en mode sombre pour le moment. Les clients de messagerie sont toujours en train de déterminer comment mettre en œuvre au mieux le mode sombre et peuvent être ouverts aux commentaires des utilisateurs, d’autant plus que ne pas autoriser les développeurs à cibler le mode sombre avec leurs propres styles peut avoir un impact négatif sur la lisibilité et l’accessibilité.

Dans l’intérêt de préconiser une meilleure prise en charge du ciblage en mode sombre et une logique de thématisation en mode sombre moins invasive, vous pouvez communiquez vos réflexions directement à l’équipe d’accessibilité de Gmail, et vous pouvez aussi envoyez vos captures d’écran du mode sombre de Gmail brisant votre e-mail.

Comment cibler les utilisateurs du mode sombre avec mes propres styles?

Comme indiqué ci-dessus, la manière dont les clients de messagerie en mode sombre gèrent vos e-mails HTML réguliers variera. Mais que faire si vous souhaitez appliquer vos propres styles de mode sombre qui pourraient très bien différer des jeux de couleurs par défaut des clients de messagerie? Voici deux méthodes que vous pouvez utiliser:

@media (préfère le jeu de couleurs: sombre)

Cette méthode fonctionne à peu près de la même manière que l’application d’un bloc de styles à l’intérieur d’un @médias requête pour votre vue Mobile Responsive, sauf que ce bloc CSS cible toute interface utilisateur définie sur le mode sombre.

[data-ogsc]

C’est une méthode d’abord porté à notre attention par Mark Robbins pour cibler l’application Outlook. Bien que cela semble être une part de marché assez étroite, il est relativement facile de simplement dupliquer @media (préfère le jeu de couleurs: sombre) styles que vous avez déjà appliqués et ajoutez simplement les [data-ogsc] préfixes à chaque règle CSS.

Mais – et il y a toujours un “mais” dans les e-mails – il n’y a pas non plus de support cohérent pour ces méthodes de ciblage. Alors, quel client de messagerie suit quel jeu de couleurs par défaut? Et tandis que certains clients de messagerie – nous vous regardons, Gmail – n’offrent aux concepteurs de messagerie aucune possibilité de cibler le mode sombre pour optimiser l’expérience de lecture, la plupart des clients peuvent être ciblés soit avec @media (préfère le jeu de couleurs: sombre) ou [data-ogsc] méthodes.

Nous avons testé les paramètres du mode sombre dans les clients de messagerie suivants pour voir comment ils affectent un e-mail ordinaire qui n’inclut aucun ciblage spécifique au mode sombre, ainsi que la prise en charge du ciblage en mode sombre. Voici ce que nous avons trouvé…

Tableau de prise en charge du client de messagerie en mode sombre (à partir de juillet 2020)

Client de messagerie

Traitement HTML en mode sombre

@médias

[data‐ogsc]

Bizarreries

Apple Mail (MacOS)

Pas de changement*

✓ Oui

✘ Non

* Les BG blancs purs (#ffffff) seront inversés si est présent

iPhone / iPad (iOS 13)

Pas de changement*

✓ Oui

✘ Non

* Les BG blancs purs (#ffffff) seront inversés si est présent

Hey.com

Pas de changement

✓ Oui

✘ Non

Outlook.com

Inversion partielle

? Partiel*

? Partiel**

* Certaines couleurs BG seront assombries
** L’échange d’images fonctionne!

Outlook 2019 (MacOS)

Inversion partielle

? Partiel*

✘ Non

* Certaines couleurs BG seront assombries

Outlook 2019 (WinOS)

Inversion complète

✘ Non

✘ Non

Application Outlook (iOS)

Inversion partielle

? Partiel*

✘ Non

* Certaines couleurs BG seront assombries

Application Outlook (Android)

Inversion partielle

✘ Non

? Partiel*

* Certaines couleurs BG seront assombries

Application Gmail (iOS)

Inversion complète

✘ Non

✘ Non

Application Gmail (Android)

Inversion partielle

✘ Non

✘ Non

Lorsque vous appliquez ces styles à vos e-mails pour une utilisation dans les clients de messagerie, gardez ces éléments à l’esprit:

1. Optimisez vos logos et autres images pour tous les styles

Ajoutez un contour translucide aux PNG transparents avec du texte sombre pour plus de lisibilité dans les clients de messagerie où le mode sombre ne peut pas être ciblé, comme l’application Gmail et Outlook 2019 (Windows). Cela aidera à éviter tout problème où le client de messagerie pourrait décider d’utiliser les paramètres Inverser partiellement les couleurs ou Inverser les couleurs et facilitera la tâche de vos abonnés. Opter pour des arrière-plans transparents dans la mesure du possible y aidera.

Exemple d'e-mail en mode sombre de tournesol d'image avec fond transparent

Si vos images ne sont pas transparentes et incluent des arrière-plans, assurez-vous qu’il y a suffisamment de rembourrage autour de votre point focal pour éviter une juxtaposition gênante.

Exemple d'e-mail en mode sombre de tournesol d'image sans fond transparent

De plus, permutez les images en mode clair et en mode sombre avec @media (préfère le jeu de couleurs: sombre) et [data-ogsc] méthodes décrites dans ce guide.

2. Activer le mode sombre dans les agents utilisateurs du client de messagerie

En incluant ceci métadonnées dans votre , vous pouvez vous assurer que le mode sombre est activé dans votre e-mail pour les abonnés qui ont activé le mode sombre:

Close Menu