Editor HTML de E-mail: Diretrizes e Melhores Práticas

Modificado em Qui, 17 Abr na (o) 9:39 PM

Boas praticas na criação de e-mails em HTML

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.