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 suas telas. Essa configuração afeta a forma como os e-mails são exibidos. O modo escuro é uma configuração do usuário final que é 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 tornou popular porque se acredita que ele tenha vários benefícios. Os usuários podem escolher o modo escuro para:
- Minimizar o cansaço visual.
- Apoiar hábitos de sono mais saudáveis.
- Prolongar a vida útil da bateria de um dispositivo.
- Melhorar 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 sua marca
O modo escuro afeta a marca de seu e-mail, ajustando 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 (deixando os e-mails em HTML inalterados) ou tão substanciais quanto ajustar todas as cores em seu modelo de e-mail totalmente projetado.
Se o modo escuro não for considerado no design de seus e-mails, o resultado pode ser um texto difícil de ler, cores que não se alinham com os estilos de sua marca e muito mais.
Considere o logotipo da SWAK Cosmetics. Em um fundo branco, ele fica ótimo.
Mas quando visualizado em um dispositivo de modo escuro, é impossível de ler.
Observe as alterações nesse cabeçalho de e-mail entre os modos claro e 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 o modo escuro
As especificidades das alterações do modo escuro variam entre dispositivos e sistemas operacionais. A Litmus oferece um recurso sobre os dispositivos que oferecem o modo escuro e como eles tratam os e-mails em HTML.
Em geral, as caixas de entrada se enquadram em uma de duas categorias: as que fazem alterações mínimas ou nenhuma alteração e as que invertem as cores dos e-mails.
Mudanças mínimas
Algumas caixas de entrada, como o Apple Mail para desktop, não fazem alterações diretamente no conteúdo do e-mail (a menos que o usuário inclua metatags do modo escuro). Nessa caixa de entrada, a única alteração que o senhor verá entre uma mensagem no modo escuro ou claro é a cor por trá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 estava anteriormente em um fundo claro). O resultado final é um e-mail que é notavelmente mais escuro do que o original.
Estratégias de mitigação
Há várias estratégias para manter sua marca e, ao mesmo tempo, otimizar para os modos claro e escuro. Escolha o que melhor se alinha à capacidade de sua equipe e às necessidades de marca.
Desenvolver projetos com o modo claro e escuro em mente
Se o senhor usa o editor de arrastar e soltar do Klaviyo para enviar seus e-mails, essa estratégia é a melhor. Desenvolva seus modelos de e-mail tendo em mente as alterações que eles sofrerão nos dispositivos de modo escuro:
- Use logotipos e imagens que fiquem bem em fundos claros e escuros, como este da Bola's baked goods.
- Ou adicione uma sombra de cor clara a um logotipo escuro com um 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 o senhor escolher essa opção, certifique-se de que sua imagem preencha completamente o espaço que ocupa (por exemplo, 600px de largura para imagens de largura total).
- Use texto sempre que possível, em vez de usar imagens que contenham texto. Isso permite a inversão total de cores (além disso, é melhor para a acessibilidade).
Código personalizado versões escura e clara
Se tiver uma equipe de desenvolvedores que possa codificar seus e-mails em HTML do zero, poderá fornecer CSS que detecte se o visualizador está usando o modo escuro ou claro e ajuste o design de acordo. Isso pode substituir determinados padrões do modo escuro em algumas caixas de entrada, para que o usuário tenha mais controle.
Cada caixa de entrada, dispositivo e sistema operacional é diferente, portanto, o senhor precisará considerar uma ampla variedade de destinatários de e-mail ao projetar versões de modo escuro e claro de um e-mail.
É possível usar @media (prefers-color-scheme: dark) e [data-ogsc] para direcionar os usuários do modo escuro especificamente no código do seu e-mail. Saiba mais sobre quais clientes de e-mail suportam essas tags e qual código usar em seus próprios designs.
Use e-mails somente com imagens
Não recomendamos o uso de e-mails somente com imagens por vários motivos:
- Sem o texto alternativo, seu e-mail pode parecer suspeito nas caixas de entrada e ir parar na pasta de spam.
- E-mails somente com imagens não são uma prática recomendada de acessibilidade, pois são difíceis de ler para muitas pessoas e leitores de tela.
- Usar e-mails somente com imagens para forçar uma aparência de modo de luz é contornar as preferências de seus assinantes.
No entanto, muitas marcas usam essa estratégia, por isso vale a pena mencioná-la aqui. Os e-mails somente com imagens não dependem do HTML para cores, fontes, espaçamento e muito mais. Isso significa que eles não podem ser invertidos, portanto, as caixas de entrada exibirão um e-mail que geralmente se alinha ao design original.
Recursos adicionais
- Guia do editor de modelos de e-mail
Conheça os modelos de e-mail de arrastar e soltar da Klaviyo e saiba como usar o editor e configurar cada tipo de bloco.
- Referência de práticas recomendadas de acessibilidade em e-mails e formulários
Saiba como tornar seu e-mail e formulário de registro mais acessíveis. Ao projetar seu e-mail e formulário de registro, o senhor deve certificar-se de que seus designs sejam acessíveis a todos os seus Destinatários.
- Introdução ao design de e-mail