Le mode sombre pour le courrier électronique est de plus en plus adopté… Voici comment le prendre en charge
Le mode sombre réduit la consommation d'énergie de l'écran et augmente la concentration. Certains utilisateurs déclarent également ressentir une fatigue oculaire réduite, mais c'est été interrogé.
L'adoption du mode sombre continue de croître. Le mode sombre est désormais disponible sur macOS, iOS, Android et une multitude d'applications, notamment Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail et Reddit. Cependant, il n’y a pas toujours de support complet pour chacun. Ce n'est pas souvent qu'il y a des progrès dans la technologie de messagerie, il est donc agréable de voir également l'adoption de la prise en charge du mode sombre dans la messagerie.
Nous avons vu 28 % des utilisateurs visionner en mode sombre en août 2021. En août 2022, ce nombre était passé à près de 34 %.
Tournesol
Comprendre les meilleures pratiques, le code à implémenter et le support client est essentiel à la réussite de la mise en œuvre du mode sombre. Pour cette raison, l'équipe d'Uplers a publié ce guide du mode sombre support par email.
Récemment, DK New Media a développé un modèle Salesforce Marketing Cloud pour un client intégrant le mode sombre, contrastant considérablement les sections de courrier électronique lorsqu'elles sont affichées dans un client de messagerie. C'est un effort qui peut générer un engagement supplémentaire et des taux de clics pour vos abonnés.
Code de messagerie en mode sombre
Étape 1: Inclure les métadonnées pour activer le mode sombre dans les clients de messagerie – La première étape consiste à activer le mode sombre dans l’e-mail pour les abonnés dont les paramètres du mode sombre sont activés. Vous pouvez inclure ces métadonnées dans le étiqueter.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Étape 2: Inclure les styles de mode sombre pour @media (prefers-color-scheme: dark) - Écrivez cette requête multimédia dans votre intégré tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) et Outlook App (iOS). Si vous ne souhaitez pas de logo souligné dans votre e-mail, vous pouvez utiliser .dark-img
et .light-img
cours comme indiqué ci-dessous.
@media (prefers-color-scheme: dark ) {
.dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
.light-mode-image { display:none; display:none !important; }
}
Étape 3: utilisez le préfixe [data-ogsc] pour dupliquer les styles en mode sombre - Incluez ces codes pour que l'e-mail soit compatible avec le mode sombre dans l'application Outlook pour Android.
[data-ogsc] .light-mode-image { display:none; display:none !important; }
[data-ogsc] .dark-mode-image { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important; }
Étape 3: inclure les styles en mode sombre uniquement dans le code HTML du corps - Vos balises HTML doivent avoir les bonnes classes de mode sombre.
<!-- Logo Section -->
<a href="http://email-uplers.com/" target="_blank" style="text-decoration: none;"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-black.png" width="170" alt="Uplers" style="color: #333333; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" class="light-mode-image"/>
<!-- This is the hidden Logo for dark mode with MSO conditional/Ghost Code --> <!--[if !mso]><! --><div class="dark-mode-image" style="display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden;" align="center"><img src="https://campaigns.uplers.com/_email/_global/images/logo_icon-name-white.png" width="170" alt="Uplers" style="color: #f1f1f1; font-family:Arial, sans-serif; text-align:center; font-weight:bold; font-size:40px; line-height:45px; text-decoration: none;" border="0" />
</div><!--<![endif]-->
</a>
<!-- //Logo Section -->
Envoyer des conseils en mode sombre et des ressources supplémentaires
J'ai travaillé sur le Martech Zone newsletters quotidiennes et hebdomadaires pour prendre en charge le mode sombre… assurez-vous de abonnez-vous ici. Comme pour la plupart des codages de courrier électronique, ce n'est pas simple en raison des différents clients de messagerie et de leurs méthodologies de codage propriétaires. Un problème que j'ai rencontré concernait les exceptions… par exemple, vous voulez du texte blanc sur un bouton quel que soit le mode sombre. La quantité de code est un peu ridicule… J'ai dû avoir les exceptions suivantes :
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Quelques ressources supplémentaires:
- Tournesol - le guide ultime du mode sombre pour les spécialistes du marketing par e-mail.
- CampaignMonitor – le guide du développeur sur le mode sombre pour la messagerie électronique.
Si vous souhaitez convertir vos modèles d'e-mails pour la prise en charge du mode sombre, n'hésitez pas à contacter DK New Media.