- Base de connaissances
- Marketing
- E-mail marketing
- Prévisualiser et optimiser l'apparence des e-mails en mode sombre
Prévisualiser et optimiser l'apparence des e-mails en mode sombre
Dernière mise à jour: 6 juin 2025
Disponible avec le ou les abonnements suivants, sauf mention contraire :
-
Marketing Hub Pro, Enterprise
- Ancienne version Marketing Hub Basique
De nombreux clients de messagerie disposent d’un paramètre de mode sombre, ce qui peut entraîner des leads d’incohérences dans l’affichage de vos e-mails marketing dans les clients à l’apparence plus claire activée.
Afficher/masquer l'aperçu du mode sombre dans l'éditeur d'e-mails
Pour passer à un aperçu en mode sombre de votre e-mail pendant que vous le concevez :
- Depuis votre compte HubSpot, accédez à Marketing > E-mail.
- Cliquez sur le nom d'un brouillon d'e-mail.
- En haut de l’éditeur d’e-mails, cliquez sur Options d’affichage, puis activez l’option Aperçu en mode sombre.
Prévisualiser l'apparence de votre e-mail dans le mode sombre d'un client spécifique
Pour voir comment votre e-mail apparaîtra lorsqu'un contact l'ouvrira dans un navigateur ou un client avec le mode sombre activé :
- Depuis votre compte HubSpot, accédez à Marketing > E-mail.
- Cliquez sur le nom d'un e-mail rédigé existant.
- Dans l’angle supérieur droit de l’éditeur d’e-mails, cliquez sur Aperçu et test, puis sélectionnez Aperçu de la boîte de réception.
- En haut de l'écran d'aperçu, cliquez sur Clients.
- Dans Mode sombre, sélectionnez la case à cocher à côté d'un client pour lequel vous souhaitez un aperçu.
- Dans l'angle supérieur droit, cliquez sur Tester mon e-mail maintenant.
Bonnes pratiques de conception d'e-mails pour le mode sombre
Lorsque vous prévisualisez votre e-mail avec différents clients en mode sombre, notez que chaque client affichera votre e-mail différemment. Par exemple, si vos contacts ouvrent votre e-mail via Apple Mail, celui-ci sera exactement identique, que le mode sombre soit activé ou non. Si un contact active le mode sombre dans des applications comme Gmail ou Outlook sur Windows, vous pourrez constater des différences plus importantes dans le style de votre e-mail, comme des couleurs d'arrière-plan inversées.
Pour vérifier que votre style de messagerie est cohérent entre les clients, suivez les conseils ci-dessous.
Utiliser des images qui apparaîtront clairement sur des arrière-plans clairs et foncés
Convertissez vos images en fichiers PNG avant de les charger et de les ajouter à vos e-mails, ce qui permet aux clients de messagerie de les afficher en inversant automatiquement la couleur d'arrière-plan des e-mails en mode sombre. Si votre image contient du texte, comme un logo, vous pouvez également ajouter une description translucide autour du texte.
Choisir des couleurs accessibles pour le web
La conception accessible de votre contenu d'e-mail est importante, quel que soit le client de messagerie que votre destinataire utilise. Le respect des normes d'accessibilité, telles que le contraste des couleurs de votre texte, permettra également à vos e-mails d'apparaître correctement en mode sombre. Découvrez-en davantage sur les couleurs accessibles sur le web sur le blog de HubSpot.
Préciser une requête de média pour le mode sombre dans iOS
Plusieurs clients de messagerie, y compris Apple Mail et Outlook.com, proposent une prise en charge limitée de la détection et de l'ajout d'un style personnalisé via une requête de média. Si vous utilisez l'éditeur d'e-mails classique mis à jour et que vous disposez de ressources de développement pour apporter des modifications CSS à vos e-mails, vous pouvez ajouter une requête média avec la fonctionnalité média prefers-color-scheme
pour configurer l'aspect des images et du texte en mode sombre et en mode clair