Le mode sombre a été lancé il y a à peine quelques années et son adoption continue de croître. Mode sombre est désormais disponible sur macOS, iOS et Android, ainsi que sur 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 d'entre eux.
Le mode sombre réduit la consommation d'énergie de l'écran et augmente la mise au point. Certains utilisateurs déclarent également ressentir une réduction de la fatigue oculaire, mais c'est été interrogé.
Récemment, nous avons développé un modèle Marketing Cloud qui intégrait le mode sombre dans son code, ce qui rend les sections de courrier électronique considérablement contrastées 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.
Ce n'est pas souvent qu'il y a des progrès dans la technologie de messagerie, il est donc agréable de voir l'adoption de cette expérience dans l'industrie. Comprendre les meilleures pratiques, le code à implémenter, ainsi que le support client est essentiel pour réussir votre implémentation du mode sombre. Pour cette raison, l'équipe d'Uplers a publié ce guide prise en charge des e-mails en mode sombre.
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 de mode sombre sont activés. Vous pouvez le faire en incluant ces métadonnées dans le marque.
<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 voulez pas de logo souligné dans votre e-mail, vous pouvez utiliser les classes .dark-img et .light-img 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 bulletins quotidiens et hebdomadaires pour prendre en charge le mode sombre, assurez-vous de abonnez-vous ici. Comme pour la plupart des codages de messagerie, ce n'est pas un processus 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… Je devais 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 des développeurs sur le mode sombre pour les e-mails.
Voir l'infographie interactive d'Uplers
