El modo oscuro para correo electrónico está ganando adopción... Aquí se explica cómo admitirlo
El modo oscuro reduce el uso de energía de la pantalla y aumenta el enfoque. Algunos usuarios también afirman que sienten una reducción de la fatiga visual, pero eso es sido cuestionado.
La adopción del modo oscuro continúa creciendo. El modo oscuro ahora está disponible en macOS, iOS, Android y una gran cantidad de aplicaciones, incluidas Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail y Reddit. Sin embargo, no siempre hay soporte total para cada uno de ellos. No es frecuente que haya avances en la tecnología del correo electrónico, por lo que es bueno ver la adopción del soporte del modo oscuro también en el correo electrónico.
Vimos que el 28 % de los usuarios veían contenido en modo oscuro en agosto de 2021. En agosto de 2022, esa cifra había aumentado a casi el 34 %.
Tornasol
Comprender las mejores prácticas, el código a implementar y la asistencia al cliente es fundamental para el éxito de la implementación del modo oscuro. Por ese motivo, el equipo de Uplers publicó esta guía para el modo oscuro. Soporte de correo electrónico.
Recientemente, DK New Media Desarrollé una plantilla de Salesforce Marketing Cloud para un cliente que incorporaba el modo oscuro, contrastando dramáticamente las secciones de correo electrónico cuando se veían en un cliente de correo electrónico. Es un esfuerzo que puede generar participación adicional y tasas de clics para sus suscriptores.
Código de correo electrónico del modo oscuro
Paso 1: incluya metadatos para habilitar el modo oscuro en los clientes de correo electrónico – El primer paso es habilitar el modo oscuro en el correo electrónico para los suscriptores con la configuración del modo oscuro activada. Puede incluir estos metadatos en el etiqueta.
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
Paso 2: Incluya estilos de modo oscuro para @media (prefiere el esquema de color: oscuro) - Escriba esta consulta de medios en su tags to customize the dark mode styles in Apple Mail, iOS, Outlook.
com, Outlook 2019 (macOS) y la aplicación Outlook (iOS). Si no desea un logotipo delineado en su correo electrónico, puede utilizar .dark-img
y .light-img
clases como se muestra 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 el prefijo [data-ogsc] para duplicar estilos de modo oscuro - Incluya estos códigos para que el correo electrónico sea compatible con el modo oscuro en la 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: Incluya estilos de solo modo oscuro en el cuerpo HTML - Sus etiquetas HTML deben tener las clases de modo oscuro correctas.
<!-- 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 -->
Consejos y recursos adicionales del modo oscuro de correo electrónico
He estado trabajando en el Martech Zone boletines diarios y semanales para admitir el modo oscuro... asegúrese de suscríbase aquí. Como ocurre con la mayoría de la codificación de correo electrónico, no es sencillo debido a los diferentes clientes de correo electrónico y sus metodologías de codificación patentadas. Un problema que encontré fueron las excepciones... por ejemplo, quieres texto blanco en un botón independientemente del modo oscuro. La cantidad de código es un poco ridícula… Tuve que tener las siguientes excepciones:
@media (prefers-color-scheme: dark ) {
.dark-mode-button {
color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; }
Algunos recursos adicionales:
- Tornasol - la guía definitiva para el modo oscuro para los especialistas en marketing por correo electrónico.
- CampaignMonitor – la guía para desarrolladores sobre el modo oscuro para correo electrónico.
Si desea que sus plantillas de correo electrónico se conviertan para admitir el modo oscuro, no dude en comunicarse con DK New Media.