Dicas para um bom HTML para email marketing – parte II

No post anterior reunimos algumas dicas mais genéricas para um bom HTML para email marketing. Neste post vamos tratar sobre formatação de texto e sobre imagens.

1. Use fontes comuns.

Evite usar fontes fora do padrão ou pagas: a substituição dessas fontes via @font-face ou cufon simplesmente não funciona corretamente em todos os programas de email ou webmails. Tente usar fontes amigáveis para web para a maioria do texto, e limite o uso de fontes “embedded” para títulos ou texto de banner.

2. Use “margin-bottom” para espaçamento entre linhas e parágrafos.

Cada programa de email e webmail parece tratar margens, “padding” e espaçamento entre linhas de forma ligeiramente diferente. Nem todos os estilos de margem e parágrafo são suportados por todos, e Hotmail aparentemente suporta apenas o stilo magin-bottom. Assim, vai conseguir o melhor resultado usando uma definição de parágrafo desta forma:

<p style=”padding:0px;line-height:20px;margin:0px;magin-bottom:15px”>

3. Evite “sub headings”.

O suporte a “sub headings” H2 a H6 pelos programas de email e webmails não é geral, portanto se possível use somente H1, ou use um parágrafo separado.

4. Evite “ul” e “ol” para lista de itens.

O suporte a lista ordenada de itens ol ou sem ordenação ul, pelos programas de email e webmails, também não é geral. Substitua com uma tabela de 2 colunas, a primeira coluna contendo o caracter HTML &bull; ou o número em caso de lista numerada, e a segunda coluna contendo os itens.

5. Use o atributo de texto “alt” para links de imagens.

Os programas de email e webmails não mostram mais imagens contidas nos emails recebidos, mas mostram o texto contido no atributo alt. Assim, um texto com significado vai chamar a atenção do destinatário do email, no lugar de um retângulo vazio. Por exemplo:

<img src=”logo_empresa.png” alt=”Vox Blue Marketing e Internet”>.

6. Use links absolutos para imagens.

Faça upload e armazene as imagens do email HTML em um servidor web, e faça referência às imagens com links absolutos. Apesar de ser possível embutir imagens diretamente num email através de anexo MIME, imagine o tempo e os recursos de servidor necessários  para mandar um email com imagens totalizando 1MB para 100 mil destinatários! Emails com imagens embutidas também são mais barrados pelo filtro antispam.

7. Use “align left” para imagens.

Evite usar style=”float:left”, e use em seu lugar align=”left”, pois o suporte a este segundo é mais amplo.

8. Use “display:block” para webmails.

Alguns webmails inserem linhas brancas acima e abaixo de imagens, as quais ficam muito aparentes quando duas ou mais imagens devem ser concatenadas. Use style=”display:block;” no tag img (caso a referência à imagem seja direta) ou style=”line-height:0px;” no tag td (caso a imagem esteja colocada dentro de uma célula de tabela).