Este artigo apresenta orientações de como construir um HTML simples e eficaz, garantindo a compatibilidade e a correta visualização em diferentes plataformas de e-mail.

• Nível de Acesso: Administrador, Editor.
  Persona: Desenvolvedor, Analista de Marketing, Designer.

Entendendo as Limitações dos Clientes de E-mail

Atualmente, existem diversos meios de leitura de e-mails, tanto em aplicativos nativos quanto em aplicativos web, e o suporte a interações varia entre eles. Gmail e Apple Mail, os dois clientes mais utilizados, possuem limitações de interação nas mensagens como medida de segurança.

Quando uma mensagem é aberta, seu conteúdo é tratado pelas plataformas, onde classes, IDs e links são substituídos e validados. Isso acrescenta uma camada de segurança, pois códigos maliciosos podem ser incorporados. 

Como resultado, o uso de tags <style> e <script> é removido, deixando apenas HTML simples.

Boas Práticas de Estrutura e Estilo

Diversos artigos na comunidade de marketing digital abordam como criar uma newsletter mais eficaz, e praticamente todos recomendam o mesmo: se for aplicar um estilo, ele deve ser feito inline. Isso significa que cada elemento deve ter seu próprio atributo de estilo, por exemplo: <p style="color: red">Texto vermelho</p>.

Também é recomendável padronizar o uso de tabelas para garantir uma diagramação que se adapte a telas menores, mantendo a consistência do layout em diferentes dispositivos.

Boas Práticas para Responsividade e Compatibilidade

Além da estrutura em tabelas e do uso de estilos inline, alguns cuidados adicionais ajudam a garantir uma melhor visualização dos e-mails em diferentes dispositivos e clientes de e-mail.

1.Layout mais fluido

Evite utilizar espaçamentos fixos muito grandes, como cellspacing="30", pois eles podem comprometer a visualização em telas menores. Prefira estruturas mais flexíveis e dimensionamentos que se adaptem ao espaço disponível.

2.Controle do redimensionamento de texto

Alguns dispositivos podem ajustar automaticamente o tamanho das fontes para facilitar a leitura. Para manter maior controle sobre a escala do texto, é possível utilizar:

style="text-size-adjust: 100%; -webkit-text-size-adjust: 100%;"

3.Atenção à quebra de palavras

A combinação entre tamanho da fonte, largura disponível e responsividade pode fazer com que algumas palavras sejam quebradas de forma inesperada. Para evitar que termos específicos sejam separados em pontos inadequados, utilize hífens inquebráveis, por exemplo:

APRÉS‑SKI

Quando necessário, também é possível utilizar white-space: nowrap; para impedir a quebra de determinados trechos.

Essas variações não são exclusivas do editor: um e-mail desenvolvido diretamente em HTML também pode apresentar diferenças de visualização dependendo do dispositivo e do aplicativo utilizado para a leitura.

4.Atenção à visualização em dispositivos móveis

Em dispositivos móveis, especialmente no iOS e em aplicativos como o Mail, podem ocorrer diferenças no alinhamento e no dimensionamento dos elementos. Por isso, é importante testar o HTML em diferentes clientes e tamanhos de tela antes do envio.

5.Compatibilidade com Dark Mode

O modo escuro pode alterar a forma como as cores do e-mail são exibidas. Evite depender exclusivamente de cores fixas que possam perder contraste quando o cliente de e-mail aplicar suas próprias regras de Dark Mode.

Por exemplo, um texto definido exclusivamente como preto (#000000) pode apresentar baixa visibilidade em determinadas combinações de fundo e modo de exibição.

Sempre que possível, utilize cores com contraste adequado e, quando aplicável, considere regras específicas para Dark Mode por meio de media queries.

Importante: A renderização final do e-mail pode variar entre clientes, dispositivos e sistemas operacionais. Por isso, recomenda-se realizar testes antes do disparo, principalmente em versões desktop e mobile.

Recomendações Finais e Elementos Ignorados

Pseudo-elementos como :hover, que permitem modificar um elemento ao passar o mouse sobre ele, são ignorados, uma vez que as mensagens são multiplataformas e o estilo aplicado é removido. Testes usando JavaScript para manipular elementos também confirmaram que os scripts são removidos.

Mantenha o e-mail simples e considere que o usuário final pode estar usando qualquer plataforma. A mensagem não manterá a mesma usabilidade programada na tela, pois as regras de segurança variam conforme o cliente de e-mail do usuário e seu sistema operacional.

Referência: https://medium.com/emails-hteumeuleu/trying-to-make-sense-of-gmail-css-support-2019-edition-b7cc132ee226

FAQ – Perguntas Frequentes

1. Pergunta: Por que meu e-mail com CSS complexo quebra no Gmail ou no Outlook?
Resposta: Clientes de e-mail como Gmail e Outlook removem ou alteram CSS e scripts por segurança. Para garantir que seu e-mail seja exibido corretamente, é essencial usar estilos "inline" diretamente nas tags HTML e evitar folhas de estilo externas ou tags <style>.

2. Pergunta: Posso usar animações ou efeitos como ':hover' no meu HTML de e-mail?
Resposta: Não é recomendado. A maioria dos clientes de e-mail não suporta pseudo-elementos como :hover ou scripts para animações. A melhor abordagem é focar em um design simples e estático, garantindo a compatibilidade em todas as plataformas.

3. Pergunta: Qual a melhor forma de estruturar o layout do meu e-mail para que funcione em mobile e desktop?
Resposta: A prática mais segura e compatível para criar layouts de e-mail responsivos é usar tabelas HTML (<table>, <tr>, <td>). Elas oferecem maior consistência na renderização entre diferentes dispositivos e clientes de e-mail do que métodos mais modernos como Flexbox ou Grid.

Ficou com alguma dúvida ou identificou algum problema? Acione nosso time pelo chat disponível no app dito. (Horário de Atendimento de Segunda a Sexta das 9hrs as 18hrs)

TAGS: HTML para email, boas práticas email HTML, CSS inline email, compatibilidade email Gmail, criar template email, código HTML email marketing, email quebra no outlook, script em email, Dito email HTML, notificação por email. Como fazer um HTML que funciona em todos os emails? Por que meu CSS não funciona no Gmail? Pode usar javascript em email? Qual a melhor forma de colocar estilo em email? Como criar email responsivo com tabelas?