Litmus Live: como manter o design de e-mail relevante

Com uma média de 333 bilhões de e-mails enviados por dia, o e-mail marketing se torna uma área bem competitiva. Como o e-mail custa pouco, ele deve continuar com a gente por muito tempo. Por isso, se você ainda não domina a arte de criar e-mails de qualidade, chegou a hora.

Além do número de concorrentes, há outros desafios que os profissionais de e-mail marketing podem encontrar pelo caminho.

Desafios dos profissionais de e-mail marketing hoje

• Mais clientes de e-mail e dispositivos do que nunca. Segundo a Statista, o número de usuários de e-mail em 2022 é de cerca de 4,3 bilhões. Isso significa uma infinidade de dispositivos e clientes de e-mail aos quais precisamos nos adaptar.
• Cansaço de e-mails e atenção reduzida.
• Preferências definidas pelo usuário, como o modo escuro. Em 2020, o Android Authority fez uma pesquisa e descobriu que quase 82% dos usuários de Android preferem o modo escuro.
• Bots automáticos fazem triagem e filtram as caixas de entrada.
• Spam e e-mails de phishing estão em alta. A Statista informa que, em setembro de 2021, cerca de 88,88 bilhões de 105,67 bilhões de e-mails eram spam.
• Firewalls bloqueiam ou alteram e-mails por padrão.

E isso é só o começo da lista. Mas não devemos ver esses desafios como obstáculos para uma campanha de e-mail eficaz. Pelo contrário: eles permitem que os profissionais de marketing desenvolvam suas habilidades e criem conteúdo de primeira.

3 princípios de design de e-mail que você precisa seguir

O design de e-mail se apoia em três pilares:

• Acessibilidade.
• Responsividade.
• Beleza.

Vamos ver cada um deles de perto.

Acessibilidade. Antes, quando falávamos de e-mails acessíveis, normalmente queríamos dizer que eles deveriam ter textos alternativos (alt), ser fáceis de escanear e usar fontes e tamanhos legíveis. Hoje, também esperamos que os e-mails tenham concisão e hierarquia, contraste ideal e bom uso do espaço em branco.

Responsividade. O principal requisito de um e-mail responsivo costumava ser este: ele precisava se redimensionar e aparecer corretamente em diferentes resoluções de tela. Com a evolução do e-mail marketing, surgiram novos requisitos. Hoje, os e-mails precisam levar em conta o modo escuro, os bloqueadores de imagens e a exibição ideal nas versões para celular.

Beleza. Lembre-se de que, além de chamar a atenção, um e-mail também precisa ser um produto completo.

Antes de partir para o design, faça uma auditoria da plataforma de e-mail

Com a velocidade com que as plataformas de e-mail evoluem hoje, é fácil ficar para trás e perder o controle. Não são só as plataformas que avançam: sua empresa também. E, se ela atrai muitos assinantes novos, eles podem mudar as regras do seu e-mail marketing: por exemplo, usar um cliente de e-mail diferente daquele com que você está acostumado ou preferir o celular ao desktop. Todos esses fatores podem influenciar diretamente o design dos e-mails.

Para acompanhar essas mudanças, todo ano os profissionais de e-mail marketing devem fazer uma auditoria e:

• Identificar os principais clientes de e-mail.
• Acompanhar a proporção de usuários de desktop e de celular.
• Acompanhar a proporção de endereços de e-mail gratuitos e corporativos.

Exemplo de auditoria

Imagine que você trabalha com B2B e, depois de uma auditoria, percebeu que a maioria dos seus usuários:

• usa os clientes de e-mail Outlook ou Gmail.
• tem endereços de e-mail corporativos.
• lê os e-mails no computador.

Nesse caso, alguns pontos a considerar no design dos e-mails podem ser:

• Priorize os clientes de e-mail de desktop. Isso não quer dizer esquecer de vez as versões para celular. Você só precisa dar mais atenção para deixar as versões de desktop o mais impecáveis possível.
• Firewall (bloqueadores de imagens). Infelizmente, isso você não controla. Então, o melhor conselho é criar e-mails que continuem fazendo sentido mesmo sem as imagens.
• Clientes com renderização de CSS ruim. Cores, tabelas, botões e outros elementos do e-mail podem sair diferentes do que você planejou. E é muito importante levar isso em conta ao criar um e-mail.

O que ter em mente ao criar modelos de e-mail em HTML

Tabelas: pensando dentro da caixa

As tabelas são a base de um design de e-mail sólido e responsivo, porque:

• são a forma de renderização mais consistente (em comparação com floats, padding, margins e alinhamento). É mais fácil absorver a informação quando ela está organizada em tabela. Imagine se não houvesse as barras horizontais no exemplo abaixo. Seria difícil navegar pelo e-mail.

• são mais fáceis de criar e controlar no celular: as colunas viram linhas. Comparadas ao CSS, as tabelas HTML funcionam bem nos clientes de e-mail e não transformam seu layout bonito em algo completamente diferente.

Otimização para texto

Como boa prática, evite usar imagens para transmitir textos e botões. As imagens muitas vezes são bloqueadas ou nem chegam a ser baixadas. Se você combinar texto e imagem, a oferta principal continua legível mesmo que a imagem seja bloqueada. E essa é a melhor forma de alcançar o maior número de clientes.

Além disso:

• media queries ou o redimensionamento automático ajudam a exibir o texto melhor no celular.
• botões em HTML se adaptam ao modo escuro e se destacam mais que imagens.

No primeiro exemplo, os usuários ainda conseguem ler a oferta, se interessar e visitar o site para saber mais. No segundo, não conseguem e perdem qualquer chance de conhecer a oferta e comprar. Todo mundo sai perdendo: o usuário e a empresa.

Que tipos de imagem usar no seu modelo de e-mail

PNGs

São um formato de imagem muito útil para designs inovadores e para contornar o CSS imprevisível.

Eles permitem efeitos de estilo como:

• Transparência/degradê

• Sombras projetadas

Imagens PNG também podem ser recortadas para separar seções do e-mail, principalmente na transição entre cores de fundo diferentes.

Isso ajuda a criar separação visual, destacar informações e melhorar a legibilidade.

Os GIFs não são mais um formato a evitar:

• são melhores que o Flash, que os clientes de e-mail nunca suportaram e que foi descontinuado de vez.
• os loops criam uma animação contínua. Se tudo for feito direitinho, o usuário nem percebe que o GIF se repete.
• menos cores = arquivos menores, então seus e-mails carregam mais rápido.

As ilustrações digitais também são indispensáveis no design de e-mail em 2022. A ilustração digital é um tipo de arte criada com ferramentas digitais. Não confunda com fotos editadas: as ilustrações digitais são feitas do zero.

Elas têm as seguintes vantagens:

• são versáteis e fáceis de redimensionar, editar e reaproveitar. Assim, você gasta muito menos tempo criando conteúdo visual para os seus e-mails.
• transmitem a identidade da marca quando os elementos em CSS são imprevisíveis. Enquanto os elementos em CSS podem mudar de cor (e estragar a ideia original), as ilustrações digitais continuam iguais, seja qual for o cliente de e-mail que o assinante usa.

Para aproveitar ao máximo as ilustrações digitais, siga estas dicas:

• Dê estilo com sombra projetada, contorno ou padding (se for JPEG). Isso deixa a ilustração digital com um ar mais real.
• Prefira cores de tom médio para que as imagens não se misturem ao fundo no modo escuro. Assim, elas ficam lindas em qualquer modo que o assinante use para ler o e-mail.

O CSS (Cascading Style Sheets, ou folhas de estilo em cascata) é a parte do código usada em e-mails HTML para mudar o design: fontes, cores, espaçamentos etc. É uma ferramenta muito prática, mas traiçoeira, porque em alguns clientes o CSS pode ser exibido de forma incorreta e transformar seu e-mail em outra coisa, como no exemplo abaixo.

Por isso, tenha cuidado e teste os e-mails com CSS em vários clientes de e-mail para evitar surpresas desagradáveis.

Principais lições

• Priorize as necessidades dos clientes de e-mail dos seus assinantes e crie o design de acordo com elas. Não perca tempo com o que se mostra desnecessário.
• Otimize tempo e recursos (crie modelos sólidos para os casos de uso recorrentes). Assim, sobra mais tempo para outras tarefas importantes.
• Abrace e se adapte às mudanças de paradigma do e-mail, como a responsividade e o modo escuro. É preciso acompanhar os tempos para manter seus e-mails relevantes.
• Sinta-se à vontade para orientar suas equipes de desenvolvimento e design, já que você traz conhecimentos e experiência essenciais. Lembre-se de que todos têm o mesmo objetivo e precisam trabalhar juntos para alcançá-lo.

O Litmus Live é uma conferência de marketing que dura 2 dias e reúne muitos especialistas em marketing digital. Fizemos anotações durante a palestra de Ali Mahad, “Accessible, Responsive, and Beautiful Email Design in 2022”, acrescentamos alguns números e ideias nossas e transformamos esse material em um artigo que vai ajudar você a se orientar no design de e-mails.

Crie um modelo de e-mail no Blocks e experimente essas técnicas!

Se quiser conhecer outras conferências e feiras de e-mail marketing, leia nosso artigo sobre as próximas conferências de e-mail marketing de 2023.