Canais: Diretrizes e melhores práticas para o editor de HTML de e-mail

Criada por Mariana Benites, Modificado em Qua, 20 Mai na (o) 5:18 PM por Brenda Souza

O editor HTML da Dito foi projetado para oferecer flexibilidade na criação de campanhas, seguindo as melhores práticas de compatibilidade, nesse artigo você vai aprender como aplicá-las na criação do seu HTML.

Nível de Acesso: Administrador, Editor.
Persona: Analista de Marketing, Analista de CRM, Gerente de E-commerce.

Como criar e-mails com as melhores práticas

A criação de e-mails em HTML segue algumas diretrizes diferentes da construção de páginas para a web. Isso ocorre porque os clientes de e-mail, como Gmail, Outlook e Yahoo, possuem suas próprias regras de renderização, garantindo que as mensagens sejam exibidas corretamente em diferentes dispositivos. Nosso editor HTML foi projetado para oferecer flexibilidade e praticidade na criação de campanhas, seguindo essas melhores práticas. Veja abaixo alguns pontos importantes a serem considerados ao construir seu e-mail.

Como o HTML é interpretado no editor

Nosso editor importa apenas o conteúdo dentro da tag <body> do seu código HTML. Isso significa que elementos da <head>, como estilos globais ou scripts, não são aplicados. Essa abordagem garante que seu e-mail seja exibido corretamente nos principais clientes de e-mail.

Estilização: Use CSS Inline para Melhor Compatibilidade

Diferente de um site, onde estilos podem ser aplicados por meio de arquivos CSS externos ou dentro da tag <style>, os clientes de e-mail possuem suporte limitado a esses métodos. Para garantir que o design do seu e-mail seja mantido corretamente, recomendamos aplicar os estilos diretamente nos elementos, usando CSS inline.

Exemplo de CSS inline:

<p style="color: blue; font-size: 16px;">Este é um exemplo de texto estilizado corretamente!</p>

Para saber mais sobre CSS inline, confira este guia: W3Schools - Inline CSS.

Pseudo-classes não são suportadas

Algumas pseudo-classes, como :hover, :focus e :active, que funcionam em sites, não são suportadas pela maioria dos provedores de e-mail.

Isso significa que efeitos como mudanças de cor ao passar o mouse ou interações dinâmicas não funcionarão.

Para mais detalhes sobre pseudo-classes, veja este artigo do W3Schools.

Responsividade e Largura Recomendada

O uso de @media queries para tornar o conteúdo responsivo não é suportado pela Dito, e poucos provedores de e-mail oferecem compatibilidade com esse recurso.

Isso significa que ajustes automáticos de layout para diferentes tamanhos de tela podem não funcionar como esperado.

Para garantir que seu e-mail seja exibido corretamente em diferentes dispositivos, a prática recomendada é definir uma largura fixa de 600 pixels.

Essa largura é ideal porque mantém a leitura confortável tanto em telas de desktop quanto em dispositivos móveis sem a necessidade de ajustes complexos.

Para mais informações sobre @media queries, consulte: W3Schools - Media Queries.

FAQ – Perguntas Frequentes

1. Pergunta: Por que não posso usar um arquivo de CSS externo ou a tag <style> no meu e-mail?
Resposta: A maioria dos clientes de e-mail, como Gmail e Outlook, não oferece suporte total para CSS externo ou classes definidas na tag <style>. Para garantir que seu design seja exibido corretamente em todas as plataformas, a melhor prática é usar CSS inline, aplicando os estilos diretamente em cada elemento HTML.

2. Pergunta: Se a largura recomendada é 600px, meu e-mail ficará estranho em telas muito grandes?
Resposta: Não, a largura de 600px é um padrão de mercado que garante uma boa legibilidade em desktops, centralizando o conteúdo em uma coluna que não exige que o leitor mova os olhos excessivamente. Em telas maiores, os clientes de e-mail geralmente adicionam margens laterais, mantendo o layout agradável e focado.

3. Pergunta: Posso adicionar animações ou efeitos interativos, como um menu que se expande ao clicar?
Resposta: Não é recomendado. Efeitos interativos geralmente dependem de JavaScript ou de pseudo-classes CSS avançadas (como :hover ou :checked), que não são suportadas pela maioria dos provedores de e-mail. Para garantir a funcionalidade, o ideal é manter o design do e-mail simples e direto, com links claros para levar o usuário a uma página web onde a interatividade é possível.

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: editor HTML, HTML para e-mail, CSS inline, boas práticas e-mail marketing, Dito e-mail, criar campanha HTML, responsividade e-mail, largura 600px, e-mail marketing Dito, código HTML e-mail. Termos de busca: como usar html no email da dito, meu html quebra no outlook, porque meu email fica desformatado, qual a largura ideal para email marketing, pode usar javascript em email, como estilizar email html, css inline para email, editor html da dito funciona como, media query funciona em email.