Banner na assinatura de e-mail: formatos, peso e boas práticas

O banner é o elemento da assinatura que carrega uma mensagem temporária: um evento, uma vaga, uma novidade. As restrições técnicas dele se parecem com as do logo, mas as restrições de design são as de uma peça publicitária vista por um segundo.

As dimensões

A largura do banner é limitada pela largura da assinatura, que por sua vez é limitada pelas telas de celular.

Um banner mais alto invade a mensagem e dá a impressão de anúncio. Um banner mais estreito que a assinatura cria um desalinhamento visual desagradável: alinhe a largura dele com a do bloco.

Assim como no logo, a exportação é feita no dobro — 1.200 × 200 px para uma exibição a 600 × 100 —, com as dimensões definidas pelos atributos HTML width e height; caso contrário, o Outlook exibe a imagem no tamanho original. Os detalhes estão em assinatura de e-mail em HTML.

O peso

Fique abaixo de 60 KB para um banner estático e de 150 KB para um GIF animado.

A questão não é a largura de banda, e sim a percepção. As imagens de um e-mail carregam depois do texto: um banner pesado aparece atrasado, e o destinatário vê primeiro um espaço vazio embaixo da assinatura. A impressão é de uma mensagem malfeita.

Uma compressão PNG sem perdas geralmente reduz o peso pela metade sem diferença visível. Para um visual fotográfico, JPEG com qualidade 80 é um bom meio-termo.

As regras de design

Uma única mensagem. É a regra mais desrespeitada. Um banner que anuncia uma feira e um e-book e uma vaga não transmite nenhum dos três. Se você tem três mensagens, faça três campanhas sucessivas.

Um título curto. Cinco a oito palavras. No tamanho real de exibição — muitas vezes reduzido pelo cliente de e-mail —, um título longo fica ilegível.

Uma ação explícita. “Inscreva-se”, “Ver as ofertas”, “Baixar o relatório”. O texto deve dizer o que acontece ao clicar.

Contraste suficiente. O banner é visto em um segundo, às vezes na tela de um celular ao ar livre. Texto escuro sobre fundo claro, ou o contrário, mas nada de cinza sobre cinza.

Espaço em volta do texto. Uma margem interna de pelo menos 16 px. Um texto grudado na borda parece acidental.

A área clicável

O banner inteiro deve ser clicável, e não só a área que parece um botão. É uma imagem envolvida por um link:

<a href="https://exemple.fr/salon" style="display:block;text-decoration:none">
  <img src="https://cdn.exemple.fr/banniere@2x.png"
       width="600" height="100"
       alt="Salon Vivatech — Hall 2, stand B34. Prendre rendez-vous."
       style="display:block;border:0;width:600px;height:100px" />
</a>

Dois detalhes importam. O atributo alt deve descrever a mensagem e a ação: é o que verá um destinatário cujo cliente bloqueia imagens, e o que um leitor de tela vai ler. E border:0 remove a borda azul que alguns clientes adicionam em volta de uma imagem com link.

Bom saber: use uma URL de destino rastreável, diferente para cada campanha. Sem isso, você não conseguirá atribuir o tráfego ao banner certo — veja como medir o ROI.

O caso da animação

Um GIF animado chama mais a atenção, mas algumas versões do Outlook exibem apenas o primeiro quadro. A regra que decorre disso é absoluta: a mensagem essencial precisa estar no primeiro quadro, e a animação serve apenas para enriquecer.

O tema, incluindo as questões de peso e número de repetições, é tratado em banner animado na assinatura.

O que diferencia um bom banner de um bom anúncio

Vale destacar uma diferença de tom. O banner aparece embaixo da assinatura de uma pessoa, em uma mensagem profissional enviada a alguém que a conhece. Um tom publicitário carregado destoa ali e respinga no remetente.

Os banners que funcionam melhor se parecem menos com um anúncio e mais com uma informação útil: a data de uma feira, uma vaga aberta, um relatório disponível. O catálogo de formatos sazonais está em 12 ideias de campanhas, e o panorama geral do canal em marketing por assinatura de e-mail.

Por fim, confira a renderização antes de publicar. Um banner perfeito em uma ferramenta de design pode aparecer cortado ou redimensionado em um cliente de e-mail: a pré-visualização em vários clientes do editor evita a surpresa desagradável depois do envio para trezentas pessoas.