Marketing por correo electrónico y automatización

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.

modo oscuro en correos electrónicos
Fuente: Uplers

Douglas Karr

Douglas Karr es CMO de AbrirINSIGHTS y el fundador de la Martech Zone. Douglas ha ayudado a docenas de nuevas empresas exitosas de MarTech, ha colaborado en la diligencia debida de más de $5 mil millones en adquisiciones e inversiones de Martech y continúa ayudando a las empresas a implementar y automatizar sus estrategias de ventas y marketing. Douglas es un orador y experto en transformación digital y MarTech reconocido internacionalmente. Douglas también es autor de una guía para principiantes y de un libro sobre liderazgo empresarial.

Artículos Relacionados

Volver al botón superior
Cerrar

Adblock detectado

Martech Zone puede proporcionarle este contenido sin costo porque monetizamos nuestro sitio a través de ingresos publicitarios, enlaces de afiliados y patrocinios. Le agradeceríamos que elimine su bloqueador de anuncios mientras visita nuestro sitio.