[Beta]{class="badge informative"}
Gerenciar conteúdo no modo escuro dark-mode
Ao criar seus emails, o Journey Optimizer Designer de email permite que você alterne para o Modo escuro, no qual é possível definir configurações personalizadas específicas. Quando o modo escuro estiver ativado, os clientes de email de suporte exibirão as configurações definidas para esse modo.
Uma lista de clientes de email que dão suporte ao modo escuro é apresentada em esta seção.
O que é o modo escuro? what-is-dark-mode
O modo escuro permite que clientes e aplicativos de email compatíveis exibam emails com planos de fundo mais escuros e cores mais claras para texto, botões e outros elementos da interface do usuário. Ele permite 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 (Apple Mail, Gmail, Outlook, Twitter, Slack), ela se tornou uma consideração importante no design moderno de email para garantir que o conteúdo permaneça legível e visualmente atraente para todos os usuários.
No entanto, não é possível garantir que seu email terá a mesma aparência no modo escuro em todos os dispositivos. Algumas alterações visuais também podem ser causadas pelo aplicativo de email ou dispositivo que substitui o design original.
Na verdade, a forma como o modo escuro é aplicado pelos clientes de email pode variar da seguinte maneira:
-
Nem todos os clientes de email oferecem suporte a esse recurso.
note note NOTE Uma lista de clientes de email que não oferecem suporte ao modo escuro é apresentada em esta seção. -
Alguns clientes de email ajustam automaticamente cores, planos de fundo e imagens. Nesse caso, se você definir configurações personalizadas no Designer de email, essas configurações provavelmente não serão renderizadas.
-
Outros clientes de email oferecem a opção de renderizar o modo escuro personalizado (como com o método
@media (prefers-color-scheme: dark)). Nesse caso, as configurações específicas definidas no Designer de email devem ser exibidas. Saiba como definir configurações personalizadas do modo escuro no Email Designer em esta seção.
Modo escuro no designer de email dark-mode-email-designer
Quando se trata do modo escuro no Designer de email, há dois aspectos a serem considerados:
-
Você pode obter uma visualização de como o modo escuro padrão será renderizado na maioria dos clientes de email de suporte. Saiba mais
-
Se quiser substituir as configurações padrão de clientes de email de suporte, você poderá definir configurações personalizadas no modo escuro aplicáveis ao email que está editando. Saiba mais
Visualizar modo escuro padrão preview-dark-mode
Para acessar o modo escuro no Designer de email e pré-visualizar as configurações padrão do modo escuro, siga as etapas abaixo.
-
Na página inicial do Designer de Email, selecione a opção Design do zero. Saiba mais
-
Adicione estruturas e componentes de conteúdo ao seu conteúdo.
-
Na parte superior direita da tela central, alterne para Modo escuro.
-
A visualização padrão do modo escuro é exibida.
Por padrão, a pré-visualização do modo escuro do Email Designer aplica o esquema de cor "inversão de cor completa" a todos os elementos, exceto imagens e ícones.
Isso significa que ele detecta áreas com elementos claros e escuros e os inverte, de modo que os planos de fundo claros se tornam escuros e o texto escuro se torna claro, enquanto os planos de fundo escuros se tornam claros e o texto claro se torna escuro.
Definir modo escuro personalizado define-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 será exibido somente quando o modo escuro estiver habilitado no cliente de email do destinatário, desde que ele seja compatível com esse recurso.
Para utilizar o estilo de modo escuro personalizado do Designer de email, o Journey Optimizer usa o Consulta CSS @media (prefers-color-scheme: dark), que detecta se o cliente de email do usuário 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, siga as etapas abaixo.
-
Alterne para a visualização do Modo escuro no Designer de email. Saiba como
-
Edite quaisquer atributos de cor de estilo, como texto, planos de fundo, botão etc.
-
Não é possível alterar as cores das imagens e dos ícones, mas você pode definir ativos específicos somente para o modo escuro. Para fazer isso, selecione qualquer imagem. Alterne para o modo escuro usando a opção dedicada no painel Configurações e selecione um ativo diferente.
-
A qualquer momento, você pode Alternar para o modo de exibição ativo para verificar como o conteúdo pode ser renderizado em vários tamanhos de dispositivo. Nesta exibição, selecione o botão Modo escuro na parte superior da tela para visualizar a versão em modo escuro do seu conteúdo em diferentes dispositivos.
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 de acordo com o cliente de email do recipient. -
Quando estiver satisfeito com as alterações do modo escuro, clique em Simular Conteúdo.
-
Selecione Renderizar email e conecte-se à sua conta Litmus. Você pode ver a renderização final do modo escuro para vários clientes de email. Saiba mais sobre Renderização de email.
note warning WARNING Embora a simulação se aproxime da forma como os emails aparecerão 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 as práticas recomendadas listadas abaixo.
Otimize suas imagens e logotipos
-
Evite imagens com fundos brancos ou claros codificados.
-
Salve logotipos e ícones como PNGs com fundo transparente para evitar caixas brancas visíveis no modo escuro.
-
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.
Veja seus planos de fundo
-
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.
Criar conteúdo acessível no modo escuro
-
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 das Diretrizes de acessibilidade de conteúdo da Web (WCAG). Use ferramentas como o Verificador de contraste do WebAIM 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, pois pode causar tensão nos olhos e ser automaticamente invertido por alguns clientes de email.
-
Fornecer estilo de fallback acessível se o modo escuro não for compatível.
Testar seus emails no ambiente no modo escuro
-
Use a visualização de modo escuro do Email Designer, que usa esquemas de cores invertidas para detectar problemas antecipadamente.
-
Use a opção Renderização de email que usa o Litmus para simular seus designs nos principais clientes de email (Apple Mail, Gmail, Outlook) e ver como as cores e as imagens se comportam no modo escuro.
Clientes de email que oferecem suporte ao modo escuro supporting-email-clients
Abaixo está uma lista dos principais clientes de email que oferecem suporte ao modo escuro.
Clientes de email que não oferecem suporte ao modo escuro non-supporting-email-clients
Alguns clientes de email permitem que os usuários alternem sua interface para o modo escuro, mas essa configuração não afeta a forma como os emails do HTML são exibidos. Independentemente de a interface estar no modo claro ou escuro, seu email será renderizado da mesma forma. Esta é uma lista desses clientes: