Layout de mensagens HTML para email marketing

Neste artigo serão abordados alguns pontos importantes a serem levados em consideração na hora de programar visualmente os elementos de layout de sua mensagem HTML. Você terá que levar em conta que sua mensagem irá passar por diversas situações como diferentes filtros de código por parte dos programas de email, tamanho de painéis de leitura, avisos de recebimento de email, filtros anti-spam, etc. Portanto, a maioria dos emails HTML seguem algumas “regras” que você não poderá desobedecer. Isso não significa que as mensagens ficarão engessadas ou todas iguais, pelo contrário, é possível elaborar designs bem criativos.

• Dimensões

A maioria dos programas de email possuem os chamados painéis de visualização. São “previews” que possibilitam o usuário visualizar a mensagem antes de afetivamente abri-la em tela cheia. Com o grande volume de emails recebidos diariamente, é comum a navegação pelas mensagens apenas visualizando seus conteúdos nos painéis. A largura máxima recomendada para uma correta visualização é de 550 pixels. Já a altura fica mais livre, porém vale usar do bom senso e não deixar a mensagem muito extensa, pois criará uma necessidade de rolagem vertical que pode se tornar chata.

• Posicionamento de imagens e links

Como os painéis de visualização ficam posicionados à direita na tela, convém manter os elementos principais de seu layout na esquerda. Por exemplo, a logomarca pode ficar prejudicada se for posicionada na direita e dependendo da largura da mensagem pode até ser cortada. Links de descadastro também devem ser posicionados na esquerda, onde o destinatário poderá facilmente encontrá-lo. Respeitar a privacidade não é apenas colocar um link para descadastro (opt-out), mas sim colocá-lo numa posição de fácil acesso.

• Avisos de recebimento

Sabe aquela “caixinha” que aparece quando você recebe uma mensagem? Alguns programas de email como o Microsoft Outlook mostram esse aviso com mais informações além do nome de remetente, apresentam o início do texto do corpo do email recebido. Então, é importante pensar nesse detalhe. Se o início do texto de seu email for sem graça ou simplesmente irrelevante, é possível que sua mensagem seja ignorada e deletada antes mesmo de ser lida.

• Código HTML x design

Cuidado para um código HTML mal escrito não estragar seu layout. Se você perder a configuração de fonte, seu design pode ir por água abaixo. Cor de fundo de tabela também pode não aparecer. Tudo vai depender dos cuidados que você terá e dos testes que você vai fazer em diferentes programas de email. Fique atento apara alguns pontos como estilo CSS, que deve ser “in line” e imagens de background.

• Imagem x texto

Procure mesclar imagens com texto. Evite enviar uma imagem única como seu email marketing, pois existe a possibilidade de um filtro anti-spam barrá-la por não identificar seu conteúdo (os filtros não conseguem ler o que está escrito na imagem). Portanto, utilize imagens onde realmente precisa. Lembre-se que muitas pessoas não têm habilitado o download de imagens no programa de email, por isso é aconselhável você colocar sua mensagem principal em formato de texto ou colocar texto alternativo vinculado à imagem (se não mostrar a imagem, mostra o texto).