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 e-mail, tamanho de painéis de leitura, avisos de recebimento de e-mail, filtros anti-spam, etc. Portanto, a maioria dos e-mails 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 e-mail 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 e-mails 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 para o leitor.
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 e-mail 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 e-mail recebido. Então, é importante pensar nesse detalhe. Se o início do texto de seu e-mail 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 e-mail. 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 e-mail 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 automático em seus programas de e-mail, 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).
