Veja essas dicas para criar um template de email marketing perfeito

Introdução HTML

Seu template HTML de email marketing deve ser desenvolvido com base em tabelas aninhadas dentro de outras tabelas com um tamanho de largura(Width) de 600px.

Além disso, seu template deve conter uma proporção de 60% de texto e 40% de imagens para garantir melhor entregabilidade e evitar que caia em SPAM, pois os provedores gratuitos(Gmail, Yahoo, Hotmail...) usam uma validação conhecida como "text to image ratio" para filtrar spam.

Em um email marketing que contenha somente imagem, por exemplo, ele não conseguirá procurar por palavras que sejam consideradas como SPAM e acabará tratando seu email como tal.

Imagens e Links

Sempre que for usar as tags <a> ou <img> adicione seus respectivos title e alt, para que na ferramenta de email marketing você consiga rastrear clicks e ações para filtrar melhor o público alvo de suas listas e disparos. Utilize sempre suas imagens em um servidor acessível pela internet, pois se você envia algo como <img src=”Meus Documentos/imagem.jpg” [...]/>, a imagem chegará como inexistente para seu remetente, pelo simples fato da imagem não estar em “Meus Documentos/[...]” por exemplo, mas se ela estiver em um servidor direto para a internet, ele irá carregar pois a imagem está hospedada em um local onde todos tem acesso. Evite usar mapeamento de imagens, utilize a tag <img>, caso sua imagem deva jogar para uma página na internet, para evitar que as ferramentas anti-spam não recusem seu email marketing, recomendamos um método a seguir para isso.

Recomendação: Também podemos adicionar os atributos Width e Height à nossa imagem, tanto dentro de Style: <img src=”#” [...] style=”display:block; width:200px; height=100px;”> Quanto ao corpo da própria Tag <img>: <img src=”#” [...] width=”200px” height=”100px” style=”display:block;”>

Algo muito importante sobre as imagens, é que todas devem haver um style=”display:block;”, este atributo faz com que as imagens não fiquem com espaçamentos vazios(brancos) quando enviados para clientes de email, assim como o Gmail.

Obs: É recomendado que os atributos Width e Height estejam escritos fora de uma tag style, mas que contenha o atributo Display e sempre atribuído o valor Block.

Tamanhos

Como dito na introdução, seu template de email marketing deve ter no máximo 600px de largura, e tratando-se de responsividade para outros aparelhos como Smartphones e Tablets, deve se considerar que o tamanho não será fixo em 600px pois nem todos os aparelhos chegam à esta resolução quando olhados em aplicativos de email. Para usar bem a responsividade em email marketing utilize o atributo max-width para determinar um tamanho máximo de largura e utilize também o width:100% para sua tabela se adaptar ao tamanho de diversas telas sempre ocupando todo espaço possível. Outro atributo importante que sempre é bom lembrar é o border-collapse, ele é quem irá “quebrar” seu conteúdo “um para baixo do outro” para se adaptar às outras telas.

CSS e Javascript

Javascript não funciona em Email Marketing, só deixaria o código mais pesado e não terá efeito algum. Uma boa ferramenta de email marketing utiliza variáveis que podem ser usadas para personalizar o conteúdo de seu email marketing como o nome da pessoa por exemplo:

Digamos que na sua lista de clientes tem cadastrado o campo personalizado NOME com o valor Henrique. Exemplo do template de email marketing na ferramenta da ABMail: <h;1>Olá {{_NOME|Cliente_}}!</h1> Irá chegar assim para Henrique: Olá Henrique!

Mas, supondo que a pessoa que recebeu o email não esteja cadastrado na sua base de clientes, o email chegaria assim: Olá Cliente!

Evite usar CSS com seus conceitos de Classe, alguns leitores de email não conseguem identificar. Outlook.com por exemplo não funcionará mas, caso utilize, a sintaxe é diferente do normal utilizados em sites, além do CSS tem de estar necessariamente dentro do próprio arquivo HTML, a classe é criada de outra maneira. Exemplo:

<script>
    /* elemento [class=” nome_da_classe”]{conteúdo da classe;} */
    table[class=”table_exemplo”]{
    max-width:600px!important;
            width:100 % !important;
    }
</script>

O elemento !important é usado para dar prioridade à aquele estilo que está sendo aplicado, os media query contém a mesma sintaxe do comum: @media screen and (max-width:550px) { /* seu código aqui */ };

Palavras e Observações

Evite colocar no assunto de seu email marketing letras maiúsculas ou coisas como “clique aqui”. Algumas palavras ajudam seu email marketing a cair em SPAM, são detalhes que podem acabar manchando sua reputação nos provedores de email.

Palavras com conteúdo para chamar atenção que pareça “lixo eletrônico”, frases como “não perca!” ou “quer ganhar dinheiro?” e nomes demedicamentos (Viagra, Vicodin, etc) contribuem para que seu email marketing vá direto para a caixa de SPAM. Você pode consultar a lista de palavras chave de spam indicadas pela equipe ABMail aqui.

Outra observação é o tamanho das letras, no Gmail, por exemplo, há algo como se fosse uma “pontuação” se no seu <span> você coloca um font-size:XXpx, sendo que o tamanho de sua fonte seja 11px ou menos, isso conta como “1 ponto”, e quanto mais pontos, maior a chance de cair na caixa de SPAM. Isso poderá ser interpretado como aquelas famosas letras miúdas, que é considerado como algo pejorativo ou malicioso. É recomendado que se use fontes de 12px ou mais.

Tamanho de fonte “em”

A medida de letras “em”, diferente do pixel que é algo estático em qualquer tela, consiste em um tamanho de fonte que é baseado na escala em relação a tela, o porém é: Para usar este tamanho de fonte você precisa de um tamanho de fonte definido em um box (table, body...) para poder tirar a média e chegar ao seu resultado de “em”. Tenha em mente que o tamanho padrão de fonte para os navegadores é 16px, ou seja, 1em = 16px = 100%.

Sendo assim, se o valor da “font-size” for 1em, 16px ou 100% o resultado será o mesmo para ambos os casos. Agora que o tamanho da fonte padrão está definido (recomendo que faça no body), você vai fazer a seguinte conta:

Alvo / Tamanho definido no corpo = Resultado “em”

Um breve exemplo:
18px / 16px = 1.125em

Mas e se o tamanho da fonte escolhido como base for diferente?
Simples, você substitui: 18px / 22px = 0.8181em

Explicando melhor: O tamanho base da fonte que eu escolhi e coloquei como padrão na tag <body> é de 22px, para alcançar a fonte desejada, divido o tamanho desejado pela base.
Logo, no caso, 1em = 22px = 100%.

Este é o método mais apropriado para criação de template que sejam realmente responsivos e que sejam fluídos.

Acentos

Os acentos quando feitos em Html e passados para um email marketing devem ser feitos em um padrão chamado Html Entities para que, assim que enviado, o “á” por exemplo, não saia quebrado, como mostrado abaixo:

• “á” (“a” com acento agudo) é equivale a "&aacute;"
• “é” (“e” com acento agudo) é equivale a "&eacute;"
• “ç” é equivale a "&ccedil;"

De forma resumida os acentos ou caracteres especiais devem ser escritos usando o padrão html entities, sempre iniciando com um & (“E” comercial), a letra que irá receber o acento, e por fim o nome do acento em inglês.
"&aacute;" resultara em “á”.

Filtros AntiSpam

Os provedores de email têm duas listas, a Black List e a White List.
Black List: Uma Black list de email marketing é uma lista de domínios ou servidores conhecidos por enviar spam. Muitos provedores de email mantém suas próprias Black lists, o que resulta em bloqueio de mensagens cortando o mau pela raiz. Isso significa que suas mensagens sequer irão chegar à lixeira de seu destinatário. Todos os servidores de internet mantém essas listas e compartilham entre si para reduzir ainda mais o número de spams.
White List: É o oposto da Black List, uma lista de remetentes de email marketing confiáveis. Se seu domínio está em uma White List, tenha certeza que ele será entregue ao destinatário sem cair em Spam.
Filtros AntiSpam funcionam de tal forma:

• Comparam os emails que chegam com as Black e White Lists do próprio usuário
• Libera as mensagens dos remetentes da White List
• Classificando Spam através de uma lista de palavras como a de que foi passada aqui (link para a página de palavras de spam) Existem vários tipos de filtros de Spam:
  • Por endereço de Ip do remetente
  • Por domínio
  • Por remetente/usuário, quando já tem um histórico de spam por ocorrências anteriores
  • Por cabeçalho e conteúdo escrito através de filtros. Estes filtros não se baseiam em apenas uma regra, eles verificam todas as palavras do email marketing, assim como links e o próprio código HTML, e aprendem com denúncias de Spam.

Ultimas Recomendações

Dicas para criar Template de Email Marketing opt-in e fugir dos filtros de Spam:

• Mantenha seu código HTML o mais limpo possível
• O peso máximo recomendado para um arquivo HTML para email marketing é de 20Kb
• O assunto de seu email marketing deve ser o mais curto possível, evitando palavras utilizadas pelos Spammers, como aquelas do exemplo
• Os links devem ser curtos, no máximo de 256 caracteres
• Evitar linhas muito longas de Html e também na mensagem TXT (texto alternativo), o padrão recomendado é de 1.024 caracteres por linha