Separamos aqui algumas dicas de HTML que demonstram a melhor maneira de formatar textos, links e imagens no email marketing.

Textos

Até pouco tempo atrás, muitos webmails não interpretavam corretamente CSS. Atualmente, ainda existem algumas limitações, mas o uso de CSS na forma inline para formatação de textos já é bem aceito nos clientes de email:

<p style="font-family:arial, sans-serif; font-size: 12px; color:red; font-weight:bold;" > Esta formatação produz um paragrafo de texto em fonte Arial, tamanho 12px, em vermelho e negrito </p>

O recomendado ainda é usar o < font >, pois desta forma o código não fica tão extenso.

- Para formatar texto com a tag < font >

< font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000" > Parágrafo de texto com a fonte Arial, tamanho 2, em vermelho. < /font >

Imagens

O atributo “alt” oferece um texto alternativo quando alguma imagem não carrega ou não pode ser visualizada. Esse atributo é muito usado para melhorar a acessibilidade de uma página na web e principalmente de um email marketing, já que muitos clientes de email bloqueiam as imagens enviadas por remetentes desconhecidos do destinatário. Nesta situação, a função do atributo é facilitar a “pré-leitura” para o usuário. O atributo ALT pode ser formatado para a leitura ficar mais organizada:

< font face="Arial, Helvetica, sans-serif" size="2" color="#FF0000" > < img src="email_01.jpg" alt="Conheça mais sobre ...." width="186" height="31" >< /font >

Em imagens e quaisquer outros elementos de bloco do HTML, evite o uso das propriedades de posicionamento, como position, left, top, clear e float. Apesar de suportarem CSS inline, estas propriedades não são muito bem aceitas pelos clientes de email.

Links

Para formatar a aparência do link, basta colocar uma formatação de cor de fonte entre as tags.

< a href="#" target="_blank" style="text-decoration:none;" >
< font color="#009900" > Exemplo de link com formatação. < /font > < /a >

Lembrando que, através dos atributos face e size da tag font, é possível também alterar o tamanho e tipo de fonte utilizados para o link.

Se necessário, você pode remover o sublinhado dos links através de CSS. Na tag, insira o trecho style= “text-decoration:none;” (como indicado no exemplo acima). Isso irá remover o efeito de sublinhado do link. Mas não se esqueça que as pessoas associam textos sublinhados com links, tornando sua identificação mais rápida em meio aos demais textos.

Fonte: VirtualTarget