Resumindo
- Um cabeçalho de e-mail animado é quase sempre um GIF, porque a maioria dos clientes de e-mail exibe GIFs animados e pouquíssimos reproduzem vídeo.
- Algumas versões do Outlook para Windows mostram só o primeiro quadro de um GIF, então o primeiro quadro precisa funcionar como um design completo.
- Um tamanho comum de cabeçalho é 1200×600 pixels, exibido com 600 pixels de largura para ficar nítido em telas de alta densidade.
- Manter o GIF leve importa porque imagens grandes carregam devagar nos dados móveis, e loops curtos com pouco movimento pesam menos.
- Palavras importantes, como ofertas, datas e botões, devem estar em texto HTML vivo abaixo do cabeçalho, e não só dentro da animação.
Nesta página
Um cabeçalho de e-mail animado deve ser um GIF, com cerca de 1200×600 pixels exibido com 600 de largura, um loop curto, peso de arquivo modesto e um primeiro quadro que funcione sozinho como design pronto. Essa última regra é a que as pessoas esquecem: algumas versões do Outlook para Windows mostram só o primeiro quadro de um GIF animado, e quem bloqueia imagens só vê o seu texto alternativo. Crie primeiro para esses leitores, e depois acrescente o movimento como bônus para todos os outros.
Por que cabeçalhos de e-mail animados são GIFs
O suporte a vídeo em e-mail é raro e pouco confiável. O GIF animado, um formato de imagem, aparece na maioria dos clientes, do Apple Mail ao Gmail. Formatos mais novos, como o WebP animado, têm suporte mais irregular nas caixas de entrada. Então o GIF continua sendo a escolha prática, com todos os seus limites: no máximo 256 cores por quadro e arquivos maiores que vídeo. Esses limites moldam o design. A comparação completa está em GIF ou MP4.
Por quê
Recomendação
Por quê
Recomendação
Por quê
Recomendação
Por quê
Recomendação
Por quê
Recomendação
Por quê
Crie o primeiro quadro como plano B
Trate o primeiro quadro como o cabeçalho do e-mail e a animação como um extra. Se as suas palavras deslizam a partir do nada, um leitor no Outlook vê um bloco de cor vazio. Se o seu produto aparece no segundo dois, ele nunca vê o produto. Coloque na tela tudo o que importa no quadro um, e deixe o movimento acontecer em volta.
Quadro um: completo. Todas as palavras estão no lugar, então quem só vê este quadro não perde nada.
No meio do loop: as palavras ficam no lugar enquanto a cor muda atrás delas. O movimento acrescenta clima, não informação.
- Palavras paradas, fundo em movimento. Cor flutuando atrás de um título fixo é o cabeçalho animado mais confiável que existe.
- Um movimento pequeno. Uma palavra que muda, uma linha que se sublinha, um leve deslocamento de luz. Uma ideia por cabeçalho.
- Termine onde começou. Um loop que salta de volta ao início parece quebrado. Faça o último quadro levar ao primeiro, como em loop perfeito.
- Nada de piscar. Mantenha as mudanças de brilho lentas. Piscadas rápidas incomodam e podem fazer mal.
Como manter o GIF leve
A maior parte do peso de um GIF vem dos pixels que mudam entre quadros. Um cabeçalho em que o quadro inteiro se move é pesado; um em que um gradiente lento flutua atrás de palavras paradas é bem mais leve, porque o codificador guarda só o que mudou. Cortar a largura pela metade reduz os pixels a mais ou menos um quarto, então decida cedo se este cabeçalho precisa de 1200 px ou se 600 px bastam.
- 1
Crie em 1200×600
Monte o cabeçalho com todas as palavras no lugar desde o primeiro quadro.
- 2
Mantenha o loop curto
Dois a cinco segundos, com cada movimento completando um ciclo inteiro.
- 3
Exporte em GIF a 10 a 15 fps
Use uma paleta construída a partir da própria animação, não uma genérica.
- 4
Confira o peso
Se estiver pesado, tente 600 px de largura, menos quadros ou menos movimento antes de reduzir a qualidade.
- 5
Confira o quadro um sozinho
Abra o GIF num visualizador de imagens que mostre só o primeiro quadro, ou envie um teste para o Outlook no Windows.
Os comandos de exportação detalhados e as configurações de paleta e pontilhado estão em GIFs animados.
HTML para um cabeçalho de e-mail animado
Codifique o cabeçalho como uma imagem comum dentro de uma célula de tabela. Defina a largura de exibição tanto no atributo quanto no estilo, para que todos os clientes dimensionem corretamente, dê um texto alternativo descritivo e defina na célula uma cor de fundo igual à do primeiro quadro do GIF. Quando as imagens estão bloqueadas, os leitores veem a sua cor e as suas palavras, e não uma caixa vazia.
<table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" align="center">
<tr>
<td bgcolor="#2e1065" style="background-color:#2e1065;">
<img src="https://example.com/header-october.gif"
width="600" height="300"
alt="The October issue: new work, three reads and a studio update"
style="display:block; width:100%; max-width:600px; height:auto; border:0;
color:#ffffff; font-family:Arial, sans-serif; font-size:20px;">
</td>
</tr>
</table>Modo escuro e bloqueio de imagens
O modo escuro pode mudar as cores em volta do seu cabeçalho, mas normalmente deixa a imagem em si intacta. Um cabeçalho com a sua própria cor de fundo completa se mantém nos dois modos; um com borda transparente ou branca pode virar uma caixa clara numa tela escura. Gradientes CSS atrás da imagem não são confiáveis entre clientes, então incorpore o gradiente no GIF e use uma cor sólida como alternativa. Fundo com gradiente em e-mail trata das opções.
Evite
- Palavras que só aparecem depois do primeiro quadro
- Um GIF pesado em que o quadro inteiro se move
- Bordas transparentes que destoam no modo escuro
- Texto alternativo vazio ou genérico, como “cabeçalho”
- A oferta e o botão só dentro da imagem
Faça
- Um primeiro quadro que é um design completo
- Palavras paradas sobre cor que se move devagar
- Uma cor de fundo completa na imagem
- Texto alternativo que diz o que o cabeçalho diz
- Texto HTML vivo para tudo em que as pessoas vão agir
No Gradiently você pode criar o cabeçalho no tamanho de cabeçalho de e-mail sobre um Mark em movimento, manter as palavras paradas enquanto o Mark flutua atrás delas e exportar em GIF no Pro. Como o fundo é um Mark único que é seu, o cabeçalho tem a cara da sua marca, e não de um modelo que outras newsletters compartilham. Para cabeçalhos estáticos e layout, veja design de cabeçalho de e-mail.
Perguntas frequentes
GIFs animados funcionam em e-mail?
Na maioria dos clientes de e-mail, sim. Algumas versões do Outlook para Windows mostram só o primeiro quadro, então crie esse quadro para funcionar sozinho.
Qual deve ser o tamanho de um cabeçalho de e-mail animado?
Crie em 1200×600 pixels e exiba com 600 pixels de largura. Se o peso do arquivo importa mais que a nitidez em telas densas, exporte o GIF em 600×300.
Posso usar vídeo no cabeçalho de um e-mail?
O vídeo roda em pouquíssimos clientes de e-mail, então não é uma escolha confiável. Use um GIF animado, ou uma imagem estática com link para o vídeo.
Por que o meu GIF de e-mail não anima no Outlook?
Algumas versões do Outlook para Windows exibem só o primeiro quadro de GIFs animados. É um limite do cliente, não do seu arquivo, e é por isso que o primeiro quadro deve levar a mensagem inteira.
Como deixar um GIF de e-mail menor?
Encurte o loop, reduza a taxa de quadros para cerca de 10 a 15 fps, mantenha a maior parte do quadro parada e considere exportar com 600 px de largura.
Escrito pelo Gradiently
A equipe por trás do Gradiently, uma ferramenta de design criada em torno dos Marks: gradientes vivos que fazem tudo o que você cria ter a sua cara.
Ver nosso perfil