Truques de HTML para Email marketing

Deixámos 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=”Virtual Target” 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.

Um artigo VirtualTarget

Deixe uma resposta