Ajuda

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:

  1. 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
  2. Não use a tag style dentro da tag head: O Gmail não dá suporte ao estilo apontado dentro da tag style, somente estilos inline.
  3. Não use os atributos max-width e width no CSS: use diretamente width="X" e height="X" no HTML.
  4. Não use os atributos background-color e background-image no CSS: no caso do fundo colorido, use diretamente bgcolor="X" no HTML. No caso de um fundo com imagens, opte por usar as imagens diretamente na célula.

  5. Não use os atributos padding e margin no CSS: use diretamente cellspacing="X" e cellpadding="X" no HTML.

  6. O atributos cellpaddingcellspacing e border 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.

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

  8. 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".

  9. 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.

  10. 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.

  11. Use tabelas : O Uso da tag "div" não é recomendado. Recomenda-se criar o email através de tabelas.

  12. 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.

 

Retornar para Modelos de E-mail

Assine nossa newsletter