A versão curta
- Um cabeçalho de email animado é quase sempre um GIF, porque a maioria dos clientes de email mostra GIFs animados e muito poucos reproduzem vídeo.
- Algumas versões de ambiente de trabalho do Outlook para Windows mostram apenas o primeiro fotograma de um GIF, por isso o primeiro fotograma tem de funcionar como design completo.
- Um tamanho de cabeçalho habitual é 1200×600 píxeis, apresentado com 600 píxeis de largura para se manter nítido em ecrãs de alta densidade.
- Manter o GIF leve importa porque as imagens grandes carregam devagar nos dados móveis, e os loops curtos com pouco movimento pesam menos.
- As palavras importantes, como ofertas, datas e botões, pertencem a texto HTML real abaixo do cabeçalho, e não apenas dentro da animação.
Nesta página
Um cabeçalho de email animado deve ser um GIF, com cerca de 1200×600 píxeis apresentado a 600 de largura, com um loop curto, peso de ficheiro moderado e um primeiro fotograma que funcione como design acabado por si só. Esta última regra é a que se esquece: algumas versões de ambiente de trabalho do Outlook para Windows mostram apenas o primeiro fotograma de um GIF animado, e quem tem as imagens bloqueadas não vê nada além do teu texto alternativo. Desenha primeiro para esses leitores e depois junta o movimento como bónus para todos os outros.
Porque é que os cabeçalhos de email animados são GIFs
O suporte de vídeo em email é raro e pouco fiável. O GIF animado, um formato de imagem, aparece na maioria dos clientes, do Apple Mail ao Gmail. Formatos mais recentes, como o WebP animado, têm suporte irregular nas caixas de entrada. Por isso o GIF continua a ser a escolha prática, com todos os seus limites: no máximo 256 cores por fotograma e ficheiros maiores do que vídeo. Esses limites moldam o design. A comparação completa está em GIF ou MP4.
Porquê
Recomendação
Porquê
Recomendação
Porquê
Recomendação
Porquê
Recomendação
Porquê
Recomendação
Porquê
Desenha o primeiro fotograma como alternativa
Trata o primeiro fotograma como o cabeçalho do email e a animação como um extra. Se as tuas palavras entram a partir do nada, quem lê no Outlook vê um bloco de cor vazio. Se o teu produto aparece no segundo dois, nunca o vê. Põe tudo o que importa no fotograma um e deixa o movimento acontecer à volta.
Fotograma um: completo. Todas as palavras estão no lugar, por isso quem só vê este fotograma não perde nada.
A meio do loop: as palavras ficam onde estão enquanto a cor muda por trás. O movimento dá ambiente, não informação.
- Palavras paradas, fundo em movimento. A cor em deriva atrás de um título fixo é o cabeçalho animado mais fiável que existe.
- Um pequeno movimento. Uma palavra que muda, uma linha que se sublinha, uma ligeira mudança de luz. Uma ideia por cabeçalho.
- Termina onde começaste. Um loop que salta de volta ao início parece avariado. Faz o último fotograma conduzir ao primeiro, como em vídeo em loop perfeito.
- Sem luzes intermitentes. Mantém as mudanças de luminosidade lentas. Os flashes rápidos são desconfortáveis e podem ser prejudiciais.
Manter o GIF leve
A maior parte do peso de um GIF vem dos píxeis que mudam entre fotogramas. Um cabeçalho em que o quadro inteiro se move é pesado; um em que um gradiente lento deriva atrás de palavras paradas é muito mais leve, porque o codificador pode guardar apenas o que mudou. Reduzir a largura a metade reduz os píxeis a cerca de um quarto, por isso decide cedo se este cabeçalho precisa de 1200 px ou se 600 px chegam.
- 1
Desenha a 1200×600
Compõe o cabeçalho com todas as palavras no lugar no primeiro fotograma.
- 2
Mantém o loop curto
Dois a cinco segundos, com cada movimento a completar um ciclo inteiro.
- 3
Exporta como GIF a 10 a 15 fps
Usa uma paleta construída a partir da própria animação e não uma genérica.
- 4
Verifica o peso
Se estiver pesado, experimenta 600 px de largura, menos fotogramas ou menos movimento antes de reduzir a qualidade.
- 5
Verifica o fotograma um sozinho
Abre o GIF num visualizador de imagens que mostre só o primeiro fotograma ou envia um teste para o Outlook no Windows.
Os comandos de exportação, a paleta e as definições de dithering em pormenor estão em GIFs animados.
HTML para um cabeçalho de email animado
Programa o cabeçalho como uma imagem normal dentro de uma célula de tabela. Define a largura de apresentação no atributo e no estilo para todos os clientes a dimensionarem bem, dá-lhe um texto alternativo descritivo e define na célula uma cor de fundo igual ao primeiro fotograma do GIF. Quando as imagens estão bloqueadas, os leitores veem então a tua cor e as tuas palavras, 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 à volta do cabeçalho mas normalmente deixa a imagem em paz. Um cabeçalho com a sua própria cor de fundo completa aguenta-se nos dois modos; um com uma margem transparente ou branca pode acabar como uma caixa brilhante num ecrã escuro. Os gradientes CSS atrás da imagem não são fiáveis entre clientes, por isso integra o gradiente no GIF e usa uma cor sólida como alternativa. Gradientes em email trata das opções.
Evita
- Palavras que só aparecem depois do primeiro fotograma
- Um GIF pesado em que o quadro inteiro se move
- Margens 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
Faz
- Um primeiro fotograma que é um design completo
- Palavras paradas sobre cor em movimento lento
- Uma cor de fundo completa na imagem
- Texto alternativo que diz o que o cabeçalho diz
- Texto HTML real para tudo aquilo em que as pessoas agem
No Gradiently podes desenhar o cabeçalho no tamanho de cabeçalho de email sobre um Mark em movimento, manter as palavras paradas enquanto o Mark deriva atrás delas e exportá-lo como GIF no Pro. Como o fundo é um Mark único que te pertence, o cabeçalho parece a tua marca e não um modelo que outras newsletters partilham. Para cabeçalhos estáticos e composição, vê design de cabeçalhos de email.
Perguntas frequentes
Os GIFs animados funcionam em email?
Na maioria dos clientes de email, sim. Algumas versões de ambiente de trabalho do Outlook para Windows mostram só o primeiro fotograma, por isso desenha esse fotograma para funcionar sozinho.
Que tamanho deve ter um cabeçalho de email animado?
Desenha-o a 1200×600 píxeis e apresenta-o com 600 píxeis de largura. Se o peso do ficheiro importa mais do que a nitidez em ecrãs densos, exporta o GIF a 600×300.
Posso usar vídeo num cabeçalho de email?
O vídeo reproduz-se em muito poucos clientes de email, por isso não é uma escolha fiável. Usa um GIF animado ou uma imagem estática com ligação para o vídeo.
Porque é que o meu GIF de email não anima no Outlook?
Algumas versões do Outlook para Windows mostram apenas o primeiro fotograma dos GIFs animados. É um limite do cliente, não do teu ficheiro, e é por isso que o primeiro fotograma deve levar a mensagem toda.
Como reduzo o tamanho de um GIF de email?
Encurta o loop, baixa a taxa de fotogramas para cerca de 10 a 15 fps, mantém a maior parte do quadro parada e considera exportar com 600 px de largura.
Escrito pela Gradiently
A equipa por trás da Gradiently, uma ferramenta de design construída em torno dos Marks: gradientes vivos que fazem tudo o que crias parecer teu.
Ver o nosso perfil