Prévisualiser et optimiser l'apparence des e-mails en mode sombre

De nombreux clients de messagerie disposent d'un mode sombre, qui peut entraîner des incohérences avec l'apparence de vos e-mails marketing.

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é :

• Dans votre compte HubSpot, accédez à Marketing > E-mail s marketing.
• Cliquez sur le nom d'un e-mail rédigé existant.
• En haut à droite de l'éditeur d'e-mail, cliquez sur Aperçu puis sur 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 pour le web sur le blog 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