Visualizar e otimizar como seus designs de e-mail aparecerão no modo escuro

Muitos clientes de e-mail têm uma configuração de modo escuro, que pode levar a inconsistências com como seus e-mails de marketing aparecem em clientes com uma aparência clara ativada.

Visualize a aparência do seu e-mail nos modos escuros de clientes específicos

Para ver como seu e-mail será exibido quando um contato abri-lo em um navegador ou cliente com o modo escuro ativado:

• Clique no nome de um e-mail de rascunho existente.
• No canto superior direito do editor de e-mail, clique em Visualização então clique Visualização da caixa de entrada.
• No canto superior da tela de visualização, clique em Clientes.
• No modo escuro, selecione a caixa de seleção ao lado de qualquer cliente que deseja visualizar.

• No canto superior direito, clique em Testar meu e-mail agora.

Práticas recomendadas ao projetar e-mails para o modo escuro

Quando você visualizar seu e-mail com diferentes clientes de modo escuro, lembre-se de que cada cliente pode renderizar seu e-mail de modo diferente. Por exemplo, se seus contatos abrirem seu e-mail usando o Apple Mail, ele aparecerá exatamente o mesmo caso tenha ou não ativado o modo escuro. Então, se um contato ativar o modo escuro em apps como o Gmail ou Outlook no Windows, você pode observar mais diferenças atraentes em seu estilo de e-mail, como cores de fundo invertidas.

Para confirmar que seu estilo de e-mail é consistente entre os clientes, revise as dicas abaixo.

Use imagens que aparecerão claramente tanto em fundos claros quanto escuros

Converta suas imagens para arquivos PNG antes de fazer upload e adicionar imagens aos seus e-mails, o que ajuda a garantir que eles renderizam clientes de e-mail que automaticamentes invertem a cor de fundo dos e-mails no modo escuro. Se sua imagem tiver texto, como um logotipo, você também pode adicionar um contorno ao redor do texto para destacá-lo.

Opte por cores acessíveis pela web

Projetar o conteúdo do e-mail para ser acessível é importante, independentemente do cliente de e-mail que seu destinatário está usando. Aderir aos padrões de acessibilidade, como verificar o contraste de cores do seu texto, também ajudará seus e-mails a renderizarem corretamente no modo escuro. Saiba mais sobre as cores acessíveis pela web no blog da HubSpot.

Especifique uma consulta de mídia para o estilo do modo escuro no iOS

Vários clientes de e-mail, incluindo Apple Mail e Outlook.com, oferecem suporte limitado para detectar e adicionar estilo personalizado através de uma consulta de mídia. Se você estiver usando o editor de e-mail clássico atualizado e tiver recursos de desenvolvedor para fazer alterações de CSS em seus e-mails, poderá adicionar uma consulta de mídia com o prefers-color-scheme recurso de mídia para configurar a aparência das imagens e do texto no modo escuro e no modo claro