Email marketing responsivo: descubra as 10 melhores práticas

O interesse em email marketing responsivo tem crescido constantemente, e isso não é uma surpresa: de acordo com dados do State of Email Report 2017, 54% das pessoas abrem seus emails por meio de um dispositivo móvel.

Por conta disso, qualquer empresa que queira um bom retorno dessa estratégia precisa levar algumas práticas em consideração para conquistar os cliques dos leitores. E isso não é tão simples!

A base de um design responsivo é construída com códigos CSS e HTML e ainda depende do suporte ou não a esse tipo de programação.

Para te ajudar com esse desafio, vamos te ensinar 10 dicas que vão te ajudar a criar emails responsivos que permitem uma navegação confortável, independentemente do aplicativo que o leitor esteja utilizando.

Vamos lá?

1. Mantenha uma estrutura simples

Embora as telas dos celulares estejam aumentando, elas ainda são muito pequenas em relação ao tamanho de um monitor. Nesse caso, utilizar uma estrutura simples é a chave para garantir uma boa experiência para todo mundo.

Mantenha a imagem de fundo neutra (branca ou com tons de cinza) e trabalhe com poucas cores (3 no máximo). Isso vai ajudar a criar um template claro para os usuários mobile e chamar a atenção apenas para o que é realmente importante.

2. Reduza a quantidade de texto no corpo da mensagem

Quanto mais texto a sua mensagem tiver, mais o seu leitor terá que rolar a tela de visualização. Neste caso, “menos é mais”. Facilite o consumo da informação e tente incluir os dados mais importantes o mais próximo do topo possível.

Por exemplo: os CTAs que não estiverem visíveis de imediato correm o risco de não serem acionados.

3. Diminua a quantidade de imagens e otimize-as

Muitos provedores de email costumam bloquear as imagens de uma mensagem como medida de segurança e, em dispositivos móveis, para preservar o consumo de dados.

Além disso, se o leitor tiver uma internet de velocidade lenta, as suas imagens podem demorar para carregar, o que vai frustrá-lo.

Nestes casos, a melhor forma de prezar por uma boa experiência é utilizar a menor quantidade de imagens possíveis e otimizar todas elas:

• reduza o tamanho do arquivo;
• use códigos de redimensionamento de acordo com a proporção da tela;
• preencha o alt text e a descrição;

4. Deixe os CTAs grandes para facilitar o toque em telas menores

Seu email tem um objetivo, e muito provavelmente ele está “traduzido” em forma de um call to action na sua mensagem. Ou seja, ele é um dos elementos mais importantes do seu texto.

Ao pensar em um design mobile-friendly, lembre-se de que os CTAs serão acionados por dedos, e não por um mouse! Por conta disso, a Apple recomenda a utilização de ícones com uma área mínima de 44 × 44 pixels, o que facilita o toque.

Outra boa prática relacionada aos CTAs é deixar um espaço vazio ao redor dos botões, o que evita que o usuário clique em links que ele não tem interesse em acessar.

Dica bônus: se você utiliza a RD Station para disparar as suas campanhas de email marketing, descubra como criar um CTA otimizado para mobile.

5. Otimize a tipografia em tamanho e tipo

Como já foi dito, quanto mais simples o seu design para mobile, melhor. E isso também se aplica à tipografia.

Se você utilizar uma fonte muito diferente ou refinada, corre o risco de que ela não seja reconhecida pelo aplicativo de leitura do email, o que leva o sistema a trocá-la por outra mais comum. Nesse caso, todos os esforços que você fez para criar um design elaborado podem ir por água abaixo.

Evite essa situação e utilize fontes comuns e populares, como:

• Arial;
• Georgia;
• Helvetica;
• Tahoma;
• Times New Roman;
• e Verdana.

Além disso, o tamanho também importa! Muitos aplicativos exigem uma fonte de no mínimo 13 pixels. Ou seja, se você utilizar um tamanho menor, eles vão redimensioná-la automaticamente para esse valor.

6. Use poucas colunas de texto

Outra boa prática extremamente relevante é a utilização de um layout com 1 ou 2 colunas, no máximo.

O 1º caso é o mais indicado, pois fica ótimo em qualquer dispositivo, facilita a leitura e pode ser otimizado para mobile com uma largura de até 640 pixels — o que garante que nenhum conteúdo fique fora do campo de visão com zoom.

E, se você usar 2 colunas, lembre-se de programá-las para exibição na vertical. Para isso, use tabelas aninhadas, que representam a prática mais comum e recomendada, ou altere a propriedade de exibição das células da tabela por meio de programação CSS.

7. Capriche no assunto e no preheader

O campo de visualização do assunto e do texto de apoio são reduzidos quando o usuário lê a mensagem por meio do celular, e apenas os 47 primeiros caracteres são exibidos.

Nesse caso, além de criatividade, é preciso trabalhar esses campos de forma complementar.

Não desperdice o preheader com o “Visualizar como página web” padrão! Escreva um assunto curto − mas bem chamativo — e arremate com um preheader sedutor.

Por exemplo: em vez de “Promoção de verão: vestidos com 50% de desconto. Visualizar como página web”, utilize “O verão finalmente chegou” como assunto e “Vestidos com 50% de desconto” como texto de apoio.

Outra dica matadora é personalizar o preview text com o nome do destinatário. Isso aumenta a conexão com a mensagem e pode te ajudar a aumentar a sua taxa de abertura.

Em todo caso, sempre utilize esta ferramenta para avaliar qual será a aparência do seu email na caixa de entrada.

8. Otimize o código HTML

Muitos leitores de email ainda não leem os parâmetros de CSS, o que dificulta a estilização da sua mensagem.

Nesse caso, a melhor forma é usar o HTML à moda antiga, com técnicas não muito semânticas. Por exemplo: adicionar os estilos diretamente no código HTML e utilizar tabelas para dados não tabulados.

Além disso, quando se trata do tamanho dos elementos, é recomendado o uso de porcentagens em vez de pixels. Isso vai garantir acessibilidade até mesmo em aplicativos com tamanhos não previstos nas media queries.

9. Use templates responsivos

Devido à grande diversidade de aplicativos de leitura e as variadas especificações técnicas que o email marketing responsivo exige, utilizar os templates das ferramentas de automação — como MailChimp, SendGrid e RD Station — é uma ótima forma de superar as barreiras da otimização.

Essas empresas possuem uma equipe de designers e desenvolvedores que já fizeram a maior parte do trabalho por você e criaram uma coleção de templates que serão legíveis em qualquer dispositivo.

10. Pense na experiência como um todo

Por último, mas não menos importante: de nada adianta quebrar a cabeça para construir uma ótima experiência no email e não otimizar os outros pontos de contato do seu cliente.

Se uma pessoa clica no CTA de um email e vai para uma landing page que demora para carregar ou que não se adequa ao tamanho da tela do seu celular, ela pode se sentir frustrada e não realizar a ação que você gostaria.

Por conta disso, aproveite para ler o nosso post com 8 dicas incríveis para você otimizar suas conversões em páginas mobile e garantir que os seus clientes sempre tenham uma experiência agradável!