Banner animado na assinatura: o que aparece em cada cliente de e-mail

A animação chama a atenção, e é exatamente isso que se busca em um banner. Mas, em um e-mail, ela não se comporta como na web: dependendo do cliente de e-mail do destinatário, o seu GIF se anima ou fica parado em um único quadro.

O que cada cliente exibe

O caso especial é, portanto, o Outlook para Windows nas versões clássicas, que exibe o primeiro quadro sem reproduzir o resto. Esse cliente continua muito presente nos parques corporativos, o que basta para impor uma regra de criação — a tendência de fundo está descrita em o que muda com o novo Outlook.

A regra que torna a animação livre de riscos

Ela cabe em uma frase: a mensagem essencial precisa estar no primeiro quadro.

A animação passa a ser um complemento para quem a vê, e a ausência dela não priva ninguém da informação. Na prática, o primeiro quadro deve conter sozinho o título, o elemento de identificação e a chamada para ação.

O que não fazer: montar uma sequência em que a mensagem se revela aos poucos — uma palavra por quadro, ou uma chamada que só faz sentido depois de três segundos. Para parte dos seus destinatários, o banner vai mostrar apenas um fragmento incompreensível.

Bom saber: o teste mais simples é exportar só o primeiro quadro e olhar para ele. Se ele se sustentar sozinho, sua animação é segura. Caso contrário, revise a montagem.

A restrição de peso

Um GIF animado pesa a soma dos seus quadros. Com um teto de 150 KB para um banner de 600 px de largura, cabem na prática quatro a cinco quadros — não mais.

Três alavancas ajudam a respeitar esse orçamento. Reduzir o número de quadros, preferindo transições secas a fades, que multiplicam as etapas intermediárias. Limitar a paleta de cores, já que o GIF, de qualquer forma, é limitado a 256 cores. E animar apenas uma parte da área, mantendo o fundo fixo: assim os quadros seguintes armazenam somente a região que muda.

O orçamento de peso total de uma assinatura é tratado em banner de assinatura de e-mail: formatos e peso.

Quantas repetições

Três opções, com efeitos diferentes.

Uma única reprodução. A animação roda e para no último quadro. É a escolha mais segura: a atenção é captada uma vez, e depois o banner fica estável. Nesse caso, garanta que o último quadro também traga a mensagem, já que é ele que ficará na tela.

Duas a três repetições. Um meio-termo comum, que dá uma segunda chance a um destinatário que estava olhando para outro lado.

Loop infinito. Evite. Um banner piscando sem parar embaixo de cada mensagem de uma conversa logo fica irritante e dá um tom publicitário que destoa de uma troca profissional.

O que não funciona de jeito nenhum

Vídeo. As tags de vídeo não são suportadas pelos clientes de e-mail. A prática comum é uma imagem estática que remeta a um vídeo — com um botão de play desenhado — e link para a página onde ele está hospedado.

Animações CSS. Elas não sobrevivem à limpeza do HTML feita pelos webmails, nem ao mecanismo de renderização do Outlook. Veja assinatura de e-mail em HTML.

SVG animado. Não é exibido e, às vezes, é bloqueado por razões de segurança.

O GIF continua sendo, portanto, o único formato de animação utilizável, com os seus limites.

Vale a pena animar?

A pergunta merece ser feita, e não respondida por princípio. A animação chama a atenção, mas acrescenta peso, complica a produção e impõe a restrição do primeiro quadro.

Ela se justifica para uma mensagem que realmente ganha com a sequência: uma contagem regressiva antes de um evento, uma sucessão de três logos de parceiros, a revelação de um número. Ela não se justifica para uma mensagem que cabe em uma frase — ou seja, a maioria das campanhas descritas em 12 ideias de campanhas.

Na dúvida, um banner estático bem feito, com contraste nítido e uma chamada para ação clara, costuma render o mesmo com um décimo do esforço. E você pode comparar: o acompanhamento por campanha descrito em medir o ROI permite testar uma versão animada contra uma versão estática em dois períodos comparáveis.