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"!