Práticas recomendadas de design de e-mail no modo escuro
O que você vai aprender
Saiba mais sobre o modo escuro, uma configuração do dispositivo que alguns usuários ativam para escurecer as telas. Essa configuração afeta como os e-mails são exibidos. O modo escuro é uma configuração do usuário final selecionada no nível do dispositivo, e a Klaviyo não tem controle direto sobre como o modo escuro é implementado em cada dispositivo.
Por que as pessoas usam o modo escuro?
O modo escuro se popularizou porque acredita-se que ele tenha uma variedade de benefícios. Os usuários podem escolher o modo escuro para:
- Minimize o cansaço visual.
- Apoie hábitos de sono mais saudáveis.
- Prolongue a vida útil da bateria de um dispositivo.
- Melhore a acessibilidade.
De acordo com a Litmus, o número de pessoas que visualizam e-mails no modo escuro aumentou de 28% em 2021 para 34% em 2022.
Modo escuro e seu branding
O modo escuro afeta a identidade visual do seu e-mail ao ajustar o HTML usado para renderizá-lo na caixa de entrada. Esses ajustes podem ser tão pequenos quanto inverter as cores em e-mails somente de texto (mantendo os e-mails HTML inalterados) ou tão abrangentes quanto ajustar todas as cores do seu modelo de e-mail totalmente projetado.
Se você não considerar o modo escuro ao criar seus e-mails, isso pode resultar em texto difícil de ler, cores que não se alinham aos estilos da sua marca e muito mais.
Considere o logotipo da SWAK Cosmetics. Em um fundo branco, ele fica ótimo.
Mas, quando visualizado em um dispositivo no modo escuro, é impossível ler.
Observe as mudanças neste cabeçalho de e-mail entre o modo claro e o modo escuro. A cor de fundo do e-mail, a cor do texto e a cor da barra de links foram invertidas.
Dispositivos e sistemas operacionais que oferecem modo escuro
Os detalhes das mudanças do modo escuro variam entre dispositivos e sistemas operacionais. A Litmus oferece um recurso sobre os dispositivos que oferecem modo escuro e como eles tratam e-mails HTML.
Em geral, as caixas de entrada se enquadram em 1 de 2 categorias: as que fazem mudanças mínimas ou nenhuma mudança e as que invertem as cores do e-mail.
Alterações mínimas
Algumas caixas de entrada, como o Apple Mail para desktop, não fazem alterações no conteúdo do seu e-mail diretamente (a menos que você inclua metatags de modo escuro). Nesta caixa de entrada, a única mudança que você verá entre uma mensagem no modo escuro ou claro é a cor atrás das informações do remetente.
Inversão de cores
Outras caixas de entrada, como o Outlook no desktop, invertem parcialmente suas cores. Isso significa que algumas cores mais claras são trocadas por tons mais escuros, e algumas cores mais escuras são trocadas por cores mais claras (por exemplo, texto escuro que antes estava em um fundo claro). O resultado final é um e-mail visivelmente mais escuro do que o original.
Estratégias de mitigação
Há várias estratégias para manter sua identidade de marca enquanto você otimiza para os modos claro e escuro. Escolha a opção que mais se alinha com a capacidade da sua equipe e as necessidades da sua marca.
Desenvolva designs considerando os modos claro e escuro
Se você usa o editor de arrastar e soltar do Klaviyo para enviar seus e-mails, essa estratégia é a melhor. Crie seus modelos de e-mail levando em conta quais mudanças eles terão em dispositivos no modo escuro:
- Use logotipos e imagens que fiquem ótimos em fundos claros e escuros, como este para os produtos assados da Bola.
- Ou adicione uma sombra clara a um logotipo escuro com fundo transparente para que ele se destaque no modo escuro.
- Como alternativa, use arquivos de imagem que incluam cores de fundo, em vez de usar um fundo transparente. Se você escolher esta opção, verifique se a imagem preenche completamente o espaço que ela ocupa (por exemplo, 600 px de largura para imagens de largura total).
- Use texto sempre que possível, em vez de usar imagens que contenham texto. Isso permite inversão total de cores (além disso, é melhor para a acessibilidade).
Versões claras e escuras do código personalizado
Se você tem uma equipe de desenvolvedores que pode codificar seus e-mails HTML do zero, você pode fornecer CSS que detecta se quem está visualizando está usando o modo escuro ou claro e ajustar o design de acordo. Isso pode substituir algumas configurações padrão do modo escuro em algumas caixas de entrada, para que você tenha mais controle.
Cada caixa de entrada, dispositivo e sistema operacional é diferente, então você vai precisar considerar uma grande variedade de destinatários de e-mail ao criar versões de modo escuro e modo claro de um e-mail.
Você pode usar @media (prefers-color-scheme: dark) e [data-ogsc] para segmentar usuários do modo escuro especificamente no código do seu e-mail. Saiba mais sobre quais clientes de e-mail oferecem suporte a essas tags e qual código usar nos seus próprios designs.
Use e-mails apenas com imagens
Não recomendamos usar e-mails somente com imagem por vários motivos:
- Sem texto alternativo, seu e-mail pode parecer suspeito para as caixas de entrada e acabar na pasta de spam.
- E-mails só com imagem não são uma boa prática de acessibilidade, pois são difíceis de ler para muitas pessoas e leitores de tela.
- Usar e-mails somente com imagem para forçar uma aparência no modo claro é burlar as preferências dos seus assinantes.
No entanto, muitas marcas usam essa estratégia, então vale a pena mencioná-la aqui. E-mails somente com imagens não dependem de HTML para cores, fontes, espaçamento e muito mais. Isso significa que eles não podem ser invertidos, então as caixas de entrada exibirão um e-mail que, em geral, está alinhado ao seu design original.