El mode fosc per al correu electrònic està guanyant adopció... Aquí teniu com donar-hi suport
El mode fosc redueix l'ús d'energia de la pantalla i augmenta el focus. Alguns usuaris també afirmen que senten una fatiga ocular reduïda, però això és ha estat qüestionat.
L'adopció del mode fosc continua creixent. El mode fosc ara està disponible a macOS, iOS, Android i una sèrie d'aplicacions, com ara Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail i Reddit. Tanmateix, no sempre hi ha un suport total a cadascun. No és freqüent que hi hagi avenços en la tecnologia de correu electrònic, per la qual cosa és bo veure l'adopció del suport del mode fosc també al correu electrònic.
Vam veure que el 28% dels usuaris miraven en mode fosc l'agost del 2021. A l'agost del 2022, aquest nombre havia augmentat fins a gairebé el 34%.
Tornesol
Entendre les millors pràctiques, el codi per implementar i l'assistència al client és fonamental per a l'èxit de la implementació del mode fosc. Per aquest motiu, l'equip d'Uplers va publicar aquesta guia sobre el mode fosc suport per correu electrònic.
Recentment, DK New Media va desenvolupar una plantilla de Salesforce Marketing Cloud per a un client que incorporava el mode fosc, contrastant de manera espectacular les seccions de correu electrònic quan es visualitzen en un client de correu electrònic. És un esforç que pot generar una participació addicional i percentatges de clics per als vostres subscriptors.
Codi de correu electrònic en mode fosc
Pas 1: incloeu metadades per habilitar el mode fosc als clients de correu electrònic – El primer pas és habilitar el mode fosc al correu electrònic per als subscriptors amb la configuració del mode fosc activada. Podeu incloure aquestes metadades al fitxer etiqueta.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Pas 2: incloeu estils de mode fosc per a @media (prefers-color-scheme: dark) - Escriviu aquesta consulta multimèdia al vostre encastat tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) i Outlook App (iOS). Si no voleu un logotip descrit al vostre correu electrònic, podeu utilitzar-lo .dark-img
i .light-img
classes com es mostra a continuació.
@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; }
}
Pas 3: utilitzeu el prefix [data-ogsc] per duplicar estils de mode fosc - Incloeu aquests codis perquè el correu electrònic sigui compatible amb el mode fosc a l'aplicació Outlook per a 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; }
Pas 3: incloeu estils només de mode fosc al text HTML del cos - Les vostres etiquetes HTML han de tenir les classes de mode fosc correctes.
<!-- 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 -->
Enviar consells sobre el mode fosc per correu electrònic i recursos addicionals
He estat treballant en el Martech Zone butlletins diaris i setmanals per donar suport al mode fosc... assegureu-vos de fer-ho subscripció aquí. Com passa amb la majoria de codificació de correu electrònic, no és senzill a causa dels diferents clients de correu electrònic i les seves metodologies de codificació patentades. Un dels problemes que em vaig trobar van ser les excepcions... per exemple, voleu text blanc en un botó independentment del mode fosc. La quantitat de codi és una mica ridícula... Vaig haver de tenir les següents excepcions:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Alguns recursos addicionals:
- Tornesol - la guia definitiva per al mode fosc per als venedors de correu electrònic.
- CampaignMonitor – la guia del desenvolupador del mode fosc per al correu electrònic.
Si voleu que les vostres plantilles de correu electrònic es converteixin per a la compatibilitat amb el mode fosc, no dubteu a contactar-hi DK New Media.