Um guia para GIFs animados em e-mail

Publicados: 2021-02-24

Como um comerciante por email, você está sempre tentando melhorar suas campanhas por meio do uso de cópia, design e imagens. Mas, com tanta competição pela atenção dos assinantes, não é surpresa que você queira algo que o destaque - estimulando os leitores a clicarem e se preocuparem com sua mensagem. Uma maneira de fazer isso? GIFs animados.

Adicionar animação pode ser exatamente o que você precisa para aumentar o envolvimento do assinante. Profissionais de marketing por email como você estão recorrendo cada vez mais a GIFs animados em email para fornecer esse interesse extra. De acordo com nossos dados de 2020 State of Email, 51,28% dos profissionais de marketing disseram que estão usando GIFs animados pelo menos às vezes em seus e-mails de marketing.

Então, como você pode entrar nessa ação? Nesta postagem do blog, vamos cobrir:

O que é um GIF
Os benefícios (com exemplos inspiradores)
As desvantagens dos GIFs animados
Como fazer GIFs animados
Suporte ao cliente por e-mail e tempos de carregamento

O que é um GIF?

GIF, que significa Graphics Interchange Format, é um formato de imagem desenvolvido pela CompuServe em 1987. Devido ao amplo suporte em navegadores e clientes de e-mail, os GIFs têm sido um formato de imagem popular desde os primórdios da Internet.

Mais importante, porém, os GIFs podem ser animados. Semelhante ao funcionamento de um flipbook, os GIFs exibem rapidamente uma série de imagens para produzir a ilusão de movimento. Nos primeiros anos da Internet, os GIFs (e as marcas marquee e blink) eram o principal método de adicionar movimento a uma página da web.

Muita coisa mudou desde os anos 1990. Os GIFs animados estão desfrutando de um renascimento na web e no marketing por e-mail. Embora ainda haja algum debate sobre como você realmente pronuncia "GIF", a maioria concorda que os GIFs podem ser uma excelente ferramenta de marketing.

Os benefícios dos GIFs animados em e-mail

Quer você prefira um “G” forte ou goste de rimar um GIF com uma determinada marca de manteiga de amendoim, vamos ver por que os GIFs são tão úteis em e-mails.

Chame a atenção de seus assinantes

Adicionar movimento ao seu e-mail com um GIF é uma ótima maneira de chamar a atenção dos assinantes, direcioná-los para uma ação que você deseja que eles realizem ou mantê-los em movimento para garantir que recebam toda a mensagem.

O Google usa um GIF fofo para celebrar seus assinantes.

Google GIF — Fonte: Emails realmente bons

Grammarly usa uma animação sutil para chamar ainda mais atenção para sua oferta.

Grammarly GIF — Fonte: Emails realmente bons

O Xfinity coloca seu GIF mais abaixo no e-mail para atrair seus assinantes e incentivá-los a navegar.

Xfinity GIF — Fonte: Emails realmente bons

Usamos um GIF de vídeo falso para chamar a atenção para o nosso vídeo e fazer com que os assinantes se interessassem em clicar para ver mais.

Feriado Litmus — Veja o e-mail completo em ação

Mostre seus produtos e serviços

Você sabe que seu produto é ótimo. Certifique-se de que seus assinantes também saibam disso. Não há nada como um GIF animado para mostrar como seu produto ou serviço funciona.

ILIA Beauty mostra seu produto em ação com pessoas reais.

O Webflow mostra seu produto em ação para que os assinantes saibam o que esperar.

Webflow GIF — Fonte: Emails realmente bons

Magic Spoon mostra seus diferentes sabores e design de embalagem incrível.

GIF de colher mágica — Fonte: Emails realmente bons

Simplifique uma ideia complexa

Se uma imagem vale mais que mil palavras, então uma imagem animada provavelmente vale ainda mais. Use um GIF animado para ilustrar uma ideia complexa ou mostrar a seus assinantes que as coisas são ainda mais fáceis do que eles pensam.

Baggu levou instruções de limpeza simples para o próximo nível, animando-as. Ao fazer quatro animações diferentes, os assinantes precisam rolar para ver a história toda.

Baggu GIF — Fonte: Emails realmente bons

Encontrar sua calma parece simples. Mas no ano passado, todos nós percebemos como pode ser difícil. Headspace mostra como encontrar a sua calma com um GIF melhor do que qualquer pessoa poderia explicar com palavras.

Headspace GIF — Fonte: Emails realmente bons

Provoque algo novo ou em breve

Você tem algum conteúdo ou produto novo que está prestes a lançar? Tem uma ótima oferta saindo em breve? Use um GIF animado para criar consciência ou interesse em seu produto - e fazer com que os assinantes aguardem seu próximo e-mail.

A Apple provoca uma liquidação prolongada da Black Friday e pede aos assinantes que “reservem as datas” para fazer compras para não perderem ofertas.

GIF de e-mail da Apple Black Friday — Fonte: Emails realmente bons

A bicicleta elétrica de Linus é apenas mencionada nas sombras neste e-mail. Os assinantes terão que clicar para ver o produto real.

Email da Linus Electric com GIF animado — Fonte: Emails realmente bons

A Tinker provoca uma liquidação da Black Friday e também uma edição limitada do relógio com este GIF animado para manter os assinantes à espera do próximo e-mail com mais informações.

Tinker Email GIF — Fonte: Emails realmente bons

As desvantagens dos GIFs animados

Por mais maravilhosos que sejam os GIFs animados, eles têm seus defeitos.

Falta de acessibilidade

Os GIFs animados podem representar um problema em termos de acessibilidade por vários motivos.

Taxas de flash de conteúdo entre 2 Hz e 55 Hz podem prejudicar usuários com epilepsia fotossensível. Além disso, os usuários com deficiência visual podem ter dificuldade em ler ou revisar o conteúdo de um GIF antes que a animação seja alterada. Portanto, certifique-se de que seus GIFs animados tenham transições suaves ou não sejam animados de um quadro para o outro em alta velocidade.

E, como GIFs são arquivos de imagem, você deve sempre incluir um texto alternativo apropriado para usuários que contam com tecnologia de assistência, como leitores de tela. As imagens são inerentemente inacessíveis para muitas pessoas, portanto, fornecer cópia e contexto permite que elas entendam sua mensagem com mais clareza.

O guia definitivo para acessibilidade de e-mail por Litmus

Crie e-mails acessíveis e inclusivos para todos os seus assinantes

Obtenha os insights e os conselhos passo a passo de que você precisa para escrever, projetar e codificar e-mails que podem ser aproveitados por qualquer pessoa - independentemente de sua capacidade.

Aprenda como →

Fraca transparência do fundo

Se você precisa adicionar mais cor ou alguma transparência de fundo ao seu conteúdo animado, um GIF animado pode não ser o melhor.

Os GIFs não são elegantes quando se trata de fundos transparentes. Mas não tema, você pode trazer uma alternativa animada ao e-mail na forma de um PNG animado (APNG). Certifique-se de anotar as mesmas dicas e truques de compressão que compartilhamos a seguir, uma vez que os APNGs também gostam de se acumular em kilobytes (KB).

E se você está procurando outra alternativa aos GIFs animados, pode explorar as animações CSS.

Como fazer um GIF animado para e-mail

A criação de GIFs pode ser feita de várias maneiras. Você pode usar criadores online que permitem animar uma seleção de fotos ou transformar um vídeo em um GIF animado. Ou você pode usar um software como Adobe Photoshop ou Adobe Animate para mover projetos personalizados.

Minha maneira preferida de criar GIFs animados é trabalhar no Adobe Animate. Isso nasce de anos de trabalho com Flash naquela época. Quando o Flash foi retirado, o Adobe Animate assumiu, mantendo alguns dos recursos do Flash, trazendo mais opções de saída, como HTML5, vídeo e GIF animado.

Então, vou mergulhar em como fazer um GIF animado no Adobe Animate.

Criação com Adobe Animate

Etapa 1: Criar um novo arquivo e dimensões de entrada

Para fazer um GIF no Adobe Animate, primeiro crie um novo arquivo e insira as dimensões que deseja. Dica profissional: crie sua animação com o dobro do tamanho para exibição de retina, assim como faria para imagens estáticas.

Etapa 2: importe os gráficos a serem animados

Você pode projetar sua animação diretamente na tela, usando a forma do software e as ferramentas de desenho, criando uma camada para cada elemento. Se você criou o design de sua animação no Adobe Illustrator, pode simplesmente copiar e colar seus gráficos vetoriais na tela. Caso contrário, você pode importar gráficos para o Adobe Animate acessando arquivo> importar> importar para o palco. Ou se você estiver importando um gráfico que será reutilizado várias vezes, você pode “importar para a biblioteca”.

Etapa 3: Crie sua animação

Agora você pode usar a linha do tempo para criar sua animação. Existem muitas possibilidades com softwares como este, e seria difícil abordar todas elas em uma única postagem no blog. No entanto, há uma abundância de recursos por aí com muitos guias úteis no YouTube, nos tutoriais online da Adobe e no próprio software.

Eu recomendaria prestar atenção especial ao conteúdo em torno de símbolos, interpolação e facilidade. Com essas três funções sozinhas, você pode criar animações altamente envolventes que ajudam a chamar a atenção, divulgar sua mensagem e encantar seu público. Ao mesmo tempo, traz um monte de personalidade de marca para seus e-mails.

Símbolos

Um símbolo é um gráfico, botão ou clipe de filme que você cria uma vez e reutiliza selecionando-o na biblioteca.

Depois de criar um símbolo, você pode reutilizá-lo em sua animação - isso é chamado de instância. Se você fosse editar seu símbolo, como alterar a cor, essa alteração seria feita em todas as instâncias (semelhante a parciais de e-mail). Mas se você fosse editar uma instância, sua alteração se aplicaria apenas a essa instância.

Para GIFs animados, sugiro apenas converter seus elementos de design em símbolos gráficos. Ambos os clipes de filme e botões têm sua própria linha de tempo anexada a eles, portanto, você pode animá-los independentemente da linha de tempo principal. No entanto, como todas as animações criadas fora da linha do tempo principal não são respeitadas quando você exporta sua animação como um GIF, faz sentido manter os símbolos gráficos que são animados apenas na linha do tempo principal.

Tweening

Tweening é como você anima de um estado para outro. Você pode usar interpolações de forma, movimento ou clássicas.

Uma interpolação de forma só pode ser usada com formas ou elementos que você desenhou na tela ou nos vetores importados usando as preferências do importador AI (em vez de um bitmap). Isso ocorre porque uma interpolação de forma permite alterar a forma de um objeto. Por exemplo: você pode adicionar um círculo a um quadro-chave em sua linha do tempo, adicionar um quadrado em outro e, em seguida, transformar seu círculo em seu quadrado com a interpolação de formas.

exemplo de interpolação de gif animado

As interpolações de movimento são usadas para criar movimentos de animação especificando valores diferentes entre o primeiro e o último quadro. Com esse tipo de interpolação, você pode alterar as propriedades de um objeto - incluindo posição, tamanho, cor, efeitos, filtros e rotação.

exemplo de interpolação de movimento de gif animado

A interpolação clássica é muito semelhante à interpolação de movimento. Foi transportado do Flash e retido no Animate como uma opção adicional. Essa é minha maneira preferida de aplicar interpolação de movimento, pois as técnicas de atenuação (discutidas abaixo) são um pouco mais simples de aplicar.

Facilidade

A atenuação anda de mãos dadas com a interpolação. Se mover um objeto de uma posição para outra usando a linha do tempo é o bolo, a atenuação é o glacê!

Usando a funcionalidade de facilidade do Animate, você pode fazer a interpolação acelerar ou desacelerar no início ou no final. Ou adicione um pequeno salto quando a interpolação terminar. Isso realmente ajuda a dar personalidade à sua animação.

exemplo de gif animado de facilidade aplicada à interpolação

A facilidade aplicada a essa interpolação inicia a animação rapidamente e diminui no final.

exemplo de gif animado de facilidade aplicada à interpolação com salto

Aqui eu apliquei uma facilidade de salto para a minha pré-adolescência.

Para obter informações sobre como aplicar o easing, confira este vídeo no YouTube.

Etapa 4: exporte seu GIF animado

Salvar sua animação do Adobe Animate como um GIF é bom e simples. Basta acessar Arquivo> Exportar> Exportar GIF animado.

Manter o tamanho do arquivo baixo

Independentemente de como você cria seu GIF animado - seja com o Adobe Animate ou outra coisa - manter o tamanho do arquivo baixo é crucial para o e-mail. Existem algumas coisas que vale a pena considerar para ajudá-lo a manter suas animações o mais leves possível.

Compressão

Ferramentas como Animate e Photoshop têm opções de compactação limitadas para GIFs; geralmente é melhor usar software externo em vez de compactação. Eu recomendo ImageOptim, que é gratuito para download, ou EZgif, uma ferramenta online gratuita de otimização de GIF, para reduzir o tamanho do arquivo ao peso ideal. Pessoalmente, gosto de manter o meu abaixo de 1 megabyte (MB), mas o tamanho de arquivo ideal pode variar e depende do tempo de carregamento do e-mail, que discutiremos posteriormente nesta postagem do blog.

Cor lisa

Incluir fotografia ou gradientes em sua animação adiciona peso devido à quantidade de cores e sombras que eles contêm. Um GIF pode conter apenas 256 cores - em comparação com um JPEG, que pode incluir mais de 16 milhões - o que geralmente resulta na qualidade prejudicada. Portanto, é fundamental manter as coisas simples.

Quadros limitados

Quanto mais curta for a animação, melhor. Cada quadro que sua animação contém adiciona peso ao GIF. Uma vez que uma animação deve realmente elogiar sua cópia, faz sentido limitar o tempo de execução da animação e encorajar os leitores a ler o e-mail.

Se você achar que seu GIF está carregando muito peso depois de salvar e compactar, você pode remover os quadros usando o Photoshop ou EZgif.

Revisando seu GIF animado

Agora que você completou seu GIF, pode desejar obter feedback ou aprovação antes de colocá-lo em seu e-mail. Com uma ferramenta de colaboração em tempo real como o Litmus Proof, você pode centralizar os comentários e aprovações de todos.

GIF de prova — *Aviso amigável: este está disponível apenas nos planos Litmus Enterprise*

Implementando GIFs animados em e-mail

Depois de ter seu GIF pronto, você pode incluí-lo em seu e-mail da mesma forma que adicionaria qualquer outro arquivo de imagem:

<img src="http://yourwebsite.com/path/to/awesome.gif" width="100" height="100" alt="Description of your gif”>

No entanto, há algumas coisas únicas que você precisa considerar: quais clientes de e-mail suportam GIFs animados e quanto tempo eles levam para carregar em seu e-mail.

Apoio, suporte

GIFs animados são suportados em quase todos os lugares. O Outlook recentemente atualizou seu suporte para GIFs animados, mas isso afeta apenas o Office365. O Outlook 2007-2019 ainda não oferece suporte a GIFs animados.

Aqui está um gráfico rápido de quais clientes de e-mail suportam e não suportam GIFs animados:

Clientes Desktop	Clientes de Webmail	Clientes Móveis
Outlook 2000-2003 ✓	Gmail ✓	iOS Mail ✓
Outlook 2007-2019 ✘	G Suite ✓	Gmail ✓
Outlook para Mac ✓	Yahoo! Correio ✓	Gmail IMAP ✓
Apple Mail ✓	AOL ✓	Samsung Mail ✓
Windows 10 Mail ✓	Outlook.com ✓	Outlook ✓
Office365 ✓	Office365 ✓	Yahoo ✓
	Comcast ✓	AOL ✓
	Orange.fr ✓
	SFR.fr ✓
	GMX.de ✓
	Web.de ✓
	T-Online.de ✓
	Freenet.de ✓
	Mail.ru ✓

Para manter uma ótima experiência onde GIFs animados não são suportados, certifique-se de fazer o primeiro quadro conter tudo que você precisa como um fallback estático.

Você também pode fornecer um substituto para o Outlook, ocultando a imagem GIF normal e exibindo uma imagem estática e / ou conteúdo diferente nas condicionais do Outlook:

<!--Animated Version for everywhere else-->
<!--[if (gte mso 9)|(IE)]><!-->
<img src="YourAnimatedFile.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<!--<![endif]-->

<!--Static Version for Outlook-->

<!--[if (gte mso 9)|(IE)]>
<img src="StaticVersion.gif" style="display: block; padding:0; margin:0; height: auto; max-width: 100%;" border="0" alt="" width="538" height="269" />
<![endif]-->

Tempo de carregamento

Anteriormente, discutimos os tamanhos dos arquivos. O tempo de carregamento é onde o tamanho do arquivo se torna muito importante.

Você pode testar os tempos de carregamento com uma ferramenta como a lista de verificação de pré-envio automatizada do Litmus para ver se suas imagens estão demorando muito para carregar. Em média, descobrimos que pouco mais da metade dos destinatários gastam apenas menos de dois segundos em um e-mail. Portanto, seus GIFs animados precisam carregar rapidamente para causar uma boa impressão.

Testamos diferentes tamanhos de arquivo para encontrar suas velocidades médias de carregamento em diferentes conexões. Em média, um GIF animado de 4,4 MB pode demorar duas vezes mais para carregar em uma conexão 4G LTE do que em uma conexão Ethernet.

Aqui estão algumas velocidades médias para diferentes tamanhos de arquivo em diferentes conexões com base em nosso próprio experimento:

Velocidade média de download de conteúdo (em segundos)

Tamanho do arquivo	4G LTE	Wi-fi	Ethernet
180kB GIF	0,37	0,29	0,22
1 MB GIF	1,18	0,54	0,44
3.2 MB GIF	2,87	1,44	1.04
4,4 MB GIF	3,23	1,83	1,34

Esses tempos são a velocidade de download do conteúdo e não levam em consideração o tempo até o primeiro byte (TTFB). TTFB é uma forma de medir a capacidade de resposta de um servidor web. Portanto, se você estiver hospedando suas imagens em um servidor de resposta lenta, o tempo de carregamento dos GIFs animados aumentará para seus assinantes.

Além de tempos de carregamento mais lentos, os GIFs animados com tamanhos de arquivo maiores também usarão os dados mais rapidamente, o que provavelmente fará com que seus assinantes não gostem. Usei meus dados apenas para testar a velocidade de download do tamanho do arquivo GIF para esta postagem do blog, então é muito fácil de fazer. Deixe seus assinantes manterem o máximo de seus dados para diversão, em vez de carregar seu e-mail.

Como você não tem controle sobre a velocidade do servidor, a conexão do assinante ou o plano de dados do assinante, é extremamente importante certificar-se de que seus GIFs animados sejam pequenos o suficiente para garantir que seu público possa visualizá-los, não importa onde estejam abrindo seu e-mail. Recomendamos 1 MB no máximo.

Pensamentos finais

Os GIFs animados têm o poder de encantar, impressionar e cativar seus assinantes de e-mail. Mas, certifique-se de usar seus GIFs com sabedoria! Seus assinantes devem estar sempre em mente ao criar e implementar GIFs em seus e-mails. Não anime apenas porque você pode - pense em como isso beneficiará seu público.

Mal podemos esperar para ver o que você cria!

Esta postagem do blog foi publicada originalmente em 9 de janeiro de 2020, por Jason Rodriguez. Ele foi atualizado para maior clareza e com novas informações em 23 de fevereiro de 2021.

Compartilhe, obrigado!

Entregando o episódio 36: Construindo confiança por meio do e-mail

Neste episódio de Delivering, o apresentador Jason Rodriguez fala sobre as várias maneiras pelas quais os profissionais de marketing por e-mail podem construir confiança com os assinantes e por que a confiança é a base de qualquer bom relacionamento em marketing.

consulte Mais informação