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