O modo escuro para o correo electrónico está gañando adopción... Aquí tes como apoialo
O modo escuro reduce o consumo de enerxía da pantalla e aumenta o foco. Algúns usuarios tamén afirman sentir unha fatiga ocular reducida, pero iso é foi cuestionado.
A adopción do modo escuro segue crecendo. O modo escuro agora está dispoñible en macOS, iOS, Android e nunha serie de aplicacións, incluíndo Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail e Reddit. Non obstante, non sempre hai apoio total en cada un. Non é frecuente que haxa avances na tecnoloxía de correo electrónico, polo que é bo ver a adopción do soporte do modo escuro tamén no correo electrónico.
En agosto de 28, vimos que o 2021 % dos usuarios vían o modo escuro. En agosto de 2022, ese número aumentara ata case o 34 %.
Tornasol
Comprender as prácticas recomendadas, o código para implementar e a asistencia ao cliente é fundamental para o éxito da implementación do modo escuro. Por ese motivo, o equipo de Uplers publicou esta guía para o modo escuro soporte por correo electrónico.
Recentemente, DK New Media desenvolveu un modelo de Salesforce Marketing Cloud para un cliente que incorporaba o modo escuro, contrastando drasticamente as seccións de correo electrónico cando se visualizan nun cliente de correo electrónico. É un esforzo que pode aumentar a participación e as taxas de clics para os teus subscritores.
Código de correo electrónico en modo escuro
Paso 1: inclúe metadatos para activar o modo escuro nos clientes de correo electrónico – O primeiro paso é activar o modo escuro no correo electrónico para os subscritores coa configuración do modo escuro activada. Podes incluír estes metadatos no ficheiro etiqueta.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Paso 2: inclúe estilos de modo escuro para @media (prefers-color-scheme: dark) - Escribe esta consulta multimedia no teu dispositivo incrustado tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) e Outlook App (iOS). Se non queres un logotipo delineado no teu correo electrónico, podes usalo .dark-img
.light-img
clases como se mostra a continuación.
@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; }
}
Paso 3: use o prefixo [data-ogsc] para duplicar estilos de modo escuro - Inclúe estes códigos para que o correo electrónico sexa compatible co modo escuro na aplicación Outlook para 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; }
Paso 3: inclúe estilos só en modo escuro no corpo HTML - As túas etiquetas HTML deben ter as clases correctas de modo escuro.
<!-- 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 consellos por correo electrónico sobre o modo escuro e recursos adicionais
Estiven traballando no Martech Zone boletíns diarios e semanais para admitir o modo escuro... asegúrate de facelo subscríbete aquí. Como ocorre coa maioría da codificación de correo electrónico, non é sinxelo debido aos diferentes clientes de correo electrónico e ás súas metodoloxías de codificación propietarias. Un problema que atopei foron as excepcións... por exemplo, queres texto branco nun botón independentemente do modo escuro. A cantidade de código é un pouco ridícula... Tiven que ter as seguintes excepcións:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Algúns recursos adicionais:
- Tornasol - a guía definitiva para o modo escuro para os comerciantes de correo electrónico.
- CampaignMonitor – guía do programador para o modo escuro para o correo electrónico.
Se queres converter os teus modelos de correo electrónico para compatibilidade con modo escuro, non dubides en poñerte en contacto DK New Media.