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-mai

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.

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?