Copy mobile-first: escrita para telas pequenas

Por que celular é o padrão, não a exceção

Dados consistentes de organismos como StatCounter, Google e plataformas brasileiras como RD Station mostram que entre 60% e 70% do tráfego web no Brasil acontece em celular. Em email marketing, a proporção é parecida — pesquisas da Litmus mostram que mais de 60% das aberturas de email ocorrem em dispositivos móveis na maioria das categorias.

Em determinados segmentos, o número é ainda mais alto. Comércio eletrônico para classes C e D no Brasil tem proporção de tráfego mobile superior a 80%. Redes sociais (Instagram, TikTok) são quase totalmente consumidas em celular. Apenas alguns segmentos B2B com decisão técnica em desktop (software corporativo, plataformas internas) mantêm proporção significativa de leitura em tela grande.

Apesar disso, muitas equipes ainda produzem materiais no desktop, em telas de 24 a 27 polegadas com fontes confortáveis, e descobrem tarde que a página fica densa, o cabeçalho fica abaixo da dobra do celular, o botão de chamada para ação aparece em local inacessível pelo polegar. Mobile-first inverte a ordem: produza pensando primeiro no celular, depois adapte para tela maior.

O Google reforça essa direção. Desde 2019, a indexação principal do Google é feita a partir da versão móvel da página, não da desktop. Páginas que não funcionam bem em celular perdem posição em busca orgânica — independentemente da qualidade do conteúdo desktop.

Os cinco princípios da redação para celular

Cinco princípios práticos cobrem 90% das decisões de redação mobile-first.

Princípio 1: frase curta. Em celular comum, uma linha cabe cerca de 30 a 40 caracteres antes de quebrar. Frases longas viram blocos densos que o leitor pula. Limite frases a 12-18 palavras em média, com algumas mais curtas para variar o ritmo. Parágrafos de duas a três linhas no celular, não na sua tela de trabalho.

Princípio 2: hierarquia explícita. Em celular, o leitor escaneia mais que lê. Cabeçalhos (H1, H2, H3), subcabeçalhos, listas, negritos em palavras-chave, espaçamento generoso entre blocos — tudo isso ajuda o leitor a navegar com o polegar. Texto corrido por trinta linhas sem hierarquia é abandonado em segundos.

Princípio 3: leitura escaneável (divulgação progressiva). Ofereça primeiro a informação essencial; deixe o detalhe para quem clica ou rola. Em página de destino: cabeçalho com o benefício principal, três blocos curtos com benefícios secundários, depois detalhes técnicos para quem se interessa. Em email: linha de assunto resume, texto de prévia estende, primeira frase entrega, corpo aprofunda. O leitor decide a cada bloco se quer continuar.

Princípio 4: chamada para ação na zona do polegar. Em celular, a maioria dos usuários segura o aparelho com uma mão e toca com o polegar da mesma mão. A área alcançável (chamada de "thumb zone") fica no terço inferior da tela, especialmente no canto inferior direito para destros e inferior esquerdo para canhotos. Botões posicionados no topo da tela, longe da posição natural do polegar, geram mais erros de toque e abandono. Em página longa, repita a chamada várias vezes para que sempre haja uma próxima do polegar.

Princípio 5: formulário enxuto. Cada campo extra reduz a taxa de conversão em alguns pontos percentuais — efeito amplificado em celular onde digitar é mais difícil. Limite-se ao mínimo necessário para o estágio. Em primeiro contato, nome e email costumam ser suficientes; telefone se a oferta exige contato. Qualificação aprofundada pode vir em segunda etapa, depois do primeiro "sim".

Mobile não é desktop encolhido

O erro mais comum é tratar o celular como versão menor do desktop. Não é. São experiências de leitura diferentes, com restrições e oportunidades diferentes.

Tamanho da tela é a restrição mais óbvia, mas não a mais importante. Tela de 5,5 polegadas mostra cerca de um quinto do que uma tela de 24 polegadas mostra. Conteúdo precisa ser hierarquizado para caber no que aparece primeiro.

Contexto de uso muda tudo. Desktop costuma ser usado em sessão dedicada, com atenção sustentada. Celular costuma ser usado em fragmentos de tempo — fila, transporte, pausa — com atenção dividida e interrupções frequentes. Materiais para celular precisam funcionar em sessões curtas, com pontos de retomada claros.

Toque é diferente de cursor. Cursor de mouse acerta um pixel; dedo no celular acerta uma área de cerca de 44 pixels. Botões pequenos demais geram erros de toque. Links próximos demais geram cliques no link errado. A regra de acessibilidade recomenda área mínima de toque de 44 por 44 pixels, com espaçamento entre elementos clicáveis.

Conexão é mais lenta e instável. Mesmo em redes 4G e 5G, conexões em movimento perdem velocidade, têm latência maior e podem cair. Páginas pesadas (imagens não otimizadas, scripts excessivos, vídeo em alta resolução autoplay) demoram a carregar. Páginas que demoram mais de 3 segundos perdem mais de metade dos visitantes em celular.

Teclado virtual atrapalha. Quando o usuário toca em um campo de formulário, o teclado virtual cobre metade da tela. Se a chamada para ação e o feedback de erro ficam abaixo do teclado, o usuário não os vê. Posicione campos críticos e botões de confirmação considerando o espaço com teclado aberto.

Redação para email em celular: as restrições somam

Email em celular combina todas as restrições: tela pequena, contexto de uso fragmentado, conexão variável. Os princípios gerais se aplicam, mas há especificidades.

Linha de assunto curta. Em celular, a caixa de entrada mostra de 35 a 50 caracteres do assunto. Acima disso, a frase é cortada. Frases de 4 a 7 palavras (cerca de 30-45 caracteres) cabem confortavelmente. Para promoções, números concretos vencem adjetivos.

Texto de prévia importa mais. O texto de prévia aparece à direita ou abaixo do assunto na caixa de entrada do celular. Para muitos usuários, é o segundo elemento que decide a abertura. Use o campo dedicado da plataforma — evite deixar a primeira frase do corpo virar prévia automaticamente.

Nome do remetente conta. Em celular, o remetente costuma aparecer antes do assunto. "Maria da empresa X" personaliza mais que "Empresa X". Para serviços, vale testar versão pessoa versus versão marca.

Cabeçalho do email visível em uma rolagem. A primeira tela de leitura no celular mostra logo, saudação e primeira frase. Coloque o essencial nesse espaço — promessa do email, ação que se espera do leitor. Logo no centro com 200 pixels de altura empurra todo o conteúdo para baixo.

Botão de chamada para ação grande e centralizado. No mínimo 44 pixels de altura, com texto visível e específico, posicionado no fluxo natural do polegar (centro ou direita da tela). Repita o botão no fim do email para quem rolou tudo.

Imagens otimizadas em peso. Não em pixels apenas, mas em quilobytes. Imagens pesadas em celular demoram a carregar em rede móvel — quando carregam, o leitor já pulou. Comprima imagens antes de subir (TinyPNG, ImageOptim) e prefira formatos eficientes (WebP quando suportado).

Redação para página de destino em celular

Página de destino no celular tem dobra muito mais alta — o que aparece sem rolagem é apenas o cabeçalho. Pequenos erros de hierarquia que passam no desktop comprometem a página inteira no celular.

Cabeçalho enxuto. Logo pequeno, menu mínimo ou colapsado, título principal (H1) com 4 a 8 palavras, subtítulo de uma linha, botão de chamada para ação. Tudo cabendo em uma tela vertical de celular comum.

Imagem do herói leve. Imagem ou vídeo de fundo deve carregar rápido e não competir com o título. Vídeo em autoplay com som é antipadrão de mobile — bloqueado por padrão em muitos navegadores móveis.

Hierarquia visual reforçada. Em desktop, espaços em branco e duas colunas separam blocos. Em celular tudo vira coluna única — só hierarquia tipográfica (tamanho de fonte, peso, espaçamento) separa.

Formulário em etapas para cadastros longos. Formulário de qualificação com 8 campos em celular é muralha. Divida em três etapas de duas a três perguntas cada, com barra de progresso. Cada etapa parece manejável.

Botão de chamada para ação flutuante (sticky). Em páginas longas, considere botão fixo no rodapé que acompanha a rolagem. Garante que o usuário sempre tenha o caminho de conversão acessível pelo polegar, sem precisar voltar ao topo.

Como testar em celular sem ter todos os aparelhos

Testar em celular real é o padrão ouro, mas nem toda equipe tem dezenas de aparelhos. Existem três níveis de teste, do mais barato ao mais robusto.

Nível 1: pré-visualização da plataforma. Toda plataforma moderna de email e construção de página de destino tem pré-visualização de mobile embutida. Útil para checagem rápida de layout, mas tem limites — fontes, renderização e comportamento podem diferir do real.

Nível 2: emulador de navegador. Chrome DevTools (gratuito) simula vários modelos de celular. Permite checar tamanhos, hierarquia, comportamento de toque. Bom para iteração rápida durante desenvolvimento. Limite: não testa em sistema operacional real, não captura nuances de aplicativo nativo (Gmail, Apple Mail, Instagram).

Nível 3: dispositivo real ou serviço de teste. Pelo menos um celular Android e um iOS reais para teste final. Alternativamente, serviços como BrowserStack ou LambdaTest oferecem acesso remoto a centenas de modelos por mensalidade acessível. Indispensável para campanhas de alto investimento.

Regra prática mínima: nenhuma campanha de alto orçamento deve ser disparada sem ter sido vista em pelo menos um celular real. Para o resto, pré-visualização e emulador resolvem.

Velocidade de carregamento: a redação invisível

Velocidade não é tema de redação — mas afeta diretamente o desempenho da redação. Página que demora 5 segundos para carregar nunca terá chance de mostrar o melhor cabeçalho do mundo.

O Google publica métricas oficiais (Core Web Vitals) que medem velocidade percebida em celular. Os três indicadores principais são LCP (tempo para o maior elemento aparecer), INP (latência da interação) e CLS (estabilidade do layout durante o carregamento). Páginas com pontuação ruim perdem posição em busca orgânica e perdem visitantes na primeira abertura.

Otimizações práticas que afetam mais a velocidade percebida: compressão de imagens (TinyPNG, ImageOptim), uso de formato eficiente (WebP, AVIF), eliminação de scripts pesados não essenciais, carregamento sob demanda (lazy loading) para imagens abaixo da dobra, escolha de fontes leves (no máximo dois pesos de fonte web).

Ferramentas gratuitas que diagnosticam: PageSpeed Insights (Google) e GTmetrix. Rode o teste em modo celular, com conexão simulada de 4G. Métrica-alvo: LCP abaixo de 2,5 segundos, INP abaixo de 200 milissegundos.

Erros que minam a experiência em celular

Copiar layout de desktop e "diminuir". Resultado: blocos densos, hierarquia perdida, texto ilegível. Refaça pensando primeiro no celular.

Botão pequeno demais. Área de toque menor que 44 pixels gera erros. Botões finos com texto longo também — o usuário toca em outro elemento próximo sem querer.

Cabeçalho fixo grande demais. Logo gigante, menu, banner de cookies — ocupam metade da tela visível e empurram o conteúdo essencial para baixo da dobra. Reduza ou colapse cabeçalho fixo no celular.

Chamada para ação no topo da tela. Longe da zona alcançável pelo polegar. Use chamada inferior em páginas longas, ou repita a chamada várias vezes ao longo da página.

Parágrafos longos. Cinco a oito linhas de texto corrido no celular formam muro de palavras. Quebre em parágrafos de duas a três linhas, com hierarquia (cabeçalhos, listas, negritos).

Janela emergente (pop-up) intrusiva. Janelas que cobrem a tela do celular com botão de fechar minúsculo são penalizadas pelo Google e abandonadas pelos usuários. Use janelas discretas, com botão de fechar grande e fácil.

Vídeo com autoplay e som. Bloqueado por muitos navegadores móveis e irritante quando passa. Use vídeo sob clique ou autoplay sem som com legenda.

Formulário longo sem etapas. Dez campos em fileira única é muralha. Divida em etapas curtas com barra de progresso.

Fonte pequena demais. Fonte abaixo de 16 pixels no corpo do texto força zoom — perda de experiência e de conversão. Use mínimo 16 pixels no corpo, 18-20 pixels em parágrafos importantes.