Modo escuro para e-mails: O que é e como otimizar seus e-mails

Designers e pesquisadores discutem amplamente se o modo escuro do e-mail é bom pra saúde e necessário, mas as pessoas estão usando-o cada vez mais.

O que é o modo escuro?

O modo escuro exibe textos, ícones e elementos da interface do usuário em cores claras com fundos escuros. 

Como funciona? Alguns acreditam que o modo escuro muda as cores para cores contrastantes (opostas na paleta de cores) quando um e-mail é aberto em um dispositivo com o modo escuro.

Mas isso não é bem verdade. Ele não inverte verde para vermelho, nem azul para ouro ou amarelo. O modo escuro utiliza tons mais claros das mesmas cores (caso você não tenha definido uma cor específica como plano de fundo do conteúdo).

Como ele faz isso? Um cliente de e-mail detecta a cor do plano de fundo do conteúdo do e-mail. Então ele aplica o plano de fundo escuro, se não estiver definido, e aplica tons de contraste das cores do conteúdo do e-mail.

(E-mail em modo claro)

(e-mail em modo escuro)

No entanto, quando se trata de um fundo preto - o modo escuro o torna branco no Gmail no iOS e Android. O cinza escuro muda para cinza claro etc. 

O que torna o modo escuro tão popular?

Esse recurso está ficando tão popular por vários motivos:

• é recomendado por oftalmologistas

Diz-se que um texto claro sobre fundo escuro reduz a fadiga ocular. No entanto, os oftalmologistas ainda discutem sobre isso;

• está na moda agora

Bem. Isso é verdade. Muitas pessoas o ativam apenas porque é algo novo e querem experimentá-lo;

• é simplesmente confortável

Alguns usuários acham mais confortável ler em telas escuras, especialmente quando é noite;

• economiza sua bateria

O Google confirmou que o modo escuro no Android economiza sua bateria em até 50%. No entanto, isso é relevante apenas para as telas OLED.
O canal Wired afirma que o modo escuro não tem impacto na vida útil da bateria, quando se trata de telas de LCD, que são amplamente usadas pela Apple. Aliás, a Apple prometeu trocar as telas de LCD de seus dispositivos em favor das telas de OLED.

Lista de clientes de e-mail que suportam o modo escuro e como seus e-mails são renderizados neles

O modo escuro está ficando popular. Somente as versões mais recentes dos sistemas operacionais oferecem suporte e processam os e-mails corretamente.

• Aplicativo do Gmail no Android (Android 10)

Ele inverte as cores totalmente: não apenas para a interface do usuário, mas os e-mails também são exibidos no modo escuro.

Testamos uma grande variedade de e-mails. Um deles tinha inicialmente um fundo escuro e uma linha/faixa branca com um menu. 

O Android 10 não inverteu cores escuras para claras, mas mudou minha linha branca para escura.

(e-mail no Android 10, tema escuro)

Importante notar:

Como dissemos, apenas a versão mais recente do Android - o Android 10 - processa os e-mails no modo escuro. Mas existem outras condições obrigatórias para levar em consideração se você quiser ver e-mails no modo escuro do Android. Elas são as seguintes:

1. Seu aplicativo do Gmail deve ser baixado da Google PlayStore, não o aplicativo que estava instalado no seu telefone por padrão. Os telefones Samsung os têm algumas vezes.

2. Você deve ter a versão mais recente do aplicativo Gmail, atualizada de preferência em novembro de 2019. 

• Aplicativo do Gmail no iOS (iOS 13)

O que o aplicativo Gmail no iOS faz?

Meu e-mail estava originalmente escuro com a linha do menu clara. O iOS inverteu as cores escuras para claras e de claras para escuras.

Importante notar:

O Gmail ainda está lançando o Modo Escuro para e-mails no iOS. Ele deve estar totalmente visível e disponível para todos os usuários em duas semanas. Mas o mesmo processo para o Android levou o Google aproximadamente dois meses em vez de duas semanas. Nós apenas precisamos ser pacientes.

• O aplicativo nativo Mail do iPhone (Mail nativo do iOS)

O aplicativo permite ativar o modo escuro para a interface do usuário e a área de e-mail. Se você definiu uma cor de fundo transparente, o iPhone Mail o tornará escuro.

Caso contrário, seus e-mails terão a mesma aparência nos modos escuro e claro. 

• Apple Mail no macOS 

Aqui é a mesma situação. O aplicativo permite ativar o modo escuro para a interface do usuário, mas não afeta o design dos seus e-mails em HTML no modo escuro.

• Gmail no macOS e Windows

Ele não inverte cores, nem parcialmente - chame como quiser.

O aplicativo permite que você ative o modo escuro da interface do usuário, mas a área de e-mail permanece clara - portanto, isso não afeta a renderização do e-mail. Seus e-mails serão exatamente iguais nos modos escuro e claro.

• Aplicativo Outlook (2019) no Android 

Diz-se que ele inverte parcialmente as cores. Devo confessar que não pude testar porque não tenho o Outlook 2019 no meu smartphone.

• Aplicativo Outlook (2019) no iOS

Diz-se que ele inverte parcialmente as cores. Mas também não tenho o aplicativo Outlook 2019 no iPhone.

• Outlook 2019 no macOS

Inverte totalmente as cores. Ele funciona exatamente como o Android 10 - deixa o design escuro do jeito que é e transforma um fundo claro em escuro.

• Outlook.com

A situação com o Outlook.com é muito interessante.
Diz-se que ele inverte parcialmente as cores. Mas quando eu envio um e-mail com um design escuro, o Outlook.com muda as cores para cores claras no modo noturno. E quando envio um e-mail com o design feito em cores claras, o Outlook.com inverte para cores escuras.

Fatos interessantes sobre o modo escuro no Outlook.com:

1. O Outlook.com não afeta o design dos e-mails com conteúdo AMP.

Se você definiu um plano de fundo branco - é isso que seus usuários verão neste cliente de e-mail específico, mesmo com o modo escuro ativado.

2. O Outlook.com permite que você veja e-mails nos modos claro e escuro, sem alterar a cor da interface do usuário.

Para transformar os e-mails de claros para escuros e vice-versa, basta clicar neste botão:

3. O Outlook não inverte as cores da borda.

Dicas para otimizar e-mails no modo escuro

Não tente trapacear fazendo com que seus e-mails sejam renderizados como nos modos regulares. Porque se as pessoas usam esse modo, elas o fazem por um motivo. E devemos respeitar isso.

Portanto, para otimizar seu template de e-mail para o modo escuro, você deve:

1. Trabalhar nas imagens

a) Use ícones e imagens com fundos transparentes ou verifique se eles têm o mesmo tamanho para evitar isso:

Você concorda que este não é o melhor exemplo de um e-mail com tema escuro, pois imagens com diversos tamanhos de plano de fundo arruinam toda a apresentação?

b) Tenha cuidado com imagens transparentes

Você deve usar imagens com fundos transparentes para cartões de produtos.

No entanto, as fotos das pessoas ficariam melhores se elas tivessem um fundo específico. 

2. Trabalhar em logotipos

a) Seus logotipos não podem ter fundos

b) Que seus logotipos não sejam escritos em preto para renderizar bem tanto nos temas escuros como nos claros

Alguns desenvolvedores sugerem que você use dois logotipos e até forneça uma amostra de código que garanta que o logotipo preto seja exibido no modo claro e o logotipo branco - no modo escuro.

Testamos - o código não ajudou. Mas tornou o código do nosso e-mail muito mais pesado.

c) Aplique sombras claras em logotipos pretos

Se o seu logotipo precisar ser escrito em preto, adicione uma sombra clara. Ficará bonito e manterá a consistência do design da sua marca. 

3. Definir cores de plano de fundo para contêineres de e-mail

Se você não deseja que o conteúdo de seu e-mail tenha um fundo escuro, defina um personalizado com o Stripo.

A cor que você definiu como "Cor de fundo do conteúdo" permanecerá exatamente a mesma no modo escuro.

Defina a cor "transparente" como a faixa - nesse caso, a cor de plano de fundo escolhida será aplicada ao conteúdo do e-mail, mas não à toda a área do e-mail.

Certifique-se de definir o mesmo esquema de cores para todas as faixas / linhas. 

4. Testar seus e-mails

Sempre teste seus e-mails HTML em aparências regulares/claras e escuras.

5. Não adicionar nenhum elemento extra de código

Apesar de algumas recomendações para adicionar elementos de código especiais nos templates de tema escuro que permitem que seus e-mails sejam renderizados no modo escuro, esses códigos de amostra ainda não resolvem nenhum problema. Pelo menos, é o que mostram vários testes realizados com eles.

Além disso, os templates de e-mail funcionam muito bem na maioria dos clientes de e-mail.

Portanto, não é coisa de outro mundo otimizar seus projetos de e-mail para o modo escuro - você só precisa trabalhar na aparência do e-mail. Não há necessidade de trabalhar com códigos ainda.

Como o modo escuro afeta os e-mails em texto sem formatação?

Diz-se que os e-mails pessoais em modo escuro sempre são renderizados corretamente em todos os clientes de e-mail que suportam esse novo recurso.

Mas isso é verdade? Vamos checar:

1. O Gmail para desktop não inverte nossos e-mails. Portanto, não devemos nos preocupar com isso.

2. O Gmail no iOS e no Android mostra tipografia clara em fundo escuro.

3. O Outlook também inverte as cores dos nossos e-mails de texto sem formatação no modo escuro.

4. Os aplicativos nativos iPhone e Apple Mail invertem as cores do plano de fundo do claro para o escuro e as cores do texto do escuro para o claro quando se trata de e-mails pessoais no modo escuro.

No entanto, há algumas coisas sobre mensagens de texto sem formatação no Apple Mail e no iPhone que merecem ser mencionadas:

• ele inverte apenas as cores se esse for o único ou o primeiro e-mail de uma cadeia. Às vezes, o segundo e todos os próximos e-mails terão fundo branco e tipografia escura;

• mesmo que este seja o primeiro e-mail de uma cadeia, mas contenha uma imagem, seu e-mail pessoal no modo escuro pode ficar branco. O logotipo da sua empresa incluído na sua assinatura de e-mail, também é considerado uma imagem;

• os e-mails pessoais que foram encaminhados para você também podem ter fundo branco.

Conclusão

Obviamente, considerando que apenas uma pequena parte dos usuários pode usa o modo escuro, podemos ficar tentados a nos perguntar - o modo escuro realmente vale o esforço necessário? Sim, ele vale! Primeiro de tudo, as pessoas o usam por uma razão. Devemos respeitar isso e otimizar nossos designs de e-mail para o modo escuro. 

Segundo, a popularidade desse recurso está aumentando e muito em breve um número maior de nossos assinantes ativará esse modo.