Pois é, bem-vindo ao clube! Fazer HTML para e-mail é diferente de HTML para Web. Por questões de segurança (e alguma birra), os programas e serviços de e-mail só aceitam certo tipo de código HTML. E como cada um lê esse código à sua maneira, a sua newsletter vai provavelmente aparecer mal no Gmail mesmo que consiga pô-la a aparecer perfeitamente no Outlook.
Então o que fazer? Não desespere. Temos 10 dicas para lhe facilitar o trabalho.
1) Faça das tabelas as suas maiores amigas
Lembra-se quando os alinhamentos das páginas Web ainda se faziam todos com tabelas? Pois é, prepare-se para regressar aos velhos tempos e programar HTML como se ainda estivesse nos anos 90! Esqueça posicionamentos por DIV e CSS e crie toda a estrutura do e-mail só com base em tabelas.
Para isso, comece por gerar uma tabela-mestra e vá criando dentro dela algumas outras tabelas para os principais conteúdos (nested tables). Quanto aos espaçamentos, faça sempre paddings na própria célula (<td>) da tabela ou use imagens GIF transparentes (spacers). E, sempre que possível, dê tamanhos fixos a todas as células ou tabelas que contenham directamente 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>
2) Use e abuse do CSS inline
Para não se arriscar a que os webmails (em especial o Gmail) cortem todos os estilos CSS da sua newsletter, insira sempre o CSS directamente em cada elemento (célula, link, parágrafo, etc.). Dá uma trabalheira, mas vai ver que vale a pena, pois é compatível com tudo. Veja este exemplo para um parágrafo:
<p style="font-family:Arial; font-weight:bold;font-size:11px; color:#050;">Este parágrafo com CSS inline aparece bem em qualquer leitor de email!</p>
3) Use ALT e TITLE nas imagens
Quanto mais pessoas abrirem as imagens da sua newsletter, maior a reactividade e menos hipóteses tem de cair no spam em futuros envios! Como, por segurança, os programas de e-mail bloqueiam automaticamente as imagens (as pessoas têm de clicar num botão para as verem), insira uma tag ALT e TITLE em cada uma com uma descrição apelativa para incentivar à visualização!
4) Nunca mude o tamanho das imagens por HTML
Aquela imagem ficava melhor se fosse um pouco mais pequena? Não lhe arraste os cantos no Frontpage ou Dreamweaver para mudar o tamanho! Além de ficar com má qualidade, programas como o Outlook mostram sempre a imagem no tamanho original e estragam toda a formatação!
Por isso, mude sempre o tamanho num programa de desenho à parte (ex. Paint, Picasa, Fireworks, etc.) e insira a imagem no seu HTML já com o tamanho final correcto. Se quiser, o E-goi pode fazer automaticamente essa conversão de tamanho.
5) Conte com o pior dos casos
A sua news fica muito bonita com imagens, mas enquanto as pessoas não permitirem o carregamento das imagens quando a receberem, apenas verão texto e o esqueleto das tabelas.
Portanto, assegure-se de que nessa situação o e-mail aparece pelo menos bem 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 news.
6) Cuidado com os espaços brancos nos recortes
Se recortar uma imagem muito grande em várias imagenzinhas inseridas nas diferentes células de uma tabela, os recortes podem não colar bem ao serem mostrados em certos programas de e-mail (fica uma espécie de mosaico). Para evitar isso, assegure-se de que em cada <td> do recorte insere o seguinte estilo:
style="line-height: 50%;"
7) Faça código HTML leve e limpinho
O Frontpage, Dreamweaver e afins geram bom código para a Web, mas todos aqueles <title>, <head>, <doctype>, <html> e <body> vão ser ignorados por muitos leitores de e-mail (e pode também dizer adeus a qualquer Javascript). Tire já essas tags do seu código! O melhor HTML começa em <table> e acaba em </table> (mas não exagere nas nested tables)! Não se esqueça: quanto mais complexo e pesado o seu HTML, mais probabilidades tem de ser apanhado pelos filtros anti-spam.
8) 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 widescreen de 22 polegadas vai reduzir-se a um pedacinho indecifrável nos leitores de e-mail. Aponte para um máximo de 600-700 píxeis de largura. Ao fazer a antevisão da sua campanha no E-goi, já aparece uma régua que o ajuda a determinar a largura ideal.
9) Não perca tempo a tentar pôr a newsletter perfeita em absolutamente todos os leitores de e-mail
Cada programa e webmail trata a sua newsletter de forma diferente (o E-goi mostra-lhe exactamente essas diferenças). Dificilmente conseguirá pô-la em condições para todos. Por isso, comece por saber quais são os programas e webmails que a sua audiência mais usa (basta ver o relatório das campanhas que já enviou no E-goi) e concentre-se em optimizar a news para esses casos.
10) Crie um modelo para a sua newsletter
Já testou a fundo o seu HTML? Está pronto a usar? Óptimo, mas antes não se esqueça de o guardar à parte como modelo (template) para futuras newsletters. É mais seguro do que alterar o conteúdo de envios posteriores! Pode criar um modelo no seu computador ou directamente no próprio E-goi. Basta guardar a campanha como modelo e usá-lo mais tarde sempre que precisar!