Créer des e-mails pour Mode sombre

Personnalisez vos e-mails en mode foncé pour s'assurer que votre contenu reste lisible et professionnel, quel que soit le paramètre d'affichage du destinataire. Utilisez des images de fond transparentes, des couleurs à reflets et des boutons actifs pour offrir une expérience optimale à tous les clients qui vous reçoivent par e-mail.

Dans cet article, vous découvrirez comment fonctionne le mode sombre et comment améliorer votre e-mail.

Ce qu'il faut savoir

• Disponibilité : Le mode sombre est pris en charge par les principaux clients, dont Outlook, Gmail, Apple Mail et d'autres utilisateurs, sur ordinateur comme mobile.
• Test : Nous vous conseillons vivement d'utiliser l'aperçu de la boîte de réception pour tester votre design avant de l'envoyer.
• Limites de soutien technique : Le ciblage CSS personnalisé (questions de médias) est une option avancée et n'est pas pris en charge par l'équipe de soutien technique de Mailchimp.

Comment les clients e-mail affichent les e-mails dans le mode sombre

Le mode sombre est un paramètre qui permet de modifier la palette de couleurs d'un e-mail afin d'utiliser du texte, des icônes et des éléments d'interface en couleur claire sur un fond sombre.

Lorsqu'un abonné utilise le mode sombre, son client applique l'un des trois régimes de rendu à votre contenu. Par conséquent, il se peut que votre présentation soit différente pour certains destinataires.

Ce graphique montre comment certains clients e-mail rendez vos e-mails en mode sombre.

• Apple Mail offre une prise en charge complète du ciblage , alors que Gmail et Outlook 2021 en offrent une partie.

Bonnes pratiques pour la conception en mode sombre

Vous ne pouvez pas contrôler la manière dont un client qui vous envoie votre code par e-mail, ni personnaliser la conception pour le mode sombre dans la plupart des clients par e-mail.

Mailchimp ne propose pas de fonctionnalité dédiée en mode foncé, car le soutien technique du client pour le stylisme ciblé n'est pas spécifique. Nous vous recommandons de suivre ces conseils pour assurer l'exactitude de votre e-mail, où que vous soyez.

Optimisez les images et les logos.

Voici quelques conseils pour éviter toute erreur d'image, qui peut créer un effet de case blanche autour des logos.

• Utiliser des images de fond transparentes et un conflit : Enregistrez les logos et les icônes au format PNG avec des images de fond transparentes, de sorte que la couleur d'arrière-plan de l'e-mail apparaît à travers.
• Appliquer «  fournisseur » : Ajoutez un contour blanc fin ou un peu plus clair dans la zone des logos sombres pour éviter qu'ils ne s'affichent sur un fond sombre. Dans cet exemple, le logo montre un logo noir sur un fond blanc. Mais lorsque la couleur de l’arrière-plan s’assoit, un trait ou une lueur rendez le logo encore visible.
• Prévenir le renvoi automatique : Apple Mail - répond automatiquement (#FFFF) et noir pur (#000000). Utilisez des ombres légèrement comme #FDFD ou #010101 pour éviter ce problème.
• Utilisez des couleurs désactivées ou à mi-tonalité : Sélectionnez le blanc désactivé ou le gris foncé pour adoucir le conflit et éviter les changements de reflet entre les étés et les correspondres. Les palettes à mi-tonalités facilite la lecture en mode clair et en mode sombre.

• Création d'un contraste : Aidez-nous à s'assurer que le texte reste lisible en cas de retournement de l'arrière-plan. Évitez le texte sombre sur les images sombres sans chevauchement de couleur pleine à l'arrière du texte.

  Certains clients mobiles varient. Par exemple, Gmail iOS ne se comporte pas de la même façon que Gmail Android. Il n'y a aucun moyen fiable de définir sa cible ou de le remplacer. Android 10, 11, 13 peut laisser certaines couleurs non modifiées. Le #FFFF est très susceptible d'être contrepassé.

• Utilisez des séparateurs plus larges : les séparateurs fin ou gris clair ont tendance à s'effacer ou à s' cette). Utilisez plutôt un rembourrage ou des hauteurs de séparateur plus grandes.

Améliorer la paie et les boutons

• Gras de la police : Un texte clair sur des fonds sombres peut sembler plus diluant. Utilisez des poids de police standard ou plus gros pour conserver la programme de programme.
• Remplissages solides : Utilisez des boutons remplis de solides avec un fort soutien technique entre le texte et l'arrière-plan. Évitez d'utiliser uniquement des bordures ou des boutons fantômes. Dans Office 365 (Windows), le texte des boutons peut s'inverser, mais pas celui de l'arrière-plan. Les couleurs de la bordure peuvent rester inchangées.
• Visibilité du lien : N'utilisez pas uniquement la couleur pour les liens. Utilisez les barres de soulignement pour s'assurer qu'il reste reconnaissable même si la couleur change.

Testez et personnalisez votre présentation

• Aperçu de la boîte de réception : Les utilisateurs qui utilisent des plans marketing payants peuvent simuler l'apparence des e-mails pour certains clients, comme Gmail ou Apple Mail.
• Test automatique : Envoyez un e-mail de test à votre propre appareil mobile lorsque le mode sombre est activé.
• Codage avancé : Vous pouvez utiliser la requête @média (prefers- perçu-scheme: sombre) dans la section relative au style du code HTML personnalisépour cibler certains clients, comme Apple Mail et certaines versions d'Outlook.

Le soutien technique de Mailchimp ne parvient pas à résoudre les problèmes liés au CSS personnalisé.

Liste de contrôle avant d'envoyer

Assurez-vous de vérifier les éléments suivants avant d'envoyer votre e-mail.

• Les logos utilisent des images de fond transparentes et ont un reflet ou un contour pour une visibilité sombre.
• Contraste du texte et de l'arrière-plan suffisant même après l'annulation
• Les boutons utilisent des champs remplis.
• Les liens incluent le contraste et le barres de soulignement
• Prévisualisation dans au moins un client Full Invert (p. ex. Gmail iOS)

Étapes suivantes

Pour en savoir plus sur la manière d'optimiser votre affichage, consultez les ressources suivantes.

• Tester avec l'aperçu de la boîte de réception
• Afficher et modifier l'apparence des sections