Modo escuro para conteúdo de email dark-mode
Modo escuro permite que um cliente ou aplicativo de email de suporte exiba emails com planos de fundo mais escuros e cores mais claras para texto, botões e outros elementos visuais. Esse tipo de monitor pode reduzir a tensão ocular, economizar bateria e melhorar a legibilidade em ambientes com pouca luminosidade, proporcionando uma experiência de visualização mais confortável. Como uma tendência crescente nos principais sistemas operacionais e aplicativos, agora é uma consideração importante no design de email moderno para garantir que o conteúdo permaneça legível e visualmente atraente para todos os usuários.
À medida que você cria seu conteúdo de email no espaço de design visual do Journey Optimizer B2B Edition, é possível alternar para o modo de exibição Escuro . Nesta visualização, também é possível definir configurações personalizadas específicas para oferecer suporte a clientes de email quando o modo escuro estiver ativado.
Considerações do cliente de email
Há uma variação significativa na maneira como diferentes clientes de email e aplicativos aplicam o modo escuro. Por isso, você deve considerar as expectativas para a renderização no modo escuro com cuidado. Antes de usar o modo escuro no espaço de design de email, considere os seguintes casos de uso de cliente de email:
Alguns clientes de email não oferecem suporte a esse recurso, como:
- Yahoo! Mail
- AOL
Se você definir configurações personalizadas de modo escuro no design de email, esses clientes de email não poderão exibir nenhuma renderização de modo escuro.
Alguns clientes de email aplicam sistematicamente seu próprio modo escuro padrão a todos os emails recebidos. Eles ajustam automaticamente cores, planos de fundo, imagens e outros elementos de acordo com suas configurações de modo escuro e configurações externas não são possíveis. Esses clientes incluem:
- Gmail (Webmail Para Desktop, iOS, Android™, Webmail Para Dispositivos Móveis)
- Outlook Windows
- Outlook Windows Mail
Nesse caso, as configurações do modo escuro do cliente substituem as configurações personalizadas do modo escuro definidas no Journey Optimizer B2B Edition
Muitos dos clientes de email mais populares oferecem a opção de renderizar o modo escuro personalizado com a consulta @media (prefers-color-scheme: dark), que é o método usado pelos estilos de email Journey Optimizer B2B Edition. Esta lista de clientes inclui:
- Apple Mail macOS
- Apple Mail iOS
- Outlook macOS
- Outlook.com
- Outlook iOS
- Outlook Android™
Nesse caso, as configurações específicas definidas no Journey Optimizer B2B Edition são renderizadas. No entanto, algumas restrições podem se aplicar de acordo com cada cliente de email. Por exemplo, alguns clientes (como o Apple Mail 16 (macOS 13)) não geram o modo escuro se as imagens estiverem presentes no conteúdo de email.
Para obter os melhores resultados, teste seu conteúdo com os clientes de email que você está direcionando. Para ver uma simulação que se aproxime o máximo possível do resultado final de cada cliente, use a integração renderização de teste de email Litmus no espaço de design de email.
Design para modo escuro
À medida que você estiliza o conteúdo de email para o modo escuro no Journey Optimizer B2B Edition, o espaço de design visual fornece dois tipos de ferramentas:
-
Use a função de visualização para revisar a renderização padrão do modo escuro para a maioria dos clientes de email de suporte.
-
Se quiser substituir as configurações padrão de clientes de email de suporte, defina e aplique configurações personalizadas do modo escuro ao seu conteúdo de email. Saiba mais
Visualizar modo escuro padrão preview-dark-mode
-
Abra o conteúdo do email no espaço de design de email.
Na parte superior direita da tela de desenho, há um seletor de claro-escuro que alterna a exibição do conteúdo entre o modo claro (padrão) e escuro.
-
Altere o seletor para Modo escuro (
A tela de desenho exibe o conteúdo usando o modo escuro padrão preview.x
Por padrão, a visualização do modo escuro aplica o esquema de cores
full color inverta todos os elementos, exceto imagens e ícones. Esse esquema de cores detecta áreas com elementos claros e escuros e os inverte. Os planos de fundo claros se tornam escuros e o texto escuro se torna claro, ou os planos de fundo escuros se tornam claros e o texto claro se torna escuro.
Definir configurações personalizadas do modo escuro custom-dark-mode
Depois de alternar para o modo escuro, você pode optar por editar elementos de estilo específicos do seu conteúdo, que são exibidos somente quando o modo escuro está ativado no cliente de email do recipient (desde que seja compatível com esse recurso).
O estilo de modo escuro personalizado no espaço de design de email usa o Consulta CSS @media (prefers-color-scheme: dark), que detecta se o cliente de email está definido para o modo escuro e aplica o design de tema escuro definido no seu email.
Para definir configurações personalizadas do modo escuro :
-
Se necessário, mova o seletor para Modo escuro (
-
Edite quaisquer atributos de cor de estilo, como texto, planos de fundo ou botões.
-
Para as imagens e ícones, defina ativos específicos somente para o modo escuro.
Não é possível alterar as cores das imagens e dos ícones, mas você pode definir ativos alternativos a serem usados no modo escuro. Você pode experimentar diferentes combinações de cores para seus ícones ou fazer ajustes de cores e saturação para imagens fotográficas.
Selecione qualquer imagem e alterne para o modo escuro usando a opção dedicada no painel Configurações. Em seguida, selecione um ativo de imagem diferente.
Consulte Adicionar ativos de imagem para obter mais informações sobre como selecionar um ativo de imagem.
-
A qualquer momento durante as alterações de design, selecione Alternar para o modo de exibição dinâmico para verificar como o conteúdo pode ser renderizado em vários tamanhos de dispositivo.
Nesta exibição, altere o seletor para Modo escuro (
note caution CAUTION A visualização em tempo real é uma visualização genérica criada para comparar a aparência da renderização em vários tamanhos de dispositivo. A renderização final pode variar dependendo do cliente de email do recipient. -
Quando as alterações no modo escuro estiverem concluídas, clique em Simular Conteúdo.
Use os revisores e revisores de texto para testar o design do email. Consulte Visualizar e testar seu conteúdo de email para obter mais informações.
-
Se você tiver uma conta do Litmus Enterprise, selecione Renderizar email para ver a renderização final do modo escuro para vários clientes de email no Litmus.
Consulte Testar renderização de email com Litmus para obter mais informações.
note caution CAUTION Embora a simulação se aproxime da forma como os emails aparecem no modo escuro, a renderização real pode ser diferente devido a variações nos provedores de serviços de email ou nas configurações no nível do dispositivo.
Práticas recomendadas best-practices
À medida que a adoção do modo escuro aumenta nos principais clientes de email, é essencial considerar como seus emails são renderizados em ambientes claros e escuros, esteja você usando o modo escuro personalizado ou não.
O modo escuro pode alterar cores, planos de fundo e imagens — às vezes substituindo as opções de design. Para garantir a consistência visual, a acessibilidade e a integridade da marca, siga estas práticas recomendadas:
Lista de verificação:
- Salve logotipos e ícones como arquivos PNG com fundo transparente para evitar caixas brancas visíveis no modo escuro.
- Evite imagens com fundos brancos ou claros codificados.
- Se a transparência não for uma opção, coloque as imagens em um plano de fundo sólido no design para evitar inversões de cores estranhas.
Lista de verificação:
- Verifique se há contraste suficiente entre o texto e as cores do plano de fundo para facilitar a leitura nos modos claro e escuro.
- Evite depender apenas das cores do plano de fundo para o conteúdo crítico. Alguns clientes substituem as cores do plano de fundo no modo escuro, portanto, verifique se as informações principais ainda estão visíveis.
Lista de verificação:
- Use combinações de cores fáceis de distinguir para pessoas com daltonismo.
- Use uma paleta de tons médios para garantir o contraste em planos de fundo claros e escuros.
- Use combinações de cores acessíveis com alto contraste para melhorar a legibilidade e atender aos padrões do Web Content Accessibility Guidelines (WCAG). Use ferramentas como o WebAIM Contrast Checker para verificar o contraste de cores.
- Evite fontes finas, pois isso pode afetar a legibilidade. Se sua marca requer uma fonte fina, coloque-a em negrito no modo escuro.
- Ignorar branco puro em preto puro, o que pode causar tensão ocular e pode ser invertido automaticamente em alguns clientes de email.
- Fornecer estilo de fallback acessível se o modo escuro não for compatível.
Lista de verificação:
- Use a visualização de modo escuro no espaço de design de email, que usa esquemas de cores invertidas para detectar problemas antecipadamente.
- Use uma conta Litmus Enterprise com a opção Renderizar email para simular seus designs nos principais clientes de email (como Apple Mail, Gmail e Outlook) e ver como as cores e as imagens se comportam no modo escuro.