Criar e-mails em HTML em vez de apenas imagens é mais fácil do que você pensa

O e-mail já existe há 50 anos neste ano, mas no início, eram todos os e-mails de texto simples. A ideia do email marketing nasceu em 1978, mas foi apenas na década de 1990 que o email HTML se tornou um sucesso. No início do mundo do marketing por email, o SPAM por email era um aborrecimento comum e os clientes de email usavam muitos filtros diferentes para ajudar a bloquear o SPAM. Um desses filtros bloqueou e-mails com apenas imagens. Já em 2007, Mailchimp descobriu que usar uma imagem gigante em seu e-mail pode fazer com que seu e-mail seja bloqueado e aumentar sua taxa de rejeição em até 23%.

Conforme o email marketing evoluiu, os filtros de SPAM também evoluíram. Hoje em dia, um e-mail só com imagens não fará com que você seja necessariamente marcado como SPAM, mas só porque você pode criar e-mails só com imagens não significa que deva.

Acho que é hora de ter uma conversa honesta sobre e-mails só de imagens para abordar os motivos a favor e contra eles. E já que estamos nisso, veremos como pode ser fácil converter alguns e-mails só de imagens em e-mails de texto ativos.

Vamos avaliar e-mails só com imagens

Prós

“Como assim, existem prós em e-mails só de imagens ?!” você pergunta. Bem, existem. E-mails com todas as imagens não são a gafe de e-mail que costumavam ser. Na verdade, mudar as coisas e enviar um e-mail com todas as imagens quando você normalmente envia e-mails de texto ao vivo pode aumentar o seu envolvimento. Qualquer coisa nova provavelmente fará seus assinantes se animarem. Mas há outras coisas que tornam os e-mails com apenas imagens a escolha preferida para algumas empresas.

1. Manter estilos de marca
   Se você está trabalhando para uma marca que é muito específica sobre os estilos de marca usados, provavelmente os e-mails só com imagens são o caminho a percorrer. Você pode garantir que as fontes estejam corretas em todos os lugares. E você pode garantir que todos os estilos de marca sejam mantidos em todos os clientes de e-mail. Com e-mails só com imagens, você não precisa se preocupar com a quebra do e-mail tanto quanto faria com um e-mail de texto ativo.
2. Visualmente impactante
   Pessoalmente, não acredito muito nisso, pois acredito que você pode criar e-mails visualmente impactantes sem recorrer a e-mails com apenas imagens. Mas há algumas coisas que você simplesmente não pode fazer em todos os lugares com um e-mail de texto ativo (embora não muito se você tiver um ótimo desenvolvedor de e-mail). ReallyGoodEmails está cheio de inspiração de e-mail incrível e uma grande parte dela são e-mails só com imagens porque, honestamente, eles são muito bonitos.
3. Mais barato
   Algumas pessoas argumentariam que e-mails só com imagens são mais baratos porque você não precisa pagar um designer e um desenvolvedor. (Em alguns casos, tenho certeza que essas empresas nem mesmo usam um designer). Você pode criar as imagens em seu programa de edição de fotos favorito, salvá-las e colocá-las diretamente em seu ESP. É uma maneira rápida e fácil de enviar um belo e-mail para seus assinantes.

Contras

Nosso próprio Magan Le perguntou minha opinião sobre e-mails com apenas imagens e, honestamente, não sou tão anti-apenas com imagens como costumava ser. Ainda não acho que você pode fornecer uma ótima experiência de e-mail para todos com um e-mail só com imagens. Mas, para algumas empresas, um e-mail só com imagens pode fazer sentido. Mas antes de tomar uma decisão, certifique-se de levar as desvantagens em consideração:

1. Acessibilidade deficiente
   E-mails com todas as imagens não são tão acessíveis como e-mails de texto ao vivo. “Mas eu coloquei um texto ALT preciso, Carin!” Isso é ótimo. E há algumas empresas que enviam e-mails com apenas imagens e textos ALT muito bons. Mas acessibilidade não significa apenas inserir texto ALT. Ter um e-mail acessível para todos significa que ele pode ser lido por todos. O texto ALT não ajuda em nada aqueles com dislexia ou usuários com baixa visão que usam configurações para aumentar o tamanho da fonte. Esses são apenas alguns dos problemas com os quais os e-mails de texto ativos podem lidar muito melhor do que os e-mails só com imagens.
2. Experiência do usuário ruim
   Mesmo para assinantes que têm suas imagens habilitadas, e-mails só com imagens podem ser uma experiência de usuário pior do que um e-mail de texto ativo. Assinantes com conexões de Internet mais lentas podem enfrentar longos tempos de espera para que as imagens carreguem. O uso de grandes imagens não compactadas pode consumir os dados do seu assinante se ele estiver verificando seus e-mails enquanto lêem no celular. E pense em personalização! Posso garantir que é muito mais fácil inserir uma tag de mesclagem em um e-mail de texto ativo do que obter imagens personalizadas para toda a sua lista.
3. Call-to-action (CTAs) ausentes ou perdidos
   Com e-mails só com imagens, qualquer assinante que tenha suas imagens desligadas perderá todos os CTAs que estão em sua imagem. Para não mencionar - tudo o mais que você possa ter em seu e-mail. Você pode pensar que, por ter um baixo número de assinantes clicando sem abrir seu e-mail, não precisa se preocupar com isso. Mas quantos assinantes estão vendo seu e-mail com as imagens desligadas e não clicam porque não conseguem ver seu CTA?

Essas são apenas uma visão geral das desvantagens. Se você precisa ser mais convincente (ou seu cliente precisa), Magan explica muito mais detalhadamente por que você não deve enviar e-mails só com imagens.

O que há de tão bom nos emails ao vivo?

Você tem enviado e-mails só com imagens durante toda a sua carreira de marketing por e-mail e tem ouvido o refrão “não envie e-mails só com imagens”, mas não teve nada além do sucesso? Isso é ótimo. Mas posso apenas deixar você saber algumas das coisas incríveis sobre e-mails ao vivo?

Prós

1. Mais fácil de atualizar
   E-mails com todas as imagens são difíceis de atualizar. Você deve atualizar a imagem, salvá-la novamente, carregá-la novamente e, em seguida, adicioná-la ao seu e-mail. E você provavelmente tem algumas aprovações lá também. Com um e-mail ativo, é simples atualizar uma palavra incorreta ou uma data incorreta. Tudo o que você precisa fazer é encontrar o erro e corrigi-lo. Não há necessidade de voltar até a prancheta de desenho literal.
2. Melhor experiência de assinante
   Com um email ao vivo, a cópia será redimensionada para assinantes com telas de maior resolução, o texto não fica muito pequeno em dispositivos móveis e no Modo escuro você tem algum controle sobre como as cores se invertem. E mesmo que seus assinantes tenham imagens desativadas por algum motivo, o conteúdo do e-mail e CTAs ainda poderão ser visualizados.

Contras

1. Mais caro
   “É muito caro contratar um desenvolvedor para cada e-mail que enviamos.” Sim, provavelmente é. É por isso que você não deve contratar um desenvolvedor para fazer todos os e - mails que você envia. Contrate um desenvolvedor para criar um sistema modular que você mesmo possa implementar. Muitos provedores de serviços de e-mail (ESPs) oferecem sistemas de modelos, então contrate um desenvolvedor para construir para sua empresa um sistema de modelos personalizados. Se o seu ESP não tiver isso, você pode fazer com que um desenvolvedor crie parciais e fragmentos no Litmus Builder e, em seguida, use a funcionalidade Arrastar e Soltar e Editor Visual para criar o e-mail no Litmus. Eu prometo que você economizará tempo a longo prazo com menos idas e vindas para fazer edições em seus e-mails.
2. Mais difícil de criar
   Ou são eles? Este é um daqueles contras que ouço de muitas empresas. Não temos um desenvolvedor, então não podemos enviar e-mails ao vivo. Como apontado acima, muitos ESPs têm modelos e soluções de construção modular. E se o seu ESP não tiver, Litmus tem um Editor Visual e a Comunidade Litmus tem muitos modelos e snippets que você pode usar para construir seus próprios e-mails. Temos até um modelo modular e snippets para você começar.
3. O design não é idêntico em todos os clientes de e-mail
   Bem, não, a maioria dos e-mails não são idênticos em todos os clientes de e-mail. Se você tem um desenvolvedor e muito tempo, provavelmente pode chegar bem perto. Mas você realmente precisa que seus e-mails sejam idênticos em todos os clientes de e-mail? Sim, as cores devem ser as mesmas, mas ter cantos arredondados em seus botões, uma fonte ligeiramente diferente ou ter o mesmo layout em uma tela menor não são problemas que afetarão as experiências de seus assinantes tanto quanto ilegíveis o texto seria.

Conversão de e-mails com todas as imagens

Agora chegamos à parte divertida. Converter aqueles lindos e-mails só de imagens em texto ao vivo. Existem algumas técnicas que você pode usar para garantir que seu e-mail ainda seja tão incrível e atraente quanto um e-mail só com imagens.

Imagens de fundo

Um dos motivos mais comuns para enviar um e-mail apenas com imagens é que ter fundos interessantes que não são apenas brancos ou de cor sólida cria um e-mail visualmente mais interessante. Mas você não precisa usar uma cor sólida como plano de fundo em seu e-mail. Você pode usar imagens de fundo e elas são suportadas na maioria dos clientes de e-mail se você codificá-las corretamente. O e-mail do Windows 10 é a maior exceção. Se você tem uma grande base de assinantes no e-mail do Windows 10, deve evitar imagens de fundo.

Há uma grande diferença entre um e-mail codificado com uma imagem de fundo e um e-mail codificado apenas como uma imagem. Se você estiver usando uma imagem de fundo, todo o texto ainda estará visível mesmo quando as imagens estiverem desligadas, então o assinante ainda pode clicar na frase de chamariz inicial, bem como ter uma ideia do que se trata o e-mail e de quem ele é :

Ao contrário de um e-mail em que uma imagem é usada para criar um efeito de imagem de fundo. Nesse caso, o CTA inicial é perdido (assim como o logotipo e o nome da empresa). O e-mail não é tão impactante e, embora a seção de "best-sellers" ainda seja visível e acionável, o objetivo do e-mail - economizar dinheiro em pacotes organizacionais - foi perdido:

A peça Hero é criada com todas as imagens - imagens ativadas (Fonte: Really Good Emails )	A peça do herói é criada com todas as imagens - imagens desligadas

Codificar imagens de fundo não é a coisa mais fácil, mas temos uma postagem no blog para ajudá-lo com isso. Se você tiver modelos configurados com imagens de fundo no Litmus, poderá alterar as imagens de fundo no Editor Visual sem nem mesmo tocar no código. Certifique-se de que os tamanhos da imagem correspondem à imagem que você está substituindo e que você compactou a imagem que está usando para que não seja muito grande.

Imagens e texto deslocados

Qualquer coisa que saia do esperado ou normal tende a chamar nossa atenção e você pode ver exemplos disso em qualquer lugar, inclusive por e-mail.

O exemplo acima tem o deslocamento da imagem, que você pode fazer facilmente como uma imagem inteira, mas e se você quiser deslocar um bloco de texto? Bem, você tem algumas opções. Você poderia compensar um pouco para que o texto não seja realmente deslocado, basta fazer parecer que o elemento está deslocado, como neste e-mail:

Aqui, a parte superior do e-mail está deslocada, mas como você pode ver, é apenas um pouco de azul que está na parte branca, não há texto ou imagens. Portanto, você pode usar uma célula de tabela vazia. Ou se você quiser cantos arredondados que funcionem em qualquer lugar, você pode usar uma imagem decorativa. Mais sobre essas técnicas mais tarde. Nesse caso, o conteúdo real do seu e-mail não é compensado, mas parece ser.

A outra opção é ter tudo deslocado como neste e-mail:

Este e-mail tem toda a seção de texto explicativo deslocada em um bloco sobre uma imagem. Isso é fácil de fazer na web com posicionamento absoluto, mas como isso não é compatível com todos os e-mails, torna-se um pouco mais complicado. Conheço dois métodos diferentes. Se você tem mais, deixe-nos saber nos comentários!

Primeiro, existe o Posicionamento Absoluto do Faux. Steven Sayo e Mark Robbins escreveram alguns ótimos guias passo a passo para aprender como fazer essa técnica. Steven e Mark fornecem alternativas para fazê-lo funcionar no Outlook e, pela minha experiência limitada com ele, ele tem um suporte muito bom.

Se você não se sentir confortável com o código, também pode criar esse efeito fatiando imagens e posicionando-as ao redor do elemento que deseja deslocar. Um pouco mais confuso, mas funciona. Você tem que certificar-se de testar, testar, testar, pois há uma probabilidade maior de algo dar errado e uma imagem não se alinhar corretamente.

Sou fã do falso posicionamento absoluto porque permite que os e-mails tenham um deslocamento dramático enquanto mantém o texto ativo do e-mail e não tenho que me preocupar em alinhar as imagens fatiadas, mas qualquer um dos métodos funcionará.

Webfonts e texto ao vivo

Manter os padrões da marca é outro grande motivo para usar e-mails só com imagens, porque você simplesmente não consegue fazer com que as fontes apareçam em todos os lugares. Entendi. No entanto, existem muito mais opções de reserva do que Helvetica e Arial. Incentive sua empresa ou seus clientes a ter uma fonte alternativa padrão nas diretrizes de sua marca, para que você possa garantir que sua mensagem chegue a todos os clientes de e-mail.

A Samsung mantém isso interessante usando Trebuchet MS como fonte substituta para suas manchetes. Não é bem a fonte da marca Samsung One, mas ainda mais interessante e atraente do que Helvetica, Arial, texto ALT ou nada:

Email com webfont habilitado e imagens ativadas	Email com substituto exibido e imagens desativadas

Adicionar fontes da web com alternativas interessantes é uma das maneiras mais rápidas de ajudar a destacar seu e-mail quando você não está dependendo de imagens para seu e-mail. Eles são fáceis de adicionar uma vez e, em seguida, implementar em todo o sistema de design de e-mail. E uma vez que seus modelos de e-mail são configurados com as fontes da web, até mesmo os não programadores podem se beneficiar deles se você estiver usando um sistema de modelo.

Texto ALT estilizado

Ao definir o estilo do texto ALT, você pode fazer com que o e-mail mantenha parte da aparência, mesmo sem imagens. Usamos texto ALT estilizado aqui no Litmus para manter uma versão aproximada de nosso logotipo, mas você também pode usar isso nos botões baseados em imagem para destacá-los, caso precise criar e-mails só com imagens. Você pode estilizar o texto ALT adicionando CSS à marca da imagem e pode alterar as cores do plano de fundo e a maioria dos aspectos da fonte para o texto ALT. Ele não é compatível em todos os lugares, mas consulte nosso Guia definitivo para texto ALT estilizado para ver onde ele é compatível e como fazê-lo.

Imagens, células de tabela vazias e regras horizontais estilizadas como elementos de design

Você não precisa ter a imagem inteira para criar elementos interessantes. Às vezes, apenas usar partes da imagem para finalizá-la e combiná-la com células de tabela pode ser usado para criar interesse visual.

Para criar cantos arredondados que aparecem em todos os clientes de e-mail, adicionarei imagens de cantos arredondados à parte superior e inferior dos contêineres. Você pode fazer coisas semelhantes para criar ângulos ou formas como transições entre seções de seu e-mail. Em vez de criar toda a forma com uma imagem, use cores de fundo para a parte com texto e, em seguida, adicione uma imagem na parte superior ou inferior de uma seção para destacá-la.

Você também pode definir o estilo de suas réguas horizontais para criar transições ou divisórias interessantes entre as seções. Usamos estilos simples no Litmus para criar uma linha, mas existem muitas técnicas diferentes que você pode tentar criar divisórias interessantes com apenas uma régua horizontal. (Deixe-nos saber como vai!).

Também temos uma divisória colorida que usamos para separar o conteúdo. Isso é feito completamente com cores de fundo e células de tabela:

Seja criativo com seu código e veja o que você pode fazer sem imagens!

Botões à prova de balas

Esta é a minha maior implicância com e-mails só de imagens. As frases de chamariz baseadas em imagens são difíceis para seus assinantes realizarem ações se eles não puderem vê-las. Se tudo o mais for muito difícil de implementar, pelo menos comece a usar botões de texto ativo para suas frases de chamariz.

São dois e-mails diferentes, um que usa um botão de texto ativo e o outro é um e-mail só de imagens com o botão em uma das imagens. O e-mail à esquerda é muito mais acionável do que o e-mail à direita.

Email com botão de texto ao vivo com imagens desativadas (Fonte: Emails realmente bons )	Email com botão baseado em imagem com imagens desligadas (Fonte: Emails Really Good )

Se o seu argumento para usar e-mails com todas as imagens é que você não obtém muitos cliques sem abrir, então você não deve ter um grande público com imagens desativadas, observe a aparência de seus CTAs sem imagens. Poucas pessoas clicariam se não soubessem no que estão clicando.

Existem várias maneiras diferentes de criar botões de texto ativo, portanto, certifique-se de usar um método que funcione para o seu público e, como sempre: Teste, teste, teste!

Convertendo aqueles e-mails só de imagens

Procurei alguns colegas desenvolvedores de e-mail para me ajudar a mostrar como algumas dessas técnicas podem ser usadas para converter e-mails só de imagens em texto ativo. Você notará que converter esses e-mails em texto ativo não apenas aprimorou a versão do e-mail com as imagens desativadas, mas também aprimorou a versão do e-mail para celular e modo escuro.

Conversão de e-mail da S'well

Anne K. Tomlin é a fundadora da Email's Y'all. Uma codificadora experiente que conhece os meandros das peculiaridades do e-mail, ela se preocupava em mostrar a diferença que o texto ao vivo pode fazer em um e-mail.

Em suas próprias palavras: E-mails com todas as imagens não levam sua mensagem para pessoas que têm imagens bloqueadas por padrão e qualquer pessoa que use um leitor de tela ou assistente digital (Siri, Alexa, etc). Se sua meta são conversões, você nem mesmo deu a essas pessoas a chance de converter. O e-mail de S'well era dez vezes pior do que um e-mail normal apenas com imagem porque não havia texto alternativo. Um leitor de tela ou assistente digital leria: “Comemore movimentos ousados, grandes ideias e alegria! Veja este email no seu navegador. Comprar. Histórias. Sobre nós. Inchar." e imediatamente pule para ler o rodapé. Que experiência horrível! Assinantes com imagens bloqueadas literalmente veem uma página em branco. Ninguém vai olhar para uma página em branco e pensar: “Eu deveria verificar isso em um navegador!” e clique no link “visualizar no navegador”. Você tem 5 segundos para chamar a atenção do assinante, então se você tiver um e-mail com todas as imagens e essas imagens não forem carregadas por padrão, você pode também não ter enviado um e-mail. Na verdade, esse assinante pode vê-lo como você não está enviando nada, então ele deve apenas cancelar a assinatura.

Email original:

Versão de texto ao vivo de Anne:

Eu prefiro muito a versão de Anne, principalmente por causa dos gatos, mas também por causa da maior acessibilidade no celular e no modo escuro. O texto não está preso em uma imagem, então, em vez de encolhê-lo, ele permanece legível. A versão do modo escuro é realmente escura e não será uma luz ofuscantemente brilhante se eu estiver olhando para ela em um quarto escuro, além disso, qualquer pessoa que tenha seu telefone configurado no modo escuro para reduzir o cansaço visual, não será confrontado com o modo de luz que eles estavam tentando evitar.

Versão móvel original	Anne's Mobile version
Versão original do modo escuro	Versão do modo escuro de Anne

E para a conversão de todas as imagens…. [por favor, rufem os tambores]

Tada! Nada é perdido quando as imagens são desligadas (exceto os gatinhos fofos). Os assinantes ainda podem agir e, o mais importante: eles ainda podem ler sua mensagem .

Veja como Anne faz isso

Conversão de e-mail do Magic Spoon

Carin Slater é especialista em marketing por email e desenvolvedora de email por trás de todos os emails do Litmus. Espere, sou eu! Certo, bem, você conhece minha postura em e-mails só de imagens.

Eu adoro e-mails do Magic Spoon (e do cereal Magic Spoon também, tão gostoso), mas fico sempre triste quando eles chegam na minha caixa de entrada como e-mails só de imagens. Eles geralmente são muito bons em incluir o texto da imagem como texto ALT para que você ainda possa saber o que está acontecendo no e-mail se não houver imagens, mas este e-mail não foi tão descritivo ou inclusivo como outros e-mails que eles enviaram. Pensei em abordar este aqui, pois há um botão GIF que é muito divertido e pode parecer difícil de fazer sem usar imagens.

Email original:

Versão de texto ao vivo de Carin:

Eu tive que fazer um compromisso, pois não parece perfeito no Modo escuro nos clientes de desktop do Outlook 365 no Windows, então isso seria algo que pode ou não ser importante dependendo de onde os assinantes do Magic Spoon abrem seus e-mails. E como eu estava trabalhando com um e-mail só com imagens e não com o arquivo de design, não consegui criar um Modo escuro ou uma versão móvel do GIF, ambos os quais eu teria pedido para que pudessem ser trocados se Eu estava trabalhando com os arquivos originais. Apesar desses problemas, o Modo escuro e as versões móveis foram aprimorados na versão de texto ao vivo. A animação GIF é mantida na versão móvel e o texto é mais legível, embora apenas um pouco porque o Magic Spoon criou uma versão só de imagens que eles trocaram para o celular (yay para o celular, mas boo por ter o e-mail codificado duas vezes).

Versão móvel original	Versão móvel convertida
Versão original do modo escuro	Versão do modo escuro convertido

Para a versão totalmente com imagens, usei texto ALT estilizado para manter alguma semelhança com o logotipo e o slogan no rodapé, de modo que o e-mail se pareça com a versão da imagem quando as imagens são desligadas. A versão de texto ao vivo, mais uma vez, é muito mais atraente visualmente, acionável e envolvente do que a versão só de imagens.

Veja como Carin faz isso

* Todos os e-mails de conversão foram retirados da minha caixa de entrada

Faça seus e-mails brilharem, não importa as circunstâncias

Uma coisa que aprendi com meus anos no e-mail é que os assinantes sempre farão o inesperado. Quer seja pesquisando em e-mails em vez de usar pastas, ou abrindo um e-mail em um navegador em seus telefones, você não sabe como as pessoas irão ver seu e-mail. Portanto, faça o possível para garantir que eles proporcionem a seus assinantes uma experiência ideal, não importa onde estejam abrindo seu e-mail.