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 que as pessoas podem ativar no dispositivo ou no app de e-mail para escurecer as telas. Essa configuração afeta a forma como os e-mails são exibidos. A Klaviyo não tem controle direto sobre como cada caixa de entrada aplica o modo escuro.
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.
Apps e dispositivos de e-mail que oferecem modo escuro
Os detalhes das mudanças do modo escuro variam entre aplicativos de e-mail, dispositivos e sistemas operacionais. A Litmus oferece um recurso sobre os clientes de e-mail 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, mantêm as cores inalteradas em e-mails HTML totalmente projetados, a menos que você inclua metatags de modo escuro. E-mails somente de texto ainda podem mudar no modo escuro. Quando o conteúdo do e-mail permanece o mesmo, somente a caixa de entrada ao redor muda de cor.
Inversão de cores
Outras caixas de entrada, como o Outlook.com, invertem parcialmente as suas cores. Isso significa que algumas cores mais claras são substituídas por tons mais escuros, e algumas cores mais escuras são substituídas por tons mais claros (por exemplo, texto escuro que antes estava em um fundo claro). O resultado final é um e-mail visivelmente mais escuro do que o original.
Algumas caixas de entrada aplicam inversão total de cores, alterando tanto fundos claros quanto escuros. Por exemplo, o Outlook 2021 para Windows pode deixar um fundo escuro claro.
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.
Evite 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.
Muitas marcas usam e-mails com apenas imagens porque os arquivos de imagem preservam as cores e as fontes incorporadas à imagem. No entanto, e-mails com apenas imagens ainda dependem de HTML para layout, espaçamento e fundos ao redor. Uma caixa de entrada pode mudar essas cores ao redor no modo escuro, então essa abordagem não garante que o e-mail inteiro vai corresponder ao seu design original.
Teste seu e-mail no modo claro e escuro
Antes de enviar, verifique se seus logotipos, textos e links estão legíveis nos dois modos. O teste de caixa de entrada está disponível para contas pagas da Klaviyo e inclui 100 testes por usuário por mês. Cada prévia de caixa de entrada que você gerar conta como 1 teste.
- No editor de e-mail de arrastar e soltar, clique em Visualização e teste e selecione Teste de caixa de entrada.
- Selecione um perfil para visualizar uma prévia. Para um e-mail que usa dados de eventos, selecione o evento relevante para que você possa conferir o conteúdo personalizado.
- Em Selecionar testes de caixa de entrada, expanda Modo escuro e escolha as caixas de entrada usadas pelos seus assinantes. Selecione as versões do modo claro para comparação e remova as caixas de entrada pré-selecionadas de que você não precisa.
- Clique em Executar teste. Quando as prévias estiverem prontas, clique em cada bloco para inspecioná-lo.
- Clique em Concluído para retornar ao editor. Faça as alterações de design necessárias e, em seguida, execute novos testes para verificar o e-mail atualizado.
Saiba mais sobre como usar testes de caixa de entrada. Você também pode enviar um e-mail de teste para caixas de entrada que você consegue acessar e compará-lo no modo claro e no modo escuro.
Recursos adicionais
- Guia do editor de modelos de e-mail
Saiba mais sobre o editor de modelos de e-mail de arrastar e soltar da Klaviyo, incluindo como usar os estilos de modelo e configurar cada tipo de bloco.
- Práticas recomendadas de acessibilidade em e-mails e formulários
Saiba como deixar seus e-mails e formulários de registro mais acessíveis. Ao criar seus e-mails e formulário de registro, você vai querer garantir que seus designs sejam acessíveis para todos os seus destinatários.
- Get started with email design