Estamos nos divertindo muito trabalhando com o cliente chave Closet52, um loja de vestidos online que marcamos e construímos desde o início para uma empresa de moda estabelecida e bem conhecida em Nova York. A liderança deles está sempre trabalhando conosco em ideias colaborativas para a próxima campanha ou estratégia que estamos executando. Como parte de sua implementação, implantamos Klaviyo por Shopify Plus. Klaviyo é uma plataforma de automação de marketing bem conhecida com integração muito forte com Shopify, bem como muitos Shopify Apps.
Uma característica minha favorita é a sua Teste A / B Exemplo: crie XNUMX textos de email > XNUMX pessoas na sua lista, XNUMX receberao XNUMX email e XNUMX receberão outro e veja qual email converteu mais em Klaviyo. Você pode desenvolver diferentes versões de um e-mail, e Klaviyo enviará uma amostra, aguardará uma resposta e enviará aos assinantes restantes a versão vencedora – tudo automaticamente.
Nosso cliente assina e-mails de moda do setor e continuou comentando o quanto gostou de alguns e-mails com uma apresentação de slides de fotos de produtos. Eles perguntaram se poderíamos fazer isso e eu concordei e construí uma campanha com um teste A/B onde enviamos uma versão com uma animação de 4 produtos e outra com uma única imagem estática bonita. A campanha é para um estouro venda de seus vestidos de outono como eles estão trazendo novas linhas de produtos.
Versão A: GIF animado
Versão B: Imagem estática
O crédito da foto vai para o pessoal talentoso da Zeelum.
A amostragem da campanha ainda está em execução, mas está bem claro que o e-mail com o gráfico animado está superando em muito a imagem estática... em cerca de uma taxa de abertura de 7%… mas surpreendente 3 vezes a taxa de cliques (CTR)! Acho que o fato de o GIF animado colocar vários estilos diferentes na frente do assinante levou a muito mais visitantes.
Como fazer um GIF animado usando o Photoshop
Eu não sou nenhum tipo de profissional com Photoshop. Na verdade, as únicas vezes que eu normalmente uso Photoshop da Adobe Creative Cloud são remover fundos e colocar imagens em camadas, como colocar uma captura de tela em cima de um laptop ou dispositivo móvel. No entanto, fiz algumas pesquisas on-line e descobri como fazer uma animação. A interface do usuário para isso não é a mais fácil, mas em 20 minutos e depois de ler alguns tutoriais, consegui derrubá-la.
Preparando nossas imagens de origem:
- Dimensões – GIFs animados podem ser bem grandes, então eu certifiquei-me de definir as dimensões do meu arquivo de photoshop para corresponder exatamente à largura do nosso modelo de e-mail de 600px.
- Compressão – Nossas imagens originais eram de alta resolução e tamanho de arquivo muito alto, então eu as redimensionei e as comprimi com Kraken para JPGs com um tamanho de arquivo muito menor.
- Transições – Embora você possa ficar tentado a adicionar animação pré-adolescentes (por exemplo, transição de desvanecimento) entre quadros, isso adiciona muito tamanho ao seu arquivo, então eu evitaria fazer isso.
Para construir a animação no Photoshop:
- Crie um novo arquivo com as dimensões que correspondem às dimensões exatas que você está colocando em seu modelo de email.
- Selecionar Janela > Linha do tempo para habilitar a visualização da linha do tempo na base do Photoshop.
- Adicione cada imagem como uma nova camada dentro do Photoshop.
- Clique Criar Animação de Quadrona Região da Linha do Tempo.
- No lado direito da região Timeline, selecione o menu de hambúrguer e selecione Faça quadros a partir de camadas.
- Dentro da região Timeline, você pode arraste os quadros na ordem em que você deseja que as imagens apareçam.
- Clique em cada quadro onde ele diz 0 seg. e selecione o tempo que você gostaria que esse quadro fosse exibido. Eu escolhi 2.0 segundos por quadro.
- Na lista suspensa abaixo dos quadros, selecione Para sempre para garantir que os loops de animação sejam contínuos.
- Clique na Botão Play para visualizar sua animação.
- Clique Arquivo > Exportar > Salvar para a Web (herdado).
- Selecionar GIF das opções no canto superior esquerdo da tela Exportar.
- Se suas imagens não forem transparentes, desmarque a Transparência opção.
- Clique Salvar e exporte seu arquivo.
É isso! Agora você tem o GIF animado para enviar para sua plataforma de e-mail.
Divulgação: Armário 52 é cliente da minha empresa, Highbridge. Estou usando links de afiliados ao longo deste artigo para adobe, Klaviyo, Krakene Shopify.
