Skip to content

10 dicas de HTML para fazer newsletters à prova de erros



Já alguma vez apanhou com um balde de água fria ao ver que a sua newsletter, que criou com tanto cuidado no Frontpage, Dreamweaver ou Fireworks, fica toda desformatada no Outlook, Hotmail ou Gmail?

Pois, estes problemas acontecem a todos. Mas como resolver este problema? 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 configurada no Gmail mesmo que consiga pô-la a aparecer perfeitamente no Outlook.

Então o que fazer? Não desespere. Vou partilhar 10 dicas para lhe facilitar o trabalho com as suas newsletters.

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 diretamente 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 diretamente 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 reatividade 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.

5) Conte com o pior dos casos

A sua newsletter 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 pixeis de largura.

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. 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(verificar no Google Analytics) e concentre-se em optimizar a newsletter para esses casos.

10) Crie um modelo para a sua newsletter

Já testou a fundo o seu HTML? Está pronto a usar? Ótimo, 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 diretamente no próprio E-goi. Basta guardar a campanha como modelo e usá-lo mais tarde sempre que precisar!

Estas 10 dicas foram criadas pela empresa E-Goi, especialista em Email Marketing.

Miguel Brandão on FacebookMiguel Brandão on FlickrMiguel Brandão on InstagramMiguel Brandão on LinkedinMiguel Brandão on TwitterMiguel Brandão on Youtube
Miguel Brandão
Miguel Brandão
Sou Miguel Brandão tenho formação académica em Marketing, Publicidade e R.P. frequentei durante 2 anos a licenciatura em Sistemas de Informação e Multimédia. Fui também estudante durante 1 semestre lectivo na Universidade de Salamanca (Espanha). Desde 2004 que trabalho Online para clientes e projetos próprios. Atualmente sou CEO da SEOlabs.pt com serviços de SEO. Sou responsável de diversos sites e blogs de diversos nichos em Portugal, Espanha, Brasil, Colômbia e Peru.