10 dicas de HTML para fazer emails à prova de erros

Já alguma vez teve uma surpresa desagradável ao ver que a sua newsletter, que criou com tanto cuidado no Frontpage ou Dreamweaver, fica toda desformatada no Outlook, Hotmail ou Gmail?

Pois é, fazer HTML para email é muito diferente de HTML para a Web! Por questões de segurança (e alguma birra), cada programa e serviço de email lê código HTML à sua maneira, o que faz com que a sua newsletter apareça mal nuns casos e mal noutros.

Então o que fazer? A solução mais simples é criar a newsletter com o nosso editor Easygoi (quer do zero ou com base num dos nossos modelos), pois o código gerado pelo Easygoi segue as normas do email marketing e é compatível com os principais programas e serviços de email. Mas se é designer e prefere fazer a sua newsletter à mão no Frontpage ou Dreamweaver, não desespere. Temos 10 dicas para facilitar o trabalho!

 

Faça das tabelas as suas maiores amigas

Lembra-se quando os alinhamentos das páginas Web se faziam com tabelas? Prepare-se para regressar aos velhos tempos e programar HTML como se estivesse nos anos 90! Esqueça posicionamentos por DIV e CSS e crie toda a estrutura do seu email exclusivamente com tabelas.

Para isso, comece por gerar uma tabela-mestra e vá criando dentro dela outras tabelas para os principais conteúdos (chamam-se "nested tables"). Quanto aos espaçamentos, faça sempre paddings na própria célula () da tabela ou use imagens GIF transparentes (também chamados "spacers"). E, sempre que possível, dê tamanhos fixos a todas as células ou tabelas que contenham imagens e texto, como neste exemplo:
 

     

<table cellspacing="0" cellpadding="10" border="0">
<tr>
 <td width="200">Isto é um conteúdo</td>
 <td width="400">Isto é outro conteúdo</td>
</tr>
 </table>



 

Use e abuse do CSS inline

Para que os serviços de email (em especial o Gmail) não cortem todos os estilos CSS da sua newsletter, insira sempre o CSS dentro de cada elemento (célula, link, parágrafo, etc.). Dá uma trabalheira, mas vai ver que vale a pena, pois este método é compatível com tudo. Veja este exemplo de um parágrafo:
 

Este parágrafo com CSS inline aparece bem em qualquer leitor de email!

 

Use ALT e TITLE nas imagens

Quanto mais pessoas abrirem as imagens da sua newsletter, maior o seu nível de engagement e maior a reputação dos seus envios junto dos ISP, o que reduz imenso a probabilidade de cair no spam! Mas como, por segurança, os programas de email bloqueiam imagens (é preciso clicar num botão para carregá-las), insira uma tag ALT e TITLE em cada uma com uma descrição apelativa para incentivar as pessoas a carregar sempre as imagens!

 

Nunca mude o tamanho das imagens por HTML

Quer reduzir o tamanho de uma imagem da newsletter? Não arraste os cantos dela no Frontpage ou Dreamweaver! Além de ficar com má qualidade, o Outlook (e outros programas) costuma mostrar a imagem no tamanho original, o que arruina toda a formatação do seu email!

Por isso, mude sempre o tamanho num programa de desenho à parte (ex. Paint, Picasa, Fireworks, etc.) e insira a imagem no seu código HTML já com o tamanho final.

 

Conte com o pior dos casos

A sua newsletter fica bonita com as imagens visíveis, mas não se esqueça de que enquanto as pessoas que receberem a newsletter não autorizarem o carregamento das imagens, apenas verão texto e o esqueleto das tabelas.

Portanto, assegure-se de que nessa situação o email aparece devidamente formatado. Uma boa técnica é usar em cada imagem as variáveis "width" e "height" para reforçar o tamanho. Deve também aplicar uma cor de fundo às tabelas e células que seja consistente com o esquema de cores da newsletter.

 

Cuidado com as linhas brancas no meio das imagens

Se recortar uma imagem muito grande em várias imagenzinhas inseridas nas diferentes células de uma tabela, o recorte pode não aparecer bem em certos programas de email (cada parte da imagem fica com uma separação branca). Para evitar este problema, assegure-se de que em cada imagem do recorte insere o seguinte estilo:
 

style="display: block"

 

 

Faça código HTML leve e limpinho

O Frontpage e o Dreamweaver geram bom código para a Web, mas todos aquelas tags do tipo "title", "doctype", "html" e "body" vão ser ignoradas por muitos leitores de email (e pode também dizer adeus a qualquer Javascript). Portanto, tire já essas tags do seu código! O melhor HTML começa em<table>e acaba em</table>(mas não exagere no número de tabelas). Não se esqueça: quanto mais complexo e pesado o seu HTML, mais probabilidades tem de ser considerado spam.

 

Atenção à largura!

Não caia na tentação de fazer uma newsletter tão larga como o seu ecrã. Aquilo que fica excelente no seu monitor de 22 polegadas vai reduzir-se a um pedacinho indecifrável nos leitores de email, sobretudo num smartphone ou tablet. Aponte para um máximo de 600-700 píxeis de largura. Ao antever a sua newsletter no E-goi, já aparece uma régua que ajuda a ver se está a exceder a largura ideal.

 

Não tente deixar a newsletter perfeita em todos os leitores de email

Cada programa e serviço de email trata a sua newsletter de forma diferente (a antevisão de leitores do E-goi mostra bem essas diferenças). Dificilmente será possível que fique perfeita em todos, por isso concentre-se apenas nos principais (Outlook, Gmail, Hotmail e Yahoo) e em qualquer outro que a sua audiência usa frequentemente (basta ver o relatório das campanhas que já enviou no E-goi, na área "Leitores de email").

 

Crie um modelo para a sua newsletter

Já testou o seu HTML? Está pronto a usar? Excelente, mas antes não se esqueça de gravá-lo como modelo para futuras newsletters. É mais seguro do que alterar o conteúdo dos envios que fizer! Pode gravar esse modelo no seu computador e importá-lo para o E-goi sempre que necessário. Também pode gravá-lo logo no próprio E-goi; basta editar a campanha, clicar em "Gravar" e escolher "Gravar modelo"!