Email responsivo
Como fazer seus emails serem lidos com facilidade no celular, no tablet e no computador
Você abre uma newsletter no celular e precisa dar zoom para ler o texto. As imagens ultrapassam a tela e o botão é tão pequeno que você toca no link errado. O mais provável é que você feche o email em poucos segundos. É exatamente isso que um email responsivo evita.
O que é um email responsivo?
Um email responsivo, ou email adaptável, é um email criado para se ajustar automaticamente ao tamanho da tela em que é aberto. Ele fica bem em um computador, em um tablet e em um celular.
Para isso, o layout reorganiza seus elementos de acordo com o espaço disponível. Em telas grandes, ele pode exibir duas ou três colunas. No celular, essas colunas ficam empilhadas uma embaixo da outra, o texto mantém um tamanho legível e os botões aumentam para facilitar o toque. Ele também é a base de um email acessível.
O conceito vem do responsive design das páginas web. Mas o email tem suas próprias regras, porque cada programa de email interpreta o código do seu jeito.
Por que ele é indispensável
Grande parte dos seus assinantes vai ler suas campanhas no celular. Muitas vezes, eles farão isso em momentos rápidos: no transporte, em uma pausa ou enquanto esperam. Se o email não for fácil de ler logo de cara, eles não vão dar uma segunda chance.
Um layout adaptável melhora a experiência de leitura, e isso aparece nos seus resultados. Ele aumenta os cliques, porque os links e botões são fáceis de usar. Reduz os descadastramentos e as reclamações, porque o assinante não fica frustrado. E fortalece a imagem da sua marca, que passa uma impressão mais caprichada e profissional.
Além disso, um email confortável de ler gera mais interação. Essa interação positiva também favorece a sua entregabilidade a médio prazo.
Como funciona um email responsivo
O email é construído com HTML e estilos CSS. Há três abordagens principais para que ele se adapte:
Layout fluido. As larguras são definidas em porcentagens em vez de pixels. O conteúdo se estica ou encolhe de acordo com a tela. É simples, mas oferece pouco controle.
Layout com media queries. São regras CSS que aplicam estilos diferentes de acordo com a largura da tela. Por exemplo: “se a tela tiver menos de 600 pixels, empilhe as colunas e aumente o texto”. O Gmail e o Apple Mail as interpretam, mas algumas versões do Outlook para desktop não.
Layout híbrido. Combina os dois anteriores para que o email fique bem mesmo nos programas que ignoram as media queries. É o método mais robusto e o que muitos templates profissionais usam.
Dicas essenciais para criar um email responsivo
Estas são as boas práticas mais importantes:
- Use uma única coluna no celular: é a estrutura mais fácil de ler em telas estreitas.
- Limite a largura a cerca de 600 pixels: é o padrão que fica bem na maioria dos programas de desktop.
- Cuide do tamanho da fonte: pelo menos 14 pixels para o texto e um pouco mais para os títulos.
- Crie botões grandes: o guia de design da Apple recomenda áreas de toque de pelo menos 44 × 44 pontos. Um botão desse tamanho pode ser tocado com o dedo sem erros.
- Adapte as imagens: elas devem ocupar no máximo 100% da largura disponível e ser leves para carregar rápido com dados móveis.
- Escreva um bom texto alternativo: o alt text aparece quando as imagens estão bloqueadas.
- Coloque o mais importante no topo: no celular, o assunto, o preheader e o primeiro bloco devem deixar claros a mensagem e o call to action.
Um design de email modular facilita muito esse trabalho. Cada bloco está preparado para se reorganizar sem quebrar o conjunto.
Como verificar se o seu email fica bem
Nunca envie uma campanha sem revisá-la antes. Envie um teste para você mesmo e abra no celular e no computador, em diferentes programas de email, se puder.
Veja se o texto pode ser lido sem dar zoom, se as imagens se ajustam e se os botões são fáceis de tocar. Também vale a pena conferir como ele aparece no modo escuro, cada vez mais comum.
Se você quiser entender por que um mesmo email muda de um programa para outro, explicamos no artigo sobre email rendering.
Depois do envio, analise suas métricas. Se o seu CTR no celular for muito mais baixo do que no desktop, é sinal de que algo está errado na versão mobile.
Como o Mailrelay ajuda você
No Mailrelay, facilitamos a criação de emails adaptáveis sem mexer em código. Nosso editor gera emails responsivos automaticamente, e você pode começar a partir de um template de email já preparado para o celular. Você também pode enviar testes para você mesmo antes de lançar cada campanha.
Tudo isso em um plano gratuito de até 80.000 emails por mês e 20.000 contatos. Se você quiser testar, pode criar sua conta de email marketing no Mailrelay ainda hoje.
Perguntas frequentes sobre email responsivo
Qual é a diferença entre um email responsivo e um mobile friendly? Um email mobile friendly aparece corretamente no celular, muitas vezes porque é simples e de uma única coluna. Um email responsivo vai além: ele muda sua estrutura de acordo com a tela.
Preciso saber programar para criar um email responsivo? Não. Os editores de arrastar e soltar das ferramentas de email marketing geram o código adaptável para você.
Qual deve ser a largura de uma newsletter? O mais comum é entre 600 e 640 pixels no desktop. No celular, o layout se ajusta à largura da tela.
Em conclusão
Um email responsivo garante que a sua mensagem chegue bem a cada assinante, seja qual for o dispositivo. Ele é a base para que o restante da sua campanha funcione: o conteúdo, o design e a chamada para ação.
Use uma estrutura simples, cuide do tamanho dos textos e dos botões e revise sempre seus envios antes de lançá-los. Assim, cada email terá as melhores chances de gerar cliques.