#NoFailMail: as 5 falhas mais comuns no design de e-mail (e como evitá-las)

O design pode ser a coisa mais desconcertante no e-mail. Um dos principais motivos para lançar nossa iniciativa #NoFailMail é ajudar designers, desenvolvedores e profissionais de marketing de e-mail a conquistar tudo que pode quebrar o e-mail, sejam imagens, formatação ou clientes de e-mail.

É óbvio, mas diremos mesmo assim: você deve encontrar e corrigir os erros de design antes de enviar seu próximo e-mail. Falhas de design podem impedir que seus leitores abram e ajam de acordo com suas mensagens e afetam a reputação de sua marca.

Nesta postagem, você aprenderá sobre cinco falhas comuns de design de e-mail que afetam o e-mail e como consertar cada uma delas.

Para a falha!

Email Fail # 1. Não projetando para vários tamanhos de tela.

O mundo do email não está mais dividido em desktop e mobile. Seus assinantes podem ler seu e-mail em tudo, desde uma tela de TV “inteligente” na parede a um smartwatch em seus pulsos.

Eles podem nem estar lendo suas mensagens. Em vez disso, eles podem estar ouvindo enquanto um assistente doméstico como Alexa ou Google Home ou um leitor de tela lê seus e-mails em voz alta.

Um estudo de 2016 da Litmus and Fluid mostrou que 51% de todos os assinantes cancelam a assinatura de e-mails que não são exibidos ou funcionam bem em seus smartphones - e 43% relatam esses e-mails como spam. Essas estatísticas provam que projetar para várias telas não é mais uma tarefa agradável.

Uma rápida olhada na participação de mercado do cliente de email mostra como o celular domina o cenário. Quatro dos 10 principais clientes de e-mail são apenas para celular e afirmam um total de mais de 40% de todas as aberturas de e-mail:

• IPhone da Apple, 29%
• Apple iPad, 10%
• Samsung Mail 4%
• Google Android, 3%

O design responsivo e híbrido, que usa tabelas e imagens fluidas para fazer o conteúdo fluir em diferentes tamanhos, é a melhor opção para criar e-mails que sejam renderizados corretamente em clientes e plataformas.

Nosso e-book gratuito, The Ultimate Guide to Email Optimization and Troubleshooting, ajudará você a entender qual abordagem provavelmente funcionará melhor se você estiver fazendo a transição de formatos centrados em desktop para formatos móveis otimizados.

Nesse ínterim, essas cinco soluções alternativas tornarão seus e-mails mais legíveis e mais fáceis de agir, independentemente de seus assinantes os visualizarem em desktops ou dispositivos móveis:

1. Use um tamanho de fonte maior.
   Parece loucura - uma fonte maior em uma tela menor? - mas funciona. Legibilidade sem forçar as pessoas a apertar, ampliar ou rolar suas mensagens de um lado para o outro para ver seu conteúdo é o objetivo. Recomendamos um tamanho mínimo de fonte de 14 px para o corpo do texto e 22 px para os títulos.
2. Projete um CTA amigável ao toque.
   O dedo não é tão preciso quanto o mouse do computador. Substitua links clicáveis ​​por botões. Em seguida, dimensione esses botões em no mínimo 44px X 44px, que é aproximadamente o tamanho de uma ponta de dedo média.
3. Reduza-se a uma coluna.
   Layouts de e-mail de duas ou três colunas não são lidos bem em telas menores. Lembre-se de que seu objetivo é tornar o conteúdo do seu e-mail fácil de ler, sem beliscar, aplicar zoom ou deslizar lateralmente. Se você não estiver pronto para mudar para um design responsivo, optar por um layout de coluna única tornará seus e-mails mais legíveis em mais tamanhos de tela.
4. Simplifique seu conteúdo.
   Você realmente precisa de todo esse conteúdo em seu e-mail para obter cliques ou conversões? Use o rastreamento de links e outras ferramentas para descobrir o que seus leitores estão clicando e o que estão ignorando. Mova para um bloco de cópia primário, ou dois no máximo. Chame a atenção com uma forte imagem de herói em vez de um agrupamento de fotos menores de produtos.
   Além disso, procure frases mais curtas e blocos de cópia. Cinco linhas de cópia em um formato de desktop padrão podem ser facilmente agrupadas em 10 ou 15 no celular.
5. Aumente o espaço em branco.
   O espaço em branco é a área em branco ao redor das imagens e blocos de cópia. Use-o liberalmente para focar a atenção em áreas de conteúdo, para dar ao botão CTA mais espaço para respirar e para quebrar parágrafos em um bloco de cópia.

Falha no e-mail nº 2: deixando os links azuis atrapalharem seu design

A vinculação automática é uma característica útil, mas às vezes irritante, tanto no iOS quanto no Gmail. Você verá isso quando datas, números de telefone e endereços se tornarem links azuis clicáveis ​​/ tocáveis ​​automaticamente.

Eles podem ser úteis em texto simples ou e-mails pessoais porque são convenientes - um toque pode iniciar um mapa ou clicar para ligar, ou salvar um evento em um calendário. Mas também podem ser difíceis de ler contra qualquer fundo que não seja branco. Eles também interferem na sua marca nesse e-mail.

Felizmente, existem maneiras de desativar esses links azuis. No iOS Mail, você pode sobrescrever links azuis estilizando o seletor do detector de dados do Apple Mail (saiba como). Links azuis no Gmail podem ser corrigidos usando o método (que consiste em agrupar endereços ou números de telefone em uma tag e definir o estilo para esse intervalo, ou você pode substituir todo o estilo padrão adicionando uma declaração de estilo específico do Gmail ao seu CSS (Veja como )

OS SEUS E-MAILS TÊM LINKS AZUIS? Visualize seus e-mails em mais de 90 clientes e dispositivos de e-mail populares e identifique erros - incluindo links azuis - antes de enviar. Saiba mais →

Falha no email nº 3: as imagens deram errado

Ah, imagens. Eles podem dar errado de várias maneiras, mas quando você os usa da maneira certa, eles dão vida aos seus e-mails. Portanto, vale a pena conferir as falhas de imagem que vemos todos os dias e como você pode evitar que quebrem seu design:

1. Usando o formato de imagem errado
   A solução aqui não é usar o formato de imagem “certo”, seja JPEG, GIF, PNG ou SVG, porque não existe um único formato certo. Cada formato difere dos outros em tamanho de arquivo, compactação, qualidade e melhor caso de uso. Para uma comparação detalhada dos prós e contras dos formatos de imagem mais comuns, consulte “PNG, GIF ou JPEG? Qual é o melhor formato de imagem para e-mail? ” no blog Litmus.
2. Não otimizando para tela Retina
   “Tela de retina” é um termo cunhado pela Apple para se referir a telas de alto DPI vistas em dispositivos móveis. Imagens que não são otimizadas para tela Retina geralmente aparecem borradas ou confusas, levando a uma experiência visual abaixo da média.
   

   

   Para deixar seu visual pronto para retina, crie sua imagem com cerca de duas vezes o tamanho que você planeja exibi-la e, em seguida, defina o tamanho da imagem como seu tamanho pretendido no HTML. Se você deseja exibir uma imagem de 300 × 200 pixels, crie-a em 600 × 400 e defina-a como 300 × 200 usando atributos HTML ou propriedades CSS.

   No entanto, certifique-se de observar o tamanho do arquivo. Embora o uso de imagens retina melhore a aparência de seus visuais, também aumenta o tamanho dos arquivos, o que significa que as imagens podem demorar mais para carregar na caixa de entrada. Se você usar várias imagens otimizadas para Retina, poderá acionar o recorte de mensagens no Gmail.

Teste o tamanho do arquivo de imagem + tempo de carregamento Com o Litmus Checklist você pode testar suas imagens quanto ao tamanho do arquivo, tempo de carregamento e links quebrados. Além disso, veja instantaneamente a aparência de suas campanhas em clientes de e-mail populares. Comece uma lista de verificação →

Falha no e-mail nº 4: Não projetar para imagens desativadas

O outro problema com as imagens surge quando elas não são renderizadas. Alguns clientes de e-mail bloqueiam automaticamente o carregamento das imagens até que o usuário permita. Ou os próprios usuários preferem bloquear as imagens por padrão e escolher quais desejam ver.

De qualquer forma, o bloqueio de imagens reduz a capacidade do seu e-mail de se comunicar assim que a mensagem é aberta. Embora não seja possível forçar os usuários a desbloquear as imagens, você pode tomar medidas para fazer com que uma mensagem de desativação de imagens tenha uma boa aparência. Texto ALT e botões à prova de balas são fáceis de implementar e podem ajudá-lo a resgatar conversões que você pode ter perdido sem imagens para gerá-las:

1. Use texto ALT básico ou estilizado. O texto ALT é a combinação de palavras que você escolhe para descrever a imagem e que aparece quando a imagem é bloqueada. Deve ser uma prática padrão - a maioria dos editores de e-mail fornece um espaço para escrever a descrição da imagem - mas uma rápida olhada na caixa de entrada revela que quase todos os outros e-mails tinham imagens, mas nenhum texto ALT. Esta é a aparência de um e-mail com muitas imagens sem o texto ALT, quando as imagens são desativadas:
   Aqui está o mesmo e-mail com imagens ativadas. Veja o que seu cliente teria perdido?
   Uma boa prática de texto ALT é escrever uma descrição eficaz, não apenas um rótulo de imagem. Para ir um passo além, experimente texto ALT estilizado. Aqui, você adiciona um pouco de CSS embutido para alterar a fonte, cor, tamanho, estilo e peso do texto ALT.
2. Use botões à prova de balas
   Se você colocar sua frase de chamariz dentro de uma imagem, ela ficará invisível quando as imagens forem desligadas. Um botão à prova de balas usa HTML e CSS em vez de formatos de imagem como JPGs e GIFs. Eles não dependem de renderização de imagens para aparecer no e-mail. E aqui está o mesmo e-mail com imagens habilitadas:

Jason Rodriguez, comunidade Litmus e evangelista de produto, descreve quatro abordagens básicas para o design de botões em seu guia, “The Ultimate Guide to Bulletproof Buttons for Email Design”. Confira para ver a codificação, exemplos e prós e contras de cada abordagem.

Email Fail # 5. Não otimizando para e-mail de texto simples

Não, não vamos reviver o Grande Debate Texto-Versus-HTML do início dos anos 2000. Mas o e-mail de texto simples ainda desempenha um papel significativo em sua estratégia de e-mail, especialmente com o crescimento de smartwatches, leitores de tela e assistentes domésticos, nenhum dos quais renderiza HTML.

Essas dicas o ajudarão a criar um e-mail de texto simples atraente, seja uma mensagem autônoma ou a versão de texto de uma mensagem MIME de várias partes:

• Escreva títulos curtos, mas claros. Use pelo menos uma linha de espaço em branco para diferenciar cada título do bloco de cópia abaixo dele. Use dispositivos tipográficos como travessões ou sinais de igual.
• Divida os blocos de cópia longos. Use mais blocos de cópia, mas mais curtos, para evitar o temido e ilegível rio cinza de cópias.
• Crie hierarquia de informações com listas. Todo o tipo em um e-mail de texto simples tem a mesma fonte e tamanho de ponto. Portanto, você tem que trabalhar mais para guiar o leitor aos pontos-chave. Use listas para destacar informações em uma série. Defina cada item com uma designação compatível com o texto, como um traço (-) ou asterisco (*). (Os marcadores não funcionam em texto simples.)
• Use o espaço em branco liberalmente. O espaço em branco organiza as informações relacionadas para facilitar a digitalização. Use margens largas e quebras de linha extras entre blocos de cópia, frases de chamariz e cabeçalhos ou rodapés administrativos.
• Defina CTAs. O que as pessoas faziam antes de terem botões de CTA? Eles usaram captadores de atenção como o espaço em branco para separá-los de outras cópias e com dispositivos tipográficos como setas (>> e <<) para destacá-los. Evite listas longas de CTAs e coloque-as em espaços em branco para torná-las fáceis de clicar ou usar os dedos.

Este e-mail ilustra todas essas práticas recomendadas para e-mails de texto simples:

Cobrimos mais maneiras de enviar #NoFailMail nessas postagens anteriores: Mais dicas e recursos para #NoFailMail

• #NoFailMail: Por que evitar erros é a chave para o sucesso do e-mail
• Como os testes o ajudam a evitar as 5 maiores falhas de e-mail
• 5 falhas de redação que você deve evitar

Quer mais recursos como esses? Assine nosso boletim informativo para ficar por dentro das novidades por e-mail.