Vídeo falso: um substituto para vídeo em e-mail

Publicados: 2019-03-15

Não há como negar o poder do marketing de vídeo. O conteúdo de vídeo tem o poder de contar histórias mais rapidamente do que as imagens estáticas jamais poderiam. É mais emocional. Ele permite que você comunique em segundos o que seriam necessários parágrafos para descrever por escrito. Portanto, não é surpresa que muitos profissionais de marketing por email estejam interessados ​​em incluir vídeo em seus emails - apenas para descobrir que a maioria dos clientes de email não oferece suporte para vídeos.

Mas, embora vídeos reais não sejam compatíveis com a maioria dos clientes, isso não significa que você tenha que dizer adeus à ideia de adicionar interações semelhantes a vídeos às suas campanhas. Digite: faux vide o !

O vídeo falso imita o movimento semelhante ao de um vídeo com uma interação que permite que seus assinantes sintam que estão reproduzindo o vídeo em sua caixa de entrada. Existem várias técnicas de vídeo falsas por aí. O mais popular foi criado pelo colega #emailgeek Kristian Robinson, que apresentou sua abordagem de usar animação CSS para percorrer uma folha de sprite de quadros de vídeo individuais do Litmus Live London em 2018. Você deve conferir sua palestra abaixo ou sintonizar no Podcast de design de e-mail nº 71, onde cobrimos a técnica de Kristian.

Neste post, vamos guiá-lo através da técnica que usamos aqui no Litmus. Ele é baseado em GIFs animados e tem uma grande vantagem: ele também funciona no Gmail!

Exemplo de vídeo falso

Por que usar vídeo falso?

Embora o vídeo no e-mail seja um tópico popular, ele só funciona no Apple Mail e no iOS Mail - os únicos clientes de e-mail que oferecem suporte completo para vídeo HTML5. Usando uma técnica de vídeo falso, você pode imitar vídeos reais em seu e-mail com suporte para muitos outros clientes de e-mail.

A técnica de vídeo falso é apoiada por:

  • Gmail
  • App Gmail
  • Apple Mail
  • iOS e-mails para iPhone e iPad
  • Samsung Mail
  • Outlook para Mac

Isso representa mais de 64% da participação geral no mercado de clientes de e-mail que dá suporte a essa técnica. Portanto, se você deseja adicionar algum movimento semelhante ao de um vídeo em suas campanhas, a utilização da técnica de vídeo falso significa que o conteúdo do seu vídeo pode ser visto por mais assinantes do que você poderia alcançar ao utilizar o vídeo HTML5.

Como criar um vídeo falso: usando imagens em camadas para imitar o vídeo ao vivo

Para usar essa técnica de vídeo falso em sua próxima campanha por e-mail, você precisará de duas imagens do mesmo tamanho: uma capa estática e um GIF animado, uma em cima da outra.

  1. A imagem estática da capa
     Neste exemplo, nossa imagem de capa estática é denominada cover-play.jpg . Esta é a imagem que será exibida por padrão, mas desaparecerá e revelará o GIF de fundo quando o assinante interagir com o seu e-mail. Nosso exemplo tem um ícone de botão de reprodução na imagem da capa estática para imitar um vídeo, mas você não precisa necessariamente incluir um - você pode incorporar qualquer tipo de gráfico ou texto, se quiser, mas não se esqueça do seu ALT text !

    Como criar um vídeo falso
  2. Uma imagem de fundo GIF animado
     Em seguida, você precisará da imagem de fundo GIF animada - a nossa se chama fauxvideo.gif . Esta é a imagem que será revelada quando um assinante passar o mouse sobre a imagem da capa estática. Isso será colocado no código como uma imagem de fundo normal.

    A imagem de plano de fundo GIF animado.

Configurando o CSS / HTML

Vejamos como usar HTML e CSS para configurar vídeos falsos para sua próxima campanha de e-mail:

CSS incorporado

Este código fica entre as tags <head> </head> na parte superior do seu e-mail.

 .showvideo:hover{ opacity: 0 !important; transition: 0.3s !important; } .showvideo { transition: 0.3s !important; }

O estilo : hover neste código altera a imagem da capa para opacity: 0 - ocultando efetivamente a imagem - quando um assinante passa o mouse sobre a seção, revelando o GIF animado no fundo. A transição de 0,3 segundo é um acréscimo cosmético, adicionando um esmaecimento gradual ao foco nos clientes de e-mail onde é suportado. Ele é adicionado às classes hover e não hover para garantir uma transição suave quando um assinante passa o mouse sobre a imagem e sai do mouse. (Observação: você não precisa definir um substituto de VML para Outlook, porque o Outlook não oferece suporte ao foco.)

HTML

Você precisará incluir duas seções de código em seu HTML, uma célula <td> e uma célula <img> .

Este é o código para a célula <td> que carrega o GIF animado como imagem de fundo, mesmo quando a imagem da capa está no topo e a interação não está ativa.

 <td class="w100p" background=" http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/fauxvideo.gif " bgcolor="#43a1e2" valign="top">

Este é o código para a imagem cover-play.jpg que está sendo ocultada em : hover . Como você pode ver, o CSS no <head> ativou a classe “ showvideo ”.

 <img class="showvideo" src="http://campaigns.litmus.com/_email/2019/03_mar/20190315_March-NL/images/cover-play.jpg" width="600" border="0" alt="Play" />

Agora, basta juntar tudo! Você pode ver a amostra completa do código de vídeo falso em ação neste CodePen .

Perguntas comuns sobre vídeos falsos

O vídeo falso é responsivo em dispositivos móveis?

Absolutamente! Embora o GIF animado seja acionado ao passar o mouse na área de trabalho, basta um toque ou um toque longo para revelar o GIF no celular. No entanto, se um clique for aplicado em seu e-mail, o link iniciará o navegador com um toque e o assinante nunca verá o vídeo. Sem um clique, o GIF será reproduzido conforme o esperado. Um toque longo revelará o GIF com ou sem um clique.
O vídeo falso é responsivo em dispositivos móveis?

Você pode usar imagens de retina com essa técnica?

Sim! Para os fins deste exemplo, não usamos imagens de retina, mas você certamente pode usar imagens de retina com vídeos falsos, se isso fizer sentido para o tempo total de carregamento de seu e-mail. Tenha cuidado ao usar imagens ou GIFs muito grandes e afetarão negativamente o tempo de carregamento do seu e-mail. Não deixe de conferir nossa postagem sobre imagens de retina .

Por que usar opacidade em vez de outros métodos de ocultação?

Usar display: none em um elemento focado o remove do fluxo do documento, e você acaba obtendo um efeito em que as imagens continuam desaparecendo e reaparecendo ao passar o mouse, o que não revela o GIF animado nem fornece uma transição suave:
use opacidade em vez de outros métodos de ocultação
Usar visibilidade: oculto produziria um efeito de piscar semelhante:
Usando visibilidade: oculto
Usar o método de opacidade para ocultar a imagem da capa fornece a experiência mais suave, mas também tem suas desvantagens. A opacidade não é compatível com os seguintes clientes de e-mail:

  • AOL
  • Yahoo
  • Outlook.com

Adicione vídeos falsos à sua próxima campanha de e-mail

Mal podemos esperar para ver mais vídeos falsos por aí. Então, se você usar a técnica de vídeo falso em um e-mail que está por vir, adoraríamos ver! Sinta-se à vontade para compartilhar um link para o seu design nos comentários abaixo.

E se você tiver alguma dúvida, por favor, deixe-nos ouvi-la!