O básico do modo escuro de e-mail
Todo mundo sabe que a luz costuma vencer a escuridão. Basta olhar para Star Wars ou O Senhor dos Anéis… ou A Divina Comédia, por exemplo. A cultura pop — ou simplesmente a cultura — nos ensinou que o lado sombrio não é onde você quer estar. E, por muito tempo, nós acreditamos nisso. Mas, nos últimos anos, o lado escuro dos nossos aplicativos se tornou a escolha preferida de muitos usuários. Não é apenas no Discord ou no Twitter – o modo escuro está em praticamente todos os lugares, incluindo o e-mail.
Nós entendemos. O desenvolvimento de e-mail já é bem difícil. Mas essa não é uma tendência da qual você possa fugir. Então, prepare-se para aprender o que torna o modo escuro no e-mail tão popular, como ele pode ajudar sua entregabilidade e como otimizar seus e-mails para o modo escuro.
O que é o modo escuro?
Não há definições complicadas aqui — o modo escuro do e-mail é basicamente o que o nome sugere. O modo escuro é uma configuração que os usuários podem ativar para que o texto de um aplicativo seja exibido em um fundo preto em vez do seu fundo claro habitual. Nem todos os sites ou aplicativos têm o recurso de modo escuro, mas ele é comum em espaços com muito texto e fundo branco, como ferramentas de redes sociais (Twitter, Instagram) e, claro, clientes de e-mail.
Quais são os benefícios do modo escuro
A base de fãs do modo escuro já é motivo suficiente para motivar você a garantir que seus e-mails sejam otimizados para esse recurso. Quase 82% dos usuários entrevistados pela Android Authority usam as configurações de modo escuro apenas em aplicativos e smartphones. Tradicionalmente, o modo escuro tem sido adotado e promovido por um público mais técnico, mas estatísticas recentes do iPhone mostram que os usuários passam apenas mais de 50% menos tempo operando seus dispositivos quando o modo escuro está ativado. Essa é uma representação de como o modo escuro torna a experiência do usuário mais eficiente. Há muitas alegações sobre os motivos pelos quais o modo escuro é superior (e entraremos em mais detalhes sobre isso), mas aqui estão os principais:
- Menos tensão na sua visão
- Redução da luz azul
- Economia de energia (consome menos bateria)
- Mais opções de design personalizado
Independentemente dos motivos, as estatísticas mostram claramente que o modo escuro nos dispositivos é uma opção obrigatória. Mas como isso funciona especificamente para o e-mail?
Como é o modo escuro no e-mail?
O modo escuro transforma as cores de fundo em tons escuros e também transforma textos de cor escura em claros para que as palavras realmente apareçam no novo fundo. Então, como isso se parece em uma caixa de entrada?
Vamos usar a própria newsletter da Mailgun como exemplo. Não há apenas alterações na cor do fundo e no corpo do texto, mas também no nosso logotipo e nos ícones das redes sociais.
Outro exemplo é a caixa de entrada do Gmail e a opção de alternar entre o modo escuro e o modo clássico “claro” ou “dia”.
Fonte: Green Eye IT
O modo “noturno” do Gmail não muda nada nas abas, na barra lateral ou no layout geral. As únicas alterações são a cor de fundo e as cores da fonte na exibição.
Fonte: TechBlogBox
A mudança para o modo escuro não altera nada nas abas do Gmail ou no seu layout geral e usabilidade. As únicas alterações são a cor de fundo e as cores da fonte na exibição.
Essas pequenas mudanças podem parecer frustrantes — qual é o objetivo do modo escuro, afinal?
Por que o modo escuro existe?
Existem alguns motivos simples para a existência do modo escuro: muitas pessoas acham que ele, literalmente, descansa os olhos. Embora haja pesquisas conflitantes sobre se o modo escuro realmente reduz a tensão ocular e a exposição tecnológica à luz azul, algumas pessoas preferem o fundo mais escuro. Além disso, o modo escuro pode prolongar a duração da bateria do seu celular ou notebook ao potencialmente consumir menos energia.
O maior ponto a favor do modo escuro é provavelmente sua função na acessibilidade em e-mails. Os altos contrastes de cores e o brilho reduzido do modo escuro são geralmente considerados mais legíveis para pessoas com deficiências visuais, como sensibilidade à luz.
Embora cada um tenha seu motivo preferido para usar o modo escuro, sua crescente popularidade nos últimos anos é difícil de negar — tanto que os principais clientes de e-mail oferecem suporte às configurações de modo escuro para seus usuários.
Quais clientes de e-mail têm configurações de modo escuro?
Talvez seja mais fácil listar quais clientes de e-mail não oferecem algum tipo de interface de modo escuro. Mas, para uma referência rápida, aqui estão os principais clientes de e-mail que usam configurações de modo escuro para e-mail:
- Gmail (via navegador web, aplicativo móvel para Android e aplicativo móvel para iOS)
- Outlook (via navegador web do Outlook.com, aplicativo de desktop para Mac, aplicativo de desktop para Windows, aplicativo móvel para Android e aplicativo móvel para iOS)
- Plataformas do Apple Mail (via aplicativo de desktop do Apple Mail, aplicativo do Mail para iPhone e aplicativo do Mail para iPad)
- Yahoo (via navegador web, aplicativo móvel para Android e aplicativo móvel para iOS)
De acordo com nossa Engajamento de e-mail de 2021 relatório, é praticamente garantido que a maioria dos seus contatos usará pelo menos um desses provedores. O desafio, no entanto, é que todos esses clientes renderizam os e-mails em modo escuro de forma um pouco diferente. Alguns vão inverter as cores automaticamente, outros não. Alguns terão suporte a @media (prefers-color-scheme), enquanto outros (estamos olhando para você, Gmail) não terão. Portanto, ao enviar e-mails, sua melhor aposta para o máximo engajamento é garantir que eles fiquem ótimos tanto no modo claro quanto no modo escuro. Você deve estar se perguntando: como? E por quê? Bem, vamos nos aprofundar em como o modo escuro pode afetar sua entregabilidade e no que você pode fazer para garantir que você fique do lado bom do modo escuro.
Como mudar seus e-mails para o modo escuro?
É importante lembrar que as configurações do modo escuro são principalmente uma preferência controlada pelo usuário, e cada cliente de e-mail, dispositivo ou serviço terá seus próprios processos e opções de design para os usuários que desejam implementar esse recurso.
Dito isso, nem todos os clientes de e-mail são iguais quando se trata da otimização para o modo escuro. A maior parte do trabalho pesado de design e otimização deve ser feita no lado do desenvolvimento de e-mail, e seus e-mails devem ser testados e pré-visualizados para evitar problemas de entregabilidade.
Como o modo escuro pode afetar a entregabilidade de e-mail?
Há um grande motivo pelo qual o modo escuro pode impactar sua entregabilidade: os usuários de e-mail são um grupo inconstante. Muitos clientes de e-mail não otimizam automaticamente os recursos de imagem dos e-mails (logotipos, fotos, etc.) para o modo escuro, e um conteúdo não otimizado pode fazer com que seus e-mails pareçam confusos e difíceis de ler.
A maioria dos assinantes que usam o modo escuro não vai perder tempo tentando descobrir como ler seus e-mails com aparência ruim. E por que fariam isso? Em vez disso, vão ignorá-los, excluí-los ou marcá-los como spam — e tudo isso tem um impacto negativo na sua entregabilidade.
Por outro lado, se você dedicar um tempo para garantir que seus e-mails tenham a melhor aparência, mesmo no escuro, é muito mais provável que eles sejam lidos e gerem engajamento positivo. E lembre-se: boas práticas de e-mail e métricas de engajamento significam uma boa entregabilidade.
Então, quais são alguns ajustes rápidos que você pode fazer no seu design de e-mail para otimizar suas mensagens para o modo escuro?
Como você pode otimizar seus e-mails para o modo escuro?
Você tem perguntas, e nós temos as respostas. Reunimos algumas das melhores e mais fáceis maneiras de manter a boa aparência dos seus e-mails no modo escuro.
Dicas de design de e-mail para o modo escuro
Otimizar seus e-mails e modelos para o modo escuro não precisa ser nada difícil. Abaixo, reunimos algumas das nossas melhores dicas de design para transformar e-mails claros em escuros.
Deixe as suas imagens transparentes
Deixar as imagens do seu e-mail transparentes é tão simples quanto escolher imagens sem um fundo colorido ou branco. Imagens transparentes permitem que você coloque logotipos, fotos e muito mais em qualquer fundo de e-mail sem ter conflito de cores. As imagens com fundo transparente que você encontra online costumam ter um fundo xadrez em branco e cinza, como no exemplo do nosso antigo logotipo abaixo.
Enquanto isso, as imagens com cores de fundo escuras manterão esses fundos, não importando a aparência do e-mail.
Certifique-se de escolher imagens que tenham a mesma aparência em qualquer fundo e de salvá-las como arquivos PNG transparentes. Quando seu usuário abrir seu e-mail no modo escuro, suas imagens parecerão perfeitas e limpas, e seus usuários poderão visualizá-las sem um layout confuso ou que cause distração. Lembre-se de também testar o contraste do seu logotipo em um fundo claro e em um escuro — se o seu logotipo não se destacar, quem está lendo não vai saber que é você.
Adicione um contorno branco em fontes e imagens escuras
Embora você possa querer evitar alguns fundos de imagem para que seus gráficos se integrem ao modo escuro, às vezes você também pode querer chamar atenção para imagens e fontes escuras a fim de melhorar a visibilidade delas. É muito fácil adicionar um contorno branco em suas imagens e textos usando ferramentas de edição de imagem como o Photoshop.
Dessa forma, suas imagens ficam exatamente da mesma maneira que sempre aparecem no modo claro. No entanto, elas acabam se destacando e ficando legíveis para os usuários no modo escuro. Os usuários ignorarão rapidamente seus e-mails se não conseguirem lê-los, mas os contornos são uma maneira simples de manter a legibilidade e o efeito visual.
Considere e-mails em texto simples
E-mails em texto simples não são algo a se ignorar. Eles adicionam autenticidade e eliminam os excessos desnecessários que distraem — os designs mais simples são até uma tendência para este ano. Talvez você não use muitas imagens ou logotipos elaborados no seu programa de e-mail, ou prefira não lidar com o incômodo. A vantagem dos e-mails em texto simples é que eles sempre vão ser exibidos no modo escuro sem problemas — um fundo claro fica escuro, o texto preto se torna branco e pronto, tudo certo.
Se você sabe que a sua lista de contatos gosta de e-mails diretos sem muitos enfeites, os e-mails em texto simples podem ser exatamente o que você precisa. Eles ficarão com uma boa aparência, seus usuários receberão o que querem e sua entregabilidade estará em ótima forma.
Dicas de programação para o modo escuro
A renderização de e-mails é o pesadelo da equipe de desenvolvimento. E, obviamente, não seria diferente com o modo escuro. Com cada cliente renderizando os e-mails em modo escuro de forma diferente, é difícil criar uma mensagem que tenha a mesma aparência em todos os provedores.
Junto a essas recomendações universais de design, existem várias correções na programação que você pode usar para criar uma experiência personalizada de modo escuro nos seus e-mails.
Ative o modo escuro com meta tags e o seletor :root
Use o código na tag para avisar ao cliente de e-mail que o seu e-mail tem suporte para os modos claro e escuro.
Se o seu usuário tiver essa configuração aplicada no seu aplicativo de e-mail, as meta tags abaixo vão garantir que o modo escuro seja ativado:
<meta name="color-scheme" content="light dark">rnrn<meta name="supported-color-schemes" content="light dark">
O seletor :root vai permitir que o cliente de e-mail procure o estilo do esquema de cores que ele precisa sem ter que ler todos os estilos.
<style type="text/css">rn:root {rn color-scheme: light dark;rn supported-color-schemes: light dark;rn}rn</style>
Adicione estilos de modo escuro por meio da media query
Você pode criar estilos CSS personalizados para determinar qual será a aparência dos diferentes elementos ao usar o modo escuro, como logotipos, cor da fonte, plano de fundo ou o texto dos links.
Adicione essa media query ao seu bloco para personalizar esses elementos com os valores de cor de preferência da sua marca:
@media (prefers-color-scheme: dark ) {rn /* Shows dark mode logo */rn.dark-logo-wrapper,.dark-logo {rn display: block !important;rn}rn /* Hides light mode logo */rn .light-logo {rn display: none !important;rn}rnrn /* Creates a custom dark mode background color */rn .body {rn background-color: #282828 !important;rn color: #ffffff !important;rn}rnrn /* Sets the font color */rn h1, h2, h3, p, td {rn color: #ffffff !important;rn}rnrn/* Sets the text link color */ rn a { rncolor: #43D6B7 !important;rn}rnrn/* More styles here */ rn}
Você pode adicionar isso à seção do seu e-mail para criar estilos personalizados de modo escuro para iOS, Apple Mail e algumas versões do Outlook.
Adicione as classes e estilos corretos aos seus elementos específicos de modo escuro
Se você tiver versões claras e escuras de determinados elementos, como imagens, será preciso garantir que os estilos criados para ambos os modos apareçam quando devem. Isso é especialmente importante se você tem opções claras e escuras para o seu logotipo e quer alternar entre elas, dependendo de o destinatário usar o modo escuro ou não.
Um exemplo de como isso ficaria no seu HTML está abaixo:
<!-- start HEADER_LOGO -->rn<a href="https://mailgun.com/" target="_blank">rnrn<img src="https://www.yoursite.com/images/mailgun-light.png" class="light-logo" />rnrn<!-- Hide the dark logo in Outlook and Windows 10 Mail with conditional code but it will be revealed if dark mode is triggered -->rn<div class="dark-logo-wrapper" style="mso-hide: all; display: none;">rn <img src="https://www.yoursite.com/images/mailgun-dark.png" class="dark-logo" style="display: none;" />rn</div> rnrn</a>rn<!-- end HEADER_LOGO -->rn
Nem todas essas correções funcionarão em todos os clientes e, por mais que a gente tente, nossos e-mails no modo escuro poderão acabar com uma aparência um pouco diferente em cada aplicativo e provedor. Se quiser ter certeza, teste a renderização do seu e-mail antes de enviar.
Dicas finais antes de enviar
O modo escuro de e-mail se tornou um recurso popular desde a sua criação. Você deve se preparar para otimizar os e-mails para a sua lista de contatos se quiser gerar engajamento com eles e manter uma entregabilidade saudável.
Aqui estão algumas dicas fáceis para você lembrar na hora de fazer envios no modo escuro:
- Escolha imagens e logotipos que se destaquem tanto no modo claro quanto no modo escuro.
- Sempre que possível, use imagens transparentes e sem fundo.
- Adicione um contorno branco para destacar fontes, logotipos e imagens escuras.
- Se isso fizer sentido para os seus contatos, considere enviar e-mails em texto simples para sua lista visando ter uma exibição automática e sem complicações.
Acima de tudo, será preciso testar seus e-mails antes de enviar. O mundo do e-mail está sempre mudando, e o modo escuro também, então certifique-se de testar seus e-mails nos clientes de e-mail mais populares das suas listas. Você pode fazer isso manualmente ou usando ferramentas de teste de e-mail como Litmus ou Email on Acid.
Vamos encarar os fatos. Isso pode lhe causar algumas dores de cabeça e até criar uma certa bagunça, mas o lado escuro não vai a lugar nenhum. O modo escuro de e-mail definitivamente tem suas vantagens quando se trata de entregabilidade e acessibilidade, então chegou a hora de simplesmente adotá-lo. Além disso, você realmente não precisa do Darth Vader, do Sauron ou de uma visita ao nono círculo do inferno para fazer isso direito.
