Por que seu site precisa ser mobile-first

Abra o seu site agora, no celular. Não no computador — no celular, segurando com uma mão só, como a maioria absoluta dos seus clientes faz. Os botões são fáceis de tocar com o dedo? O texto é legível sem precisar ampliar com os dedos? A página carregou rápido? Se você hesitou em qualquer uma dessas respostas, este post é para você.

Mobile-first não é um detalhe técnico para o desenvolvedor resolver. É a ordem em que o seu site deveria ter sido pensado desde o início — e é o que decide a primeira impressão da maior parte de quem te visita.

O acesso é majoritariamente pelo celular

Para a maior parte dos negócios locais, de varejo e de serviço, a maioria das visitas ao site chega pelo celular. As pessoas pesquisam no transporte, na fila do banco, no intervalo do trabalho, no sofá à noite. O computador deixou de ser o lugar padrão de navegar — virou exceção para muita coisa.

Mesmo com esse cenário, ainda é muito comum o site ser projetado primeiro para a tela grande, bonita, do computador, e só depois "adaptado" às pressas para o celular. O resultado dessa ordem invertida é exatamente o que você talvez tenha sentido no teste do começo: a versão mobile fica espremida, secundária, com elementos amontoados, como se fosse um ajuste de última hora — porque foi.

O que "mobile-first" muda na ordem

Mobile-first inverte a sequência do projeto. Em vez de desenhar para o computador e depois encolher tudo, você desenha primeiro para a tela pequena — a mais restrita, a mais difícil — e só depois expande para a grande, onde sobra espaço.

Isso parece só uma questão de ordem, mas muda decisões de fundo. Começar pelo celular obriga a equipe a priorizar de verdade: o que é essencial mostrar primeiro, qual é a ação principal da página, o que pode esperar mais para baixo, o que nem precisa existir. Um site que nasce assim costuma ser mais claro e mais objetivo até no computador, porque foi forçado a se concentrar no que importa. A restrição da tela pequena, no fim, melhora o todo.

O que um bom site mobile resolve

Na prática, pensar mobile-first desde o início cuida de um conjunto de coisas que o seu cliente sente no corpo enquanto navega:

• Toque confortável: botões e links com tamanho de dedo, com espaço entre eles, não com tamanho de cursor de mouse.
• Leitura sem zoom: texto com tamanho e contraste pensados para a tela pequena e para luz de ambiente variável.
• Velocidade: conexão de celular oscila — 4G, Wi-Fi fraco, sinal ruim —, então o peso da página importa muito. E site lento custa venda de forma direta.
• Formulários curtos: preencher campos no celular é trabalhoso; quanto menos campos e menos digitação, maior a chance de a pessoa terminar.
• Navegação simples: menus que funcionam com o polegar, sem precisar de precisão de mira.

Mobile-first e Google andam juntos

Vale saber de um detalhe que reforça tudo isso: o Google avalia e indexa os sites principalmente pela versão mobile deles. Ou seja, uma experiência ruim no celular não atrapalha só o visitante que está ali agora — ela atrapalha o quanto o seu site aparece nas buscas para os próximos visitantes.

É um efeito duplo, e os dois lados jogam contra quem ignora o mobile: a pessoa que chega tem uma experiência ruim, e menos pessoas chegam. Tratar a versão mobile como adaptação de última hora custa visita de duas formas ao mesmo tempo.

Não dá para "consertar depois" barato

Há uma tentação comum: lançar o site pensado no desktop e "ajustar o mobile depois". Na prática, esse depois costuma ser caro e insatisfatório, porque mobile-first não é uma camada de estilo que se aplica no fim — é uma decisão de estrutura, de prioridade, de hierarquia da informação.

Refazer essa estrutura depois de pronto dá quase o trabalho de um site novo. Sai muito mais barato — e melhor — começar na ordem certa.

Por onde seguir

Se o teste do começo deste post revelou problemas, eles estão custando visitas e, muito provavelmente, vendas — de forma silenciosa, sem aparecer em lugar nenhum. A boa notícia é que isso é resultado de projeto, não de azar: dá para corrigir com a abordagem certa.

A Expresso faz criação de sites com mobile-first como ponto de partida, e não como remendo final. Quem entra pelo celular — ou seja, quase todo mundo — encontra um site que foi feito pensando nele desde a primeira tela.