E-mail marketing e automação

O modo escuro para e-mail está sendo adotado… Veja como apoiá-lo

O modo escuro reduz o uso de energia da tela e aumenta o foco. Alguns usuários também afirmam que sentem menos cansaço visual, mas isso é foi questionado.

A adoção do modo escuro continua a crescer. O modo escuro agora está disponível em macOS, iOS, Android e em uma série de aplicativos, incluindo Microsoft Outlook, Safari, Reddit, Twitter, YouTube, Gmail e Reddit. No entanto, nem sempre há suporte total para cada um. Não é sempre que há avanços na tecnologia de e-mail, por isso é bom ver a adoção do suporte ao modo escuro no e-mail também.

Vimos 28% dos usuários visualizando no Modo Escuro em agosto de 2021. Em agosto de 2022, esse número aumentou para quase 34%.

Tornassol

Compreender as práticas recomendadas, o código a ser implementado e o suporte ao cliente é fundamental para o sucesso da implementação do modo escuro. Por esse motivo, a equipe da Uplers publicou este guia para o modo escuro suporte de e-mail.

Recentemente, o co-fundador da DK New Media desenvolveu um modelo Salesforce Marketing Cloud para um cliente que incorporava o Modo Escuro, contrastando dramaticamente as seções de email quando visualizadas em um cliente de email. É um esforço que pode gerar engajamento adicional e taxas de cliques para seus assinantes.

Código de e-mail do modo escuro

Etapa 1: incluir metadados para ativar o modo escuro em clientes de e-mail – A primeira etapa é habilitar o modo escuro no e-mail para assinantes com as configurações do modo escuro ativadas. Você pode incluir esses metadados no marcação.

<meta name="color-scheme" content="light dark"> 
<meta name="supported-color-schemes" content="light dark">

Etapa 2: Incluir estilos de modo escuro para @mídia (prefere-esquema de cores: escuro) - Escreva esta consulta de mídia em seu incorporado tags to customize the dark mode styles in Apple Mail, iOS, Outlook.com, Outlook 2019 (macOS) e aplicativo Outlook (iOS). Se não quiser um logotipo delineado em seu e-mail, você pode usar .dark-img e .light-img aulas conforme mostrado abaixo.

@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; } 
}

Etapa 3: use o prefixo [data-ogsc] para duplicar estilos de modo escuro - Inclua esses códigos para que o e-mail seja compatível com o modo escuro no aplicativo 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; }

Etapa 3: inclua estilos somente modo escuro no corpo do HTML - Suas tags HTML devem ter as classes de modo escuro corretas.

<!-- 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 -->

Dicas e recursos adicionais do modo escuro de e-mail

Tenho trabalhado no Martech Zone boletins informativos diários e semanais para oferecer suporte ao modo escuro… certifique-se de inscreva-se aqui. Tal como acontece com a maioria dos códigos de e-mail, não é simples devido aos diferentes clientes de e-mail e às suas metodologias de codificação proprietárias. Um problema que encontrei foram exceções… por exemplo, você deseja texto branco em um botão, independentemente do modo escuro. A quantidade de código é um pouco ridícula… Tive que ter as seguintes exceções:

@media (prefers-color-scheme: dark ) { 
.dark-mode-button {
	color: #ffffff !important;
}
}
[data-ogsc] .dark-mode-button { color: #ffffff; color: #ffffff !important; } 

Alguns recursos adicionais:

  • Tornassol - o guia definitivo para o modo escuro para profissionais de marketing por e-mail.
  • CampaignMonitor – o guia do desenvolvedor para o modo escuro para e-mail.

Se você deseja que seus modelos de e-mail sejam convertidos para suporte ao modo escuro, não hesite em entrar em contato com DK New Media.

modo escuro em e-mails
Fonte: Uplers

Douglas Karr

Douglas Karr é CMO de AbrirINSIGHTS e o fundador da Martech Zone. Douglas ajudou dezenas de startups de MarTech bem-sucedidas, auxiliou na due diligence de mais de US$ 5 bilhões em aquisições e investimentos da Martech e continua a auxiliar empresas na implementação e automatização de suas estratégias de vendas e marketing. Douglas é um especialista e palestrante em transformação digital e MarTech reconhecido internacionalmente. Douglas também é autor publicado de um guia para leigos e de um livro sobre liderança empresarial.

Artigos Relacionados

Voltar ao topo botão
Fechar

Adblock detectado

Martech Zone é capaz de fornecer a você esse conteúdo sem nenhum custo porque monetizamos nosso site por meio de receita de anúncios, links de afiliados e patrocínios. Agradeceríamos se você removesse seu bloqueador de anúncios ao visualizar nosso site.