Ajuda: preparando arte para e-mail marketing em html

10/07/2018 - por: Marcelo Bozi

Já está para lá de comprovado: o e-mail marketing em HTML possibilita uma experiência bem mais rica para a sua base de contatos de campanha. Junto com um assunto 'matador', gerenciamento de leads com adoção das melhores práticas e entregas contextuais segundo sua régua de relacionamento, o e-mail ainda é uma mídia capaz de excelentes entregas.

Contudo, o padrão html para e-mail costuma impor algumas restrições na hora da criação elaborar aquele layout que precisará ser transformado em código.

Para orientar nossos clientes no preparo de 'artes' de e-mail marketing no seu programa de criação favorito, de maneira que o formato HTML fique mais "fidedigno" à arte original, listamos abaixo 6 pontos essenciais para serem observados, baseados nos erros mais comuns que constatamos:

1. O assunto vem antes de tudo!

Se o email não for aberto, o destinatário irá ver o seu layout e sua copy matadores? Resposta: não.

O Assunto está para o email, assim como o título do anúncio está para uma campanha de Google ADS. Quanto mais pessoas se sentirem atraídas pelo assunto, mais clicarão. Quanto mais cliques, mais aberturas. Quanto mais aberturas, mais cliques no botão que leva para o site. Quanto mais tráfego no site, maiores as chances de conversões. Mais conversões podem trazer mais vendas. Viu como um assunto é importante?

Pesquisa recente com diretores de criação e com redatores revelou que 98% deles se sentiriam mais confiantes para criar o conteúdo de um e-mail, se eles soubessem, previamente, qual o assunto da mensagem. Portanto, uma campanha de email marketing cujos assuntos são definidos na última etapa (disparo) tendem a não converter tanto.

2. Largura da arte

Na hora de iniciar a criação da arte, ou adaptar a peça para as dimensões específicas de e-mail, dimensione o arquivo para 600 pixels de largura. E, na hora de definir a altura, é sempre bom usar de bom senso: peças muito compridas demandam mais tempo de carregamento e mais tempo do destinatário para a leitura completa. Em tempos de excesso de informação e bombardeio comunicacional, ser objetivo e prático são o novo 'pretinho básico'.

3. No máximo 2 colunas

Desmembrar um arquivo PNG, JPG, GIF (etc.) em blocos de imagens e textos selecionáveis (abertos) exige um processo chamado "fatiamento". E nem todos os programas de leitura de e-mail ou serviços de webmail costumam respeitar a construção dos blocos de forma harmônica.

O resultado disso é aquele layout bonito feito pela criação aparecer todo desfigurado na hora de se conferir a mensagem html na tela. Por isso, caso opte por elaborar uma arte usando colunas, não faça mais do que 02 (duas).

4. Não se empolgue na tipografia

Na hora de compor a arte, vale usar qualquer tipo de fonte? Resposta: não.

Uma das vantagens do formato html é fazer conviver numa mesma peça, imagem e textos abertos. Contudo, não adianta usar aquela fonte fenomenal mas que só existe no seu computador. Na hora que o destinatário for abrir a mensagem, ele verá o texto com fontes-padrão do seu cliente de e-mail. Normalmente Helvetica, Arial, Calibri, Verdana, Sans Serif e congêneres.

5. Não se empolgue com efeitos!

Menos é mais! Evite chanfros, entalhes, sombreados, contornos não usuais em elementos como botões e caixas. Fica bonito no bitmap ou no arquivo vetorial, mas é impraticável para os leitores de HTML de mensagens de emails, que são bem mais limitados que páginas de sites. No máximo, use boxes e elementos com preenchimento de cor e cantos arredondados. Esses recursos um CSS simples conseguirá garantir.

6. Resolução e tipo de arquivo artefinalizado

Este tópico é sem rodeios: na hora de definir a resolução da sua arte que vai ser transformada em HTML, use 72 dpis. Sem medo de ser feliz. E claro: o modo de cor é RGB. E na hora de fechar, prefira salvar em PNG. O JPG será sua segunda opção.

7. Não esqueça do call-to-action

Um componente muito importante de um bom e-mail marketing é o CTA (Call To Action). Afinal, se a mensagem foi capaz de gerar um #quero por parte do destinatário, como ele avança para o próximo passo? Faz um cadastro numa landing-page? Liga para alguém? Baixa um arquivo? Portanto, não deixe de usar um call to action destacado, numa fonte com formatação diferenciada, e se achar necessário, crie e aplique um botão abaixo com um rótulo complementar ('Clique aqui', 'Acesse aqui o site', 'Cadastre-se aqui' ...). Exemplos de CTAs:

  • Faça agora mesmo o seu cadastro!
  • Solicite agora mesmo um orçamento!
  • Agende uma visita!