5 dicas de como fazer um e-mail responsivo

Um e-mail responsivo é aquele que se reorganiza conforme a tela em que é aberto. No computador pode mostrar duas colunas; no celular, empilha tudo em uma, aumenta a letra e deixa o botão do tamanho de um dedo. Como muita gente confere a caixa de entrada pelo telefone, o e-mail que não se adapta obriga a dar zoom e a arrastar a tela para os lados. Quase ninguém faz isso. Apaga.

Se você monta suas campanhas no editor de uma plataforma de e-mail marketing, os modelos prontos já são responsivos. O trabalho, nesse caso, é não estragar o modelo. As cinco dicas valem tanto para quem usa editor quanto para quem escreve o HTML.

O que é um e-mail responsivo

Tecnicamente, é um e-mail cujo código traz regras de estilo que mudam com a largura da tela. A dificuldade é que e-mail não é site. Cada aplicativo interpreta o código do seu jeito. O Apple Mail aceita quase tudo. O Gmail aceita boa parte. Versões do Outlook para Windows usam um motor de renderização antigo e ignoram muito do que os outros entendem.

Por isso, o e-mail bem feito parte de uma estrutura que já funciona sem nenhuma regra especial e usa os ajustes por largura de tela apenas como acabamento.

1. Pense primeiro no celular e use coluna única

Desenhe o e-mail para a tela pequena e depois veja como ele fica na grande. O caminho contrário dá mais trabalho. O layout mais seguro tem uma coluna só, com largura máxima em torno de 600 pixels: no celular ocupa a tela inteira, no computador fica centralizado, e nenhum aplicativo precisa reorganizar nada.

Duas ou três colunas servem para vitrines de produtos, desde que empilhem no celular. Teste esse comportamento antes de enviar, porque é onde os modelos mais quebram.

Um e-mail deve ter um objetivo e uma chamada principal. Mensagens com cinco assuntos viram uma rolagem interminável no telefone.

2. Texto legível e botão que cabe no dedo

Use corpo de texto de pelo menos 16 pixels e títulos proporcionalmente maiores. Letra de 12 pixels fica boa no monitor e ilegível no celular. Parágrafos curtos, de duas ou três linhas no computador, viram blocos de tamanho confortável na tela estreita.

O botão precisa de área de toque generosa, perto de 44 pixels de altura, e de espaço livre em volta. Dois links colados um no outro fazem a pessoa tocar no errado. Escreva no botão o que acontece depois do clique: "Ver a oferta", "Agendar horário".

Cuide também do assunto e do pré-cabeçalho, a linha de apoio que aparece ao lado do assunto na caixa de entrada. No celular cabem menos caracteres, então a informação principal vai no começo.

3. Imagens leves, e um e-mail que funcione sem elas

Vários aplicativos bloqueiam imagens até o usuário autorizar, e conexões ruins demoram a carregá-las. Se o seu e-mail é uma única imagem com o texto dentro, quem está nessa situação vê um retângulo vazio. Além disso, texto dentro de imagem não aumenta com a tela e não é lido por leitores de tela.

A regra prática:

• o texto da mensagem é texto de verdade, digitado no editor;
• o botão é construído em HTML, com cor de fundo e texto, e não uma imagem;
• toda imagem tem texto alternativo descrevendo o que mostra;
• as imagens são comprimidas antes do envio e configuradas para nunca passar da largura da tela.

O peso do código também conta. O Gmail corta mensagens cujo HTML passa de aproximadamente 100 KB e mostra um link "exibir toda a mensagem". Tudo o que ficou depois do corte, inclusive o link de descadastro, some da vista.

4. Confira o modo escuro

Muitos leitores usam o celular em modo escuro, e os aplicativos de e-mail alteram as cores da mensagem para acompanhar. Cada um faz isso de um jeito: alguns invertem só os fundos claros, outros mexem em tudo. Os problemas mais comuns são o logotipo escuro com fundo transparente, que desaparece sobre o fundo preto, e a imagem com fundo branco, que vira um bloco claro no meio da tela.

Para evitar: use versões do logotipo com contorno ou com fundo próprio, prefira imagens que funcionem sobre claro e escuro e não dependa de uma cor de fundo específica para o texto ficar legível. Depois, olhe o resultado nos dois modos.

5. Teste nos aplicativos reais e na página de destino

A pré-visualização do editor mostra uma aproximação. Antes de cada campanha, envie o teste para contas no Gmail, no Outlook e no aplicativo de e-mail do iPhone, e abra no celular e no computador. Existem serviços pagos que geram a imagem do e-mail em dezenas de aplicativos de uma vez, úteis para quem envia com frequência.

Clique em todos os links. O e-mail responsivo que leva a uma página que não se adapta ao celular perde o cliente um passo depois. A landing page precisa abrir rápido e ter formulário curto, com campos fáceis de preencher no teclado do telefone.

Principais métricas

Depois do envio, quatro números dizem se o e-mail funcionou.

Entrega

É a parcela dos envios aceita pelos servidores de destino. Endereços inexistentes voltam como erro e devem ser removidos da lista, porque erro repetido derruba a reputação do remetente. Desde 2024, Gmail e Yahoo exigem de quem envia em volume a autenticação do domínio com SPF, DKIM e DMARC, o descadastro em um clique e baixo índice de denúncias de spam. Lista comprada falha nos três pontos.

Abertura

Trate com desconfiança. Desde 2021, o recurso de proteção de privacidade do aplicativo Mail da Apple carrega as imagens dos e-mails automaticamente, e a plataforma registra como aberta uma mensagem que talvez ninguém tenha lido. A taxa de abertura ficou inflada. Ela ainda serve para comparar dois assuntos em um teste A/B enviado à mesma base, e para pouco além disso.

Cliques

É o sinal mais confiável de interesse. Olhe a taxa de cliques sobre os e-mails entregues e separe o resultado por dispositivo, se a plataforma permitir. Clique muito menor no celular que no computador indica problema de layout: botão pequeno, link difícil de tocar, texto cortado.

Conversão

Quantas pessoas clicaram no CTA e concluíram a ação na página, seja compra, agendamento ou cadastro. Para enxergar isso no GA4, marque os links do e-mail com parâmetros UTM. Acompanhe junto os descadastros e as denúncias de spam de cada envio, que mostram se a frequência e o conteúdo estão passando do ponto.

Um bom primeiro passo é abrir no seu celular, em modo escuro, a última campanha que a empresa enviou. O que incomodar você nesses dez segundos está incomodando a base inteira.