Mobile-first real: estratégias de grid, tipografia e micro-interações fluidas para telas pequenas

Abra o analytics do seu site: é muito provável que mais da metade das visitas venha do celular. Mesmo assim, a maioria dos layouts ainda nasce no monitor grande e depois é "adaptada". O resultado são botões pequenos, textos apertados e menus escondidos onde ninguém acha.

Comece pela tela pequena

Desenhar primeiro para 360–400px de largura obriga a decidir o que importa. No desktop, o espaço extra vira respiro e colunas — nunca o contrário. Em CSS, isso significa estilos base para o celular e min-width para telas maiores.

Grid e espaçamento com escala

Uma escala fixa de espaçamento — múltiplos de 4px (8, 12, 16, 24, 32…) — mantém o ritmo visual em qualquer tela. No celular, margens laterais de 20px e espaço vertical generoso entre seções evitam a sensação de amontoado.

Tipografia que se lê sem zoom

• Corpo de texto com pelo menos 16px — abaixo disso o iPhone dá zoom ao focar campos.
• Títulos que escalam com a tela usando clamp(), sem quebrar palavras.
• Linhas de 45 a 75 caracteres para leitura confortável.

Toque, não clique

Áreas de toque de no mínimo 44×44px, espaçadas para que o polegar não acerte o vizinho. Ações principais ao alcance do polegar, perto da base da tela. E nada que dependa de hover — no celular ele não existe.

Micro-interações pensadas para o dedo

O feedback de toque precisa ser imediato: o botão reage ao pressionar, não ao soltar. Durações curtas, entre 200 e 300ms, como explicamos em Micro-interações que convertem: como transições de 200ms a 300ms impactam a retenção do usuário. E respeite safe areas do iPhone, assunto de Safe areas do iPhone na web: notch, barra inferior e viewport-fit.

Os detalhes que ninguém testa

• Teclado certo para cada campo (numérico, e-mail, telefone) — Formulários no celular: teclado certo, autofill e máscaras.
• Tabelas que não estouram a tela — Tabelas responsivas: como mostrar dados no celular sem rolagem infinita.
• Layout que não pula enquanto carrega — CLS: por que o seu site "pula" enquanto carrega e como parar com isso.

Todos os projetos da We Codex nascem mobile-first. Conheça nossa frente de desenvolvimento de sites ou peça uma análise do seu.