Email Marketing & Automatización

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.

modo escuro nos correos electrónicos
fonte: Uplers

Douglas Karr

Douglas Karr é CMO de OpenINSIGHTS e o fundador da Martech Zone. Douglas axudou a decenas de startups exitosas de MarTech, axudou na debida dilixencia de máis de 5 millóns de dólares en adquisicións e investimentos en Martech e segue axudando ás empresas a implementar e automatizar as súas estratexias de vendas e mercadotecnia. Douglas é un experto e relator de MarTech en transformación dixital recoñecido internacionalmente. Douglas tamén é autor publicado dunha guía de Dummie e dun libro de liderado empresarial.

artigos relacionados

Botón de volta ao principio
preto

Adblock detectado

Martech Zone pode fornecerche este contido sen ningún custo porque monetizamos o noso sitio mediante ingresos publicitarios, ligazóns de afiliados e patrocinios. Agradeceríamos que elimines o teu bloqueador de anuncios mentres visitas o noso sitio.