Crie e-mails compatíveis com o modo escuro

O modo escuro está começando a ser usado cada vez mais, com 34% dos usuários usando-o para abrir e-mails em agosto de 2022 (Fonte: Litmus). Essa preferência é motivada pelo conforto que proporciona, reduzindo o cansaço visual, melhorando a visibilidade do conteúdo e por muitos outros motivos. Muitos destinatários de e-mail optam pelo modo escuro por esses motivos. Portanto, é fundamental projetar seus e-mails para que sejam compatíveis com o modo escuro.

O que é o modo escuro?

O modo escuro é uma configuração de exibição que pode ser ativada ou desativada em muitos dispositivos, aplicativos e sistemas operacionais. Quando ativado, ele muda a cor da interface do usuário.

Quanto aos e-mails, o modo escuro inverte as cores da interface dos destinatários e do conteúdo do e-mail. Isso significa que os destinatários de e-mail terão um plano de fundo escuro ou uma cor invertida para planos de fundo não escuros, bem como uma cor de texto invertida para evitar que ele se misture ao plano de fundo.
Aqui está um exemplo de um e-mail no modo claro e escuro:

Dark_mode_email_light_version_en-us.jpg Dark_mode_email_dark_version_en-us.jpg

Quais plataformas de e-mail suportam o modo escuro?

Dependendo da plataforma de e-mail usada, os e-mails podem ser exibidos de forma diferente no modo escuro. Isso ocorre porque as plataformas de e-mail usam três técnicas principais para ativar o modo escuro:

Plataforma de e-mail Técnica utilizada
Apple Mail (MacOS)

Inalterado

Seu e-mail não será afetado quando o modo escuro estiver ativado.

iPhone / iPad (iOS 13)
AOL
Yahoo Mail
Aplicativo do Gmail para Android

Parcialmente invertido

Seu e-mail aparecerá com fundos mais escuros e texto mais claro, enquanto as partes que já são escuras permanecerão escuras.

Aplicativo Outlook (iOS/Android)
Outlook 2019 (MacOS)
Outlook.com
Office 365 (MacOS)
Aplicativo do Gmail para iOS

Totalmente invertido

Seu e-mail inverterá os fundos claros para escuros e inverterá os fundos escuros existentes para claros.

Outlook 2019 (Windows)
Outlook 2021 (MacOS/Windows)
Office 365 (Windows)
Windows Mail

Otimize seus e-mails para o modo escuro

Aqui você encontrará informações sobre como otimizar seus e-mails para o modo escuro.

💡 É bom saber
Sugerimos que você mantenha a simplicidade ao projetar seus e-mails, especialmente para o texto do seu e-mail, é melhor usar a fonte preta padrão.

Antes de começar a projetar seu e-mail na Brevo, há algumas coisas que você pode fazer por conta própria com suas imagens para tornar seus e-mails compatíveis com o modo escuro:

Use PNGs transparentes

Os PNGs transparentes são imagens sem fundo e geralmente são marcados por um padrão quadriculado. Recomendamos que você use esse tipo de imagem em seu logotipo.

Dark_mode_email_png_model_en-us.png

O uso de imagens transparentes permite que você mantenha uma aparência natural em e-mails com fundos brancos e pretos. Além disso, ele aprimora a experiência do usuário, evitando que ele se depare com fundos brilhantes ao ler e-mails no modo escuro.
Aqui está um exemplo de uma ação que você deve ou não fazer:

Dark_mode_email_example_transparent_PNG_en-us.jpg

Cortar as imagens como um profissional

Se suas imagens não forem PNG (ou seja, não tiverem um fundo transparente), considere como elas ficarão no modo escuro. Por exemplo, se o plano de fundo da sua imagem for cortado próximo ao logotipo ou ao texto, seu e-mail não terá uma aparência profissional no modo escuro, como você pode ver no exemplo abaixo. Para evitar isso, corte a imagem com fundo suficiente ou espaço em branco ao redor dela.

Dark_mode_email_crop_images_2_en-us.png

Adicione brilho, bordas ou sombras aos seus PNGs escuros

Adicione brilho, bordas ou sombras aos seus PNGs escuros para garantir que eles possam ser vistos no modo escuro, independentemente da cor do plano de fundo. Especialmente se estiver usando um logotipo escuro em um fundo branco no modo claro, é possível adicionar um brilho, uma borda ou uma sombra que combine com a cor do fundo. Existem ferramentas on-line que permitem que você as adicione. 
Aqui está um exemplo de um PNG de texto com brilho:

Dark_mode_email_glow_image_dark_en-us.jpg

Adicionar cor de fundo às imagens

Se não quiser ou não puder adicionar brilho, borda ou sombra, você pode adicionar um fundo colorido no editor de arrastar e soltar da Brevo ao criar seu e-mail. Adicione uma cor de fundo ao seu bloco de estilos e escolha tons mais claros, como cinza, para garantir a visibilidade.

Dark_mode_email_background-color_en-us.png

Dark_mode_email_background-color_result_en-us.png

Pré-visualize e teste seu e-mail no modo escuro

Antes de enviar seu e-mail, recomendamos que o pré-visualize em diferentes plataformas de e-mail. Isso pode ser feito diretamente da Brevo após a criação do e-mail e permite que você verifique a aparência do e-mail, inclusive no modo escuro. As pré-visualizações nem sempre são precisas. Recomendamos que você envie um e-mail de teste se tiver ativado o modo escuro em seus dispositivos. Para saber mais, consulte o artigo dedicado Pré-visualizar e testar a campanha de e-mail.

Dark_mode_email_preview_en-us.png

🤔 Dúvidas?

Em caso de dúvida, sinta-se à vontade para entrar em contato com nossa equipe de suporte, criando um tíquete a partir da sua conta. Caso ainda não tenha uma conta, entre em contato conosco aqui.

Se você está procurando ajuda com um projeto usando o Brevo, podemos encontrar o parceiro especialista certificado em Brevo.

💬 Este artigo foi útil?

Utilizadores que acharam útil: 13 de 30