Boas práticas para HTML de Email Marketing
Uma das grandes dificuldades na criação de modelos para envio de E-mail Marketing é a falta de recursos para tornar a experiência mais interativa, um exemplo disso, é a impossibilidade de adição de vídeos e animações em seu conteúdo, inclusive, não é permitida a utilização de versões mais recentes do HTML.
Somado a isso, cada cliente de e-mail irá ler a sua campanha de uma forma distinta, modificando, inclusive, a visualização do conteúdo dessa campanha para o usuário final. Com intuito de facilitar a criação desses modelos de e-mail, colocamos abaixo algumas informações importantes sobre como deixar seu e-mail compatível com outros clientes de e-mails:
- Valide seu HTML pelo padrão W3C. O W3C - World Wide Web Consortium - estabeleceu padrões para construção de páginas HTML, esse padrão garante que o conteúdo desenvolvido em HTML possa ser executado em qualquer dispositivo, seja ele mobile ou desktop. O W3C disponibiliza uma ferramenta onde você pode validar o código html. Você pode acessar clicando aqui
- Não use a tag
style
dentro da taghead:
O Gmail não dá suporte ao estilo apontado dentro da tagstyle
, somente estilos inline. - Não use os atributos
max-width
ewidth
no CSS: use diretamentewidth="X"
eheight="X"
no HTML. Não use os atributos
background-color
ebackground-image
no CSS: no caso do fundo colorido, use diretamentebgcolor="X"
no HTML. No caso de um fundo com imagens, opte por usar as imagens diretamente na célula.Não use os atributos
padding
emargin
no CSS: use diretamentecellspacing="X"
ecellpadding="X"
no HTML.O atributos
cellpadding
,cellspacing
eborder
devem ser atribuidos pelo elemento , mesmo se for um valor nulo: se o valor não for atribuído, cada cliente de email vai preencher este valor de uma forma. Por exemplo, sua tabela pode ficar com bordas e alinhamento indesejados.Todas as cores atribuídas no HTML devem conter seis dígitos: cores com apenas três dígitos (#FFF) não são reconhecidas por clientes de email mais antigos.
Todas as imagens devem estar com atributo
border="0" e style="display:block"
. alguns clientes de email adicionam uma borda azul para as imagens que não tiverem o atributo border especificado e uma espaço em branco caso não tenha o style="display:block".Comprima suas imagens:alguns dos seus contatos podem visualizar o email, por estarem utilizando uma conexão de baixa velocida, ou um 3G. É importante que suas imagens tenham o tamanho reduzido para facilitar a abertura do conteúdo. Você pode comprimir usando o TinyPNG.
Utilize um DOCTYPE: o e-mail deverá ter um DOCTYPE válido. É ele que dirá para os browsers que deverá renderizar tags antigas ou não. Recomendamos o uso do DOCTYPE abaixo para uma melhor compatibilidade.
Use tabelas : O Uso da tag "div" não é recomendado. Recomenda-se criar o email através de tabelas.
Nas linhas e células das tabelas, utilize sempre o atributo v-align="top": isso fará com que as informações fiquem alinhadas.
Nossa ferramenta dispõe de verificação anti-spam do conteúdo da sua mensagem, você poderá utilizar para verificar a probabilidade de SPAM, falamos disso nesse artigo.