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 ser lead a inconsistências com a forma como seus e-mails de marketing aparecem em clientes com uma aparência mais brilhante ativada.

Alternar visualização em modo escuro no editor de email

Para alternar para uma visualização em modo escuro de seu email enquanto o projeta:

1. Clique no nome de um e-mail rascunhado.
2. Na parte superior do editor de e-mail, clique em Opções de exibição e, em seguida, alterne a opção de visualização do modo escuro 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:

1. Clique no nome de um e-mail de rascunho existente.
2. Na parte superior direita do editor de e-mail, clique em Visualizar e testar e selecione Visualização da caixa de entrada.
3. No canto superior da tela de visualização, clique em Clientes.
4. No modo escuro, selecione a caixa de seleção ao lado de qualquer cliente que deseja visualizar.

6. 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 cores acessíveis pela Web no blog 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