Dicas para um bom HTML para email marketing – parte I

Aqui é a primeira parte da nossa compilação de dicas para desenvolver um bom HTML para email marketing. Aproveite!

Dicas Genéricas.

1. Considerações sobre design.

Sempre tente simplificar o design do HTML. Pode parecer óbvio, mas HTMLs complexos levam muito tempo para serem desenvolvidos e testados nos vários programas de email. É importante evitar recursos gráficos do estilo cantos arredondados ou sombras.

A grande maioria dos programas de email não mostram mais imagens automaticamente, e requerem que o destinatário do email clique num botão de “carregar imagens” ou “mostrar imagens”. Assim, é importante mostrar a essência da mensagem em forma de texto simples. para capturar a atenção do destinatário. Tente também manter uma relação alta de texto para imagem (mais texto do que imagem), para evitar filtros antispam.

Os programas de email normalmente têm um painel de navegação de pastas à esquerda, e num monitor moderno com resolução mínima de 1024×768 esse painel ocupa 400 pixels, deixando uma largura útil de quase 600 pixels para que conteúdo HTML seja inserido. A altura do email HTML pode variar bastante, mas concentrando o conteúdo importante nos primeiros 300 a 400 pixels vai permitir que seja visto por completo sem a necessidade de rolar a tela para baixo.

2. Usar tabelas.

Para o layout principal, prefira o uso de tabelas ao uso de DIV e CSS. Não há limitações no nível de tabelas (“tabela dentro de tabela”), e divida o design do HTML em linhas e colunas no mesmo estilo de formato básico HTML.

Se você quiser centralizar o email na horizontal, o melhor método é criar uma tabela principal com uma célula única e 100% da largura, e depois insira uma nova tabela alinhada de forma centralizada nesta célula. Se desejar colocar uma cor de fundo, não esqueça de colocar a cor de fundo branca (td bgcolor=”#FFFFFF”) na tabela principal.

Use também o tag HTML “td height”. Este tag, apesar da recomendação de se evitar seu uso, é suportado em todos os programas de email que aceitam HTML. Por exemplo, uma célula vazia (<td>&nbsp;</td>) provavelmente será ignorado pela maioria dos programas de email, mas será considerado caso a altura seja definida (<td heigth=”20″>&npsp;</td>).

3. Usar CSS “in-line”.

Evite usar CSS externo ou incluir CSS no cabeçalho do HTML, porque o suporte dos programas de email a CSS é limitado e muitos webmails simplesmente remove o CSS do cabeçalho. Em vez disso, use CSS-padrão “in-line” em todos os lugares – qualquer novo parágrafo, todos os tags, todos os links, etc. Sim, é um trabalho danado, mas vai compensar pela melhor aparência no geral.

Um exemplo de CSS “in-line” está ilustrado abaixo:

<p style=”font-family: Helvetica Light;font-size=12px;color:#7B246B;line-height=18px;padding:0px;margin:2px;margin-top:8px;”>

Use código de cores hexa de 6 dígitos completos, no lugar de código simplificado de 3 dígitos.

4. Testar, testar e testar!

Faça testes exaustivos de aparência do email HTML em múltiplas plataformas. Matenha contas de email nos principais provedores de email via webmail (Gmail, Hotmail, Yahoo, UOL, Terra, Globo), e use os principais programas de email (Outlook, Thunderbird, Apple Mail). Não esqueça de testar plataformas móveis (iPhone, iPad, Android).