Projeto

Guia definitivo para e-mails no modo escuro

Cristina Lauren

13 de junho de 2022

O modo escuro está na moda atualmente, e por um bom motivo: com apenas alguns toques, você pode mudar a aparência geral do seu dispositivo para um esquema de cores mais escuro, mais agradável aos olhos e mais agradável de se ver em ambientes com pouca luz. Esse interesse também se espalhou para o mundo do marketing por e-mail, incentivando mais desenvolvedores e designers de e-mail a adotarem o lado escuro.

Nesta postagem, falaremos sobre os benefícios do modo escuro, como você pode criar seus próprios e-mails nesse modo e algumas dicas para lidar com clientes de e-mail.

O que é o modo escuro?

O modo escuro é uma tendência de design que inverte o esquema tradicional de cores branco sobre preto. No modo escuro, o texto e outros elementos da interface são exibidos em cores escuras sobre um fundo claro. Isso proporciona uma experiência visualmente agradável e agradável aos olhos ao ler ou usar um aplicativo ou site em um ambiente com pouca luz.

O modo escuro é perfeito para quem passa muito tempo olhando para telas, pois pode ajudar a reduzir a fadiga ocular. Também foi comprovado que melhora a duração da bateria em dispositivos com telas OLED.

Quais são os benefícios dos e-mails no modo escuro?

Embora o modo escuro seja definitivamente esteticamente agradável e moderno, ele também oferece algumas vantagens interessantes para os usuários.

Alivia a fadiga ocular

A luz azul emitida pela maioria das telas dos nossos dispositivos do dia a dia pode, infelizmente, causar muita pressão sobre os olhos. Como muitos de nós trabalhamos longas horas e passamos a maior parte do dia olhando para telas, é mais importante do que nunca cuidar dos nossos olhos. O modo escuro é uma ótima maneira de fazer isso, pois cores mais escuras são muito mais fáceis de ver, o que melhora a legibilidade e o foco.

Reduz o brilho da tela

Quando um e-mail é exibido no modo claro, o fundo claro pode causar um reflexo que dificulta a leitura. Isso é especialmente verdadeiro se você estiver tentando ler seu e-mail no celular enquanto estiver sob luz solar direta. O modo escuro elimina esse problema invertendo as cores para que o texto fique branco e o fundo preto. Isso facilita a leitura do seu e-mail, independentemente de onde você esteja.

Ajuda a economizar a bateria do seu dispositivo

Foi demonstrado que o modo escuro economiza bateria em dispositivos, pois o aparelho não precisa se esforçar tanto ou consumir tanta energia para exibir uma cor escura em comparação com uma clara. Isso é especialmente benéfico em dispositivos móveis, onde a duração da bateria costuma ser menor do que em laptops ou computadores de mesa.

Quais clientes de e-mail suportam o Modo Escuro?

Um número crescente de grandes clientes de e-mail oferecem suporte ao modo escuro até certo ponto, mas aqui está uma análise das opções disponíveis para aplicativos móveis, aplicativos de desktop e web.

Móvel

Área de trabalho

Rede

Como exatamente o modo escuro afeta o design do e-mail?

Embora o modo escuro varie em termos de disponibilidade em determinadas plataformas, também varia em termos de exibição em diferentes clientes. A melhor maneira de categorizar essas diferenças é pela forma como os clientes afetam os elementos do design de um e-mail. Alguns não afetam o design, outros apenas um pouco e outros ainda mudam radicalmente. Vamos dar uma olhada.

Sem alterações

Esses clientes não farão alterações automáticas nos seus e-mails. Isso significa que todos os elementos do seu design, incluindo imagens, cores de fonte e botões, serão exibidos da mesma forma tanto no modo claro quanto no modo escuro.

Correio da Apple
Correio do iPad
Hey.com

Inversão parcial

Alguns clientes afetarão apenas parcialmente a aparência dos seus e-mails ao inverter áreas com fundos claros. Áreas que já parecem escuras não serão afetadas em sua maior parte.

Outlook.com
Outlook (Mac OS)
Aplicativo Outlook (iOS e Android)
Aplicativo Gmail (Android)

Inversão completa

Clientes de inversão de cores afetam fundos claros e escuros. Isso significa que as áreas claras serão invertidas para exibir cores mais escuras, mas também significa que o mesmo acontecerá com cores escuras.

Outlook (Windows)
Aplicativo Gmail (iOS)

Quais são algumas dicas para criar e-mails no modo escuro?

Tornar fundos de imagens transparentes

Sempre que possível, torne os fundos dos seus elementos gráficos transparentes, especialmente logotipos e ícones de redes sociais. A ideia por trás disso é evitar que as imagens sejam exibidas de forma estranha se o cliente de e-mail do destinatário estiver configurado para o modo escuro. Às vezes, se as cores de fundo das suas imagens forem invertidas, você pode ficar com um bloco ao redor da imagem que pode não combinar com o restante do e-mail. Mas quando o fundo é transparente, a imagem terá a mesma aparência, seja no modo escuro ou claro, dando-lhe uma aparência mais limpa e coesa.

Adicione um contorno branco a imagens e textos escuros

Por outro lado, adicionar um contorno claro a certas imagens pode ajudá-las a se destacarem mais. Você provavelmente consideraria isso com um logotipo ou ícone, especialmente aqueles que costumam ter uma cor mais escura. No modo claro, o contorno não aparecerá, mas no modo escuro, ajudará a moldar a imagem e melhorar sua visibilidade.

Esteja ciente, no entanto, de que isso pode não ser o ideal para todos os elementos gráficos, incluindo logotipos. Se adicionar um contorno tornar o logotipo irreconhecível ou for contra os padrões da marca, provavelmente é melhor deixá-lo de lado e usar outra alternativa.

Usar consultas de mídia

Consultas de mídia permitem que você altere o design e o layout do seu e-mail com base nas capacidades do cliente. Esta é provavelmente a maneira mais comum de tornar e-mails compatíveis com diferentes clientes de e-mail.

Por exemplo, você pode detectar se a interface dos destinatários está definida para o modo claro ou escuro e exibir elementos específicos para cada tema. Para isso, use o seguinte bloco CSS:

@media ( prefere-esquema-de-cores : escuro ) {
  .escuro { fundo : #000 ; cor : branco ; }


@media ( prefere-esquema-de-cores : claro ) {
  .luz { fundo : #bbb ; cor : preto ; }
}

O exemplo acima afetaria apenas a cor de fundo e as cores da fonte no e-mail, mas você também pode usar essas consultas de mídia para alterar imagens, botões ou qualquer outro elemento com CSS.

Use o prefixo [data-ogsc] para o Outlook

Infelizmente, consultas de mídia por si só podem não funcionar para destinatários que usam o aplicativo Outlook, mas a boa notícia é que, se você apenas inserir o prefixo [data-ogsc], ainda poderá garantir o modo escuro. Seu código ficaria mais ou menos assim:

@media ( prefere-esquema-de-cores : escuro ) {
[ data-ogsc ] .dark-bg { cor de fundo : #fff ; }

Há alguma desvantagem em usar e-mails no modo escuro?

Embora os e-mails no modo escuro ofereçam uma série de benefícios, há algumas coisas a serem consideradas.

A primeira é que nem todos os clientes de e-mail o suportam ainda. Se os seus destinatários estiverem usando um cliente de e-mail que não suporta o modo escuro, eles verão seu e-mail no modo claro normal. Isso pode levar a alguma inconsistência na sua identidade visual.

Outra desvantagem é que e-mails no modo escuro podem ser difíceis de ler se não forem bem projetados. Você precisa garantir que seu texto seja fácil de ler em um fundo mais escuro e que seus botões de CTA e outros elementos ainda estejam facilmente visíveis.

Há mais alguma coisa que eu deva ter em mente ao criar e-mails no modo escuro?

Certifique-se de que todos os seus links estejam visíveis e fáceis de clicar. O contraste é fundamental quando se trata de links no modo escuro, pois você quer que eles sejam fáceis de identificar em um fundo escuro.
Evite usar cores de texto que possam ser contrastantes com um fundo escuro. Por exemplo, cores como vermelho ou verde podem funcionar bem em um e-mail claro, mas no modo escuro, essas cores podem ser difíceis de ler ou simplesmente desagradáveis à vista. É melhor optar por branco, cinza claro ou cores mais neutras.
Preste atenção às suas escolhas de fontes. Algumas fontes ficam melhores no modo escuro do que outras. Fontes sem serifa tendem a funcionar bem, assim como fontes finas com altos níveis de contraste.

O Modo Escuro pode não ser um recurso novo no mercado de e-mail, mas está crescendo rapidamente em popularidade entre clientes e desenvolvedores de e-mail. Embora haja alguns desafios envolvidos, implementar a compatibilidade com o Modo Escuro em seus designs de e-mail é uma ótima maneira de mostrar ao seu público que você se importa com as preferências dele e pode até mesmo aumentar o engajamento.

Ainda precisa de orientação para criar e-mails no modo escuro? A Scalero pode ajudar! Nossos desenvolvedores de e-mail especialistas podem criar e programar modelos personalizados que ficarão ótimos tanto no modo claro quanto no modo escuro.

Entre em contato conosco para começar !