O que o design mobile-first realmente significa, como difere do design responsivo, e como projetar e construir um site mobile-first: ordem de conteúdo, alvos de toque, breakpoints CSS min-width, imagens e testes, mais notas para negócios com vários locais.
Perguntas frequentes
Qual é a diferença entre mobile-first e design responsivo?
Design responsivo significa um site que adapta seu layout a qualquer tamanho de tela. Mobile-first é a ordem em que você projeta e codifica: comece com a tela pequena e adicione layout para telas maiores. Um site mobile-first é responsivo, mas um site responsivo construído desktop-first frequentemente termina com uma versão mobile apertada e mal pensada.
Por que mobile-first importa para SEO?
O Google usa indexação mobile-first, o que significa que ele usa principalmente a versão mobile de uma página para indexação e ranking. Se conteúdo, cabeçalhos, dados estruturados ou links estão faltando no mobile, o Google pode não vê-los.
Quais breakpoints eu deveria usar para um site mobile-first?
Deixe o conteúdo decidir: alargue o navegador até o layout parecer esticado, depois adicione um breakpoint ali. Pontos de partida comuns são em torno de 640px, 768px, 1024px e 1280px, que muitos frameworks CSS usam, escritos como media queries min-width.
Quão grandes os botões deveriam ser no celular?
O WCAG 2.2 define um tamanho de alvo mínimo de 24 por 24 pixels CSS (nível AA) e recomenda 44 por 44 (nível AAA). As diretrizes da Apple usam 44 pontos e a orientação Material do Google usa 48dp. Mire cerca de 44 a 48 pixels para botões primários e links em menus.
Como franquias deveriam lidar com sites mobile-first?
Use um template compartilhado com uma página de localização por franquia, cada uma com clique para ligar, toque para obter rotas, horários e uma ação de reserva ou pedido específica da loja no topo. Visitantes mobile buscando 'perto de mim' querem agir imediatamente, então o localizador de loja e a ação principal precisam funcionar com um polegar.
Resposta curta: design web mobile-first significa que você projeta e constrói a versão para celular de uma página primeiro, depois adiciona layout para tablets e desktops conforme a tela fica mais larga. No código, seu CSS base é o layout mobile e você usa media queries min-width para melhorá-lo. Isso força você a decidir o que importa mais em toda página, e combina com como o Google indexa sites hoje.
Mobile-first vs responsivo: a diferença real
As pessoas usam esses termos de forma intercambiável, mas eles respondem perguntas diferentes.
Design responsivo
Design mobile-first
O que é
Um site cujo layout se adapta ao tamanho de tela
Um processo: comece pequeno, melhore para cima
Estilo CSS
Pode ser max-width (encolher desktop) ou min-width
min-width (crescer do mobile para cima)
Prioridade de conteúdo
Frequentemente decidida no desktop, depois espremida
Decidida na menor tela
Falha típica
Conteúdo escondido, alvos de toque minúsculos, páginas pesadas em celulares
Layout desktop parece esparso se não melhorado
A melhor prática é os dois: um site responsivo, construído mobile-first.
Passo 1: decida a ordem de conteúdo no celular
Em uma tela estreita tudo é uma coluna, então a ordem é todo o seu layout. Para cada página, escreva uma lista numerada de seções na ordem que um visitante no celular precisa delas.
Para uma página inicial de serviço local, poderia ser:
O que você faz e onde (uma linha)
Ação principal: ligar ou reservar
Prova: avaliação, avaliações ou clientes reconhecíveis
Serviços, como cartões curtos e tocáveis
Área de atendimento ou localizações
Prova secundária: fotos, antes e depois
Perguntas frequentes
Rodapé com horários, endereço e contato
Qualquer coisa que não conquista um lugar nesta lista provavelmente não pertence ao desktop também.
Passo 2: projete para polegares
Alvos de toque: faça botões e links de menu com pelo menos 44 a 48 pixels de altura, com espaço entre eles. O mínimo do WCAG 2.2 é 24 por 24 pixels CSS; isso é um piso, não uma meta.
Ação principal ao alcance: uma barra inferior fixa com "Ligar" e "Reservar" funciona bem para negócios locais. Mantenha-a curta para não cobrir conteúdo.
Navegação: um botão de menu que abre uma lista em tela cheia está bom. Mantenha a lista com cinco a sete itens e coloque a ação principal fora do menu.
Formulários: uma coluna, rótulos acima dos campos, e os tipos de entrada certos (tel, email, number) para que celulares mostrem o teclado correto. Use atributos autocomplete para que navegadores preencham nomes e endereços.
Texto: texto de corpo de 16px é um mínimo comum e impede que o Safari do iOS dê zoom em campos de formulário. Mantenha o comprimento da linha confortável e o contraste em pelo menos 4,5:1 para texto de corpo (WCAG AA).
Passo 3: construa mobile-first em código
Comece com a tag de viewport no head de toda página:
@media (min-width: 1024px) { .services { grid-template-columns: repeat(3, 1fr); } .site-nav { display: flex; } /* mostra nav completa, esconde botão de menu */ } ```
Algumas técnicas que facilitam isso:
Tipografia e espaçamento fluidos com clamp(), por exemplo font-size: clamp(1.75rem, 5vw, 3rem) para um título, para você precisar de menos breakpoints.
Flexbox e Grid com auto-fit: grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)) cria colunas só quando há espaço.
Container queries (suportadas nos principais navegadores atuais) permitem que um cartão mude de layout com base na largura do seu contêiner em vez da tela inteira, o que é útil para componentes reutilizáveis.
Frameworks utilitários como o Tailwind CSS são mobile-first por padrão: classes sem prefixo se aplicam a todos os tamanhos e prefixos como md: se aplicam a partir daquela largura para cima.
Escolha breakpoints onde seu conteúdo quebra, não para modelos específicos de celular.
Passo 4: torne-o rápido em uma conexão de celular real
Celulares têm processadores mais lentos e redes menos confiáveis que o laptop no qual você projeta. Os Core Web Vitals do Google medem isso: Largest Contentful Paint (carregamento), Interaction to Next Paint (responsividade) e Cumulative Layout Shift (estabilidade visual).
Imagens responsivas: use srcset e sizes para que celulares baixem arquivos menores, e formatos modernos como WebP ou AVIF.
Sempre defina width e height (ou aspect-ratio) em imagens e incorporações para evitar mudança de layout.
Carregue de forma preguiçosa imagens abaixo da dobra com loading="lazy", mas não a imagem de destaque principal.
Limite fontes a uma ou duas famílias e alguns pesos.
Corte scripts de terceiros: widgets de chat, rastreadores e incorporações são causas frequentes de interação lenta em celulares. Carregue-os tarde ou só onde necessário.
Passo 5: melhore para telas maiores
Assim que o layout do celular funcionar, alargue o navegador e adicione valor, não só largura:
Grades de serviço e produto com várias colunas
A barra de navegação completa em vez de um botão de menu
Texto e imagens lado a lado
Uma barra lateral fixa para artigos longos ou resumos de reserva
Estados de hover, mas nunca informação só de hover, já que telas de toque não conseguem dar hover
Passo 6: teste como um visitante
Modo de dispositivo das ferramentas de desenvolvedor do navegador para verificações rápidas em 360px, 390px e 414px de largura, mais tamanhos de tablet.
Pelo menos um Android real e um iPhone real, porque emuladores perdem peculiaridades de rolagem, teclados cobrindo campos e CPUs lentas.
Lighthouse no Chrome DevTools, e PageSpeed Insights, que também mostra dados de campo de usuários reais do Chrome quando um site tem tráfego suficiente.
Gire para paisagem e verifique que barras fixas não cobrem metade da tela.
Complete a tarefa principal (reservar, comprar, ligar) com um polegar em dados móveis.
Verifique o Search Console para problemas mobile depois do lançamento. Nosso guia do Google Search Console cobre onde procurar.
Mobile-first para franquias e negócios com vários locais
Sites de franquia e vários locais têm um problema mobile específico: a maioria dos visitantes chega de uma busca "perto de mim" em um celular e quer os detalhes de uma localização imediatamente.
Localizador de loja primeiro: "Usar minha localização" mais uma busca por CEP ou cidade, com resultados como cartões tocáveis.
Uma página por localização construída de um template compartilhado: endereço, horários, telefone, link de mapa, serviços e uma ação de reserva ou pedido local, com o botão de ligação no topo.
Detalhes locais que diferem: cada página precisa das próprias fotos, equipe ou avaliações quando possível, não só um nome de cidade trocado.
Marca consistente, controle local: franqueados deveriam conseguir atualizar horários e ofertas sem tocar no layout.
Dados estruturados: schema LocalBusiness em cada página de localização com o nome, endereço e telefone corretos.
Checklist mobile-first
[ ] Tag meta de viewport em toda página
[ ] Ordem de conteúdo escrita para uma única coluna
[ ] Ação principal visível sem rolar em um celular
[ ] Alvos de toque de cerca de 44 a 48px, com espaçamento
[ ] Texto de corpo de 16px+, contraste de 4,5:1
[ ] CSS base para mobile, queries min-width para telas maiores
[ ] Imagens responsivas com dimensões definidas
[ ] Mesmo conteúdo e dados estruturados no mobile e desktop
[ ] Testado em dispositivos iOS e Android reais
Construindo um sem começar do zero
Todo site que a We.Inc constrói é responsivo desde o início, e você pode pré-visualizar o layout do celular no editor, depois ajustá-lo visualmente ou no código. Navegue pelos modelos para ver como os layouts colapsam para uma coluna, ou descreva seu negócio e receba um primeiro rascunho para testar no seu próprio celular.