E-mail adaptável: por que «adaptado ao celular» e «celular primeiro» não são a mesma coisa
Oito parâmetros, uma media query e a armadilha do tamanho de fonte no iPhone
Mailvex · 9 agosto 2026 · 5 min de leitura
Design adaptável e celular primeiro não são sinônimos. No primeiro, desenha-se o layout para desktop e cuida-se para que não quebre no celular. No segundo, projeta-se primeiro o celular e o desktop sai como ampliação. A diferença aparece no resultado: os oito parâmetros abaixo são definidos de forma distinta conforme o caminho escolhido.
Duas estratégias diferentes
O motivo da escolha é simples: a maioria dos e-mails é aberta no celular, e o cliente que lidera as aberturas é móvel.
Daí algo que muitos deixam passar: se o layout é criado a 600 pixels em tela grande e depois comprimido, as decisões no celular não são do designer, e sim do motor do cliente de e-mail. A abordagem celular primeiro inverte a ordem: primeiro se decide como fica na tela estreita e depois se acrescenta a versão larga.
Na prática isso muda três coisas: a hierarquia, o tamanho dos elementos e a quantidade de texto. Um celular não tem coluna lateral, então o principal vai no topo. Os botões são dimensionados para o polegar desde o início em vez de encolhidos do desktop. E o texto encurta: quinhentas palavras no celular pesam.
Oito parâmetros que decidem tudo
Esses valores estão consolidados pela prática e quase não mudam entre projetos. Funcionam bem como checklist.
| Parâmetro | Valor | Por que exatamente assim |
|---|---|---|
| Largura do e-mail | 600 pixels | cabe no painel de visualização e no telefone |
| Colunas em tela estreita | uma | duas colunas no celular obrigam a ampliar |
| Tamanho do texto | a partir de 16 pixels | abaixo de 13 o sistema amplia à força |
| Altura do botão | 44 no mínimo, 48 melhor | o mínimo segundo Apple e Google |
| Margem da borda | a partir de 16 pixels | texto colado na borda não se lê |
| Contraste do texto | a partir de 4,5 para 1 | limite de legibilidade sob luz forte |
| Botão principal | nos primeiros 300 pixels | antes da primeira rolagem |
| Comprimento do assunto | 35–45 caracteres | além disso é cortado no telefone |
Sobre os botões em particular. A Apple recomenda no mínimo 44 por 44 pixels; o Google fala em 48. Convém pegar o número maior: folga nunca atrapalha, enquanto um botão pequeno no celular escapa do polegar e irrita.
A armadilha do tamanho de fonte
Aqui existe uma armadilha sobre a qual quase ninguém escreve. O problema não é que o texto pequeno seja difícil de ver.
O tamanho mínimo de fonte que um iPhone exibe é de 13 pixels. Tudo abaixo disso é ampliado à força até esse valor. O problema é que apenas a fonte aumenta enquanto o contêiner continua igual: o texto deixa de caber, as linhas quebram em lugares errados e o layout se desloca.
Ou seja, uma legenda de 10 pixels quebra o layout não por ser invisível, mas porque o iPhone a aumenta sem avisar. Conclusão prática: não desça abaixo de 14 pixels nem em elementos secundários.
O código: empilhar colunas
O empilhamento de colunas é feito com uma media query. Ela dá largura total aos elementos em tela estreita e ao mesmo tempo aumenta o tamanho da fonte e a altura do botão.
Repare na classe de ocultar. Em tela estreita vale remover elementos que não cabem: uma navegação longa no cabeçalho, imagens decorativas, links secundários do rodapé. Remover, não encolher.
O problema do Outlook
As media queries não funcionam em todo lugar, e o grande ausente é o Outlook clássico para Windows. Ele usa o motor de um editor de texto e ignora media queries, então o e-mail fica exatamente como foi montado.
Há duas soluções. A primeira, montar o e-mail em coluna única desde o início: não há o que empilhar e o assunto se encerra. A segunda, a abordagem híbrida, em que a largura das colunas é definida com porcentagens e largura máxima ao mesmo tempo, e o alinhamento vem de atributos de tabela. Assim as colunas se reorganizam mesmo onde as media queries não rodam.
O método híbrido é mais robusto, porém mais difícil de montar. Para a maioria das campanhas basta uma coluna única mais algumas media queries.
O que conferir no celular
- abra o e-mail no celular e não numa janela de navegador estreitada: não é a mesma coisa
- verifique se o botão principal cabe na primeira tela sem rolagem
- toque no botão com o polegar e não com o mouse: você acerta de primeira?
- leia o texto na rua sob luz forte: é assim que se testa o contraste
- desative o carregamento de imagens e confirme que o sentido se mantém
- confira o e-mail no modo escuro, ativado em boa parte dos usuários
O ponto da luz forte não é piada. Um texto cinza-claro que se lê perfeitamente num monitor sob teto some na rua. O limite de contraste de 4,5 para 1 existe exatamente para isso.
Como funciona no Mailvex
No Mailvex os valores móveis são definidos separadamente dos de desktop: cada bloco pode ter seus próprios espaçamentos, tamanho de fonte e alinhamento para tela estreita. O empilhamento de colunas acontece sozinho e as media queries são adicionadas na compilação.
A pré-visualização alterna entre celular e desktop dentro do editor, e o envio de teste para o seu endereço é um clique. Isso cobre a maior parte das verificações antes do envio.
Monte um e-mail e veja na pré-visualização móvel.
Ver modelosPerguntas frequentes
Qual é a largura correta de um e-mail?
600 pixels é o padrão seguro. Cabe no painel de visualização dos clientes de e-mail e reduz bem no celular. Acima de 640 pixels começa a aparecer rolagem horizontal em alguns clientes.
É obrigatório usar media queries?
Não, se o e-mail já for de coluna única: não há o que empilhar. As media queries servem para layouts de várias colunas, e mesmo assim não rodam em todo lugar: o Outlook clássico as ignora.
Por que não posso usar texto pequeno nas legendas?
Um iPhone amplia à força qualquer fonte menor que 13 pixels até esse tamanho. O contêiner não muda, então o texto deixa de caber e o layout quebra. Mantenha no mínimo 14 pixels mesmo em elementos secundários.