Por que o site do seu negócio precisa ser feito primeiro para o celular

Pense em como o link do seu site chega às pessoas: na bio do Instagram, numa mensagem de WhatsApp, num anúncio, numa busca feita no caminho. Tudo isso acontece no telefone. Quando o projeto começa pela tela do computador e depois "adapta" para o celular, o resultado costuma ser um site que funciona, mas que ninguém gosta de usar.

O que "primeiro para o celular" quer dizer

Quer dizer desenhar a versão da tela pequena antes de qualquer outra. Na tela pequena não cabe tudo, então é preciso decidir a ordem: o que a pessoa vê primeiro, o que vem depois, o que pode esperar. Essa ordem, decidida no celular, acaba melhorando também a versão de computador, porque obriga a escolher o que importa.

Leitura

Texto pequeno demais faz a pessoa dar zoom; linha longa demais faz perder a linha; contraste fraco some no sol. Um site feito para o celular usa tamanho de letra confortável sem zoom, linhas curtas e cores que continuam legíveis na rua. Parece detalhe, mas é a diferença entre ler e desistir.

Botões e toque

No celular ninguém tem a precisão do mouse. Botões precisam de área de toque generosa e de espaço entre si. O botão de contato, que é o objetivo do site, precisa estar ao alcance do polegar e continuar acessível enquanto a pessoa rola. E nada pode ficar por cima do conteúdo: um balão flutuante que cobre o texto ou o botão principal atrapalha mais do que ajuda.

Imagens e velocidade

A conexão do celular é pior e mais variável que a do escritório. Uma foto de 3 MB que abre bem no computador da loja pode levar vários segundos no 4G de quem está na rua. Fazer primeiro para o celular também significa servir imagens do tamanho da tela e carregar primeiro o que aparece primeiro. Explicamos isso no artigo sobre performance e no artigo sobre imagens desta série.

Como fica nos nossos projetos

Vale para os projetos publicados no portfólio. Na Lux Su, a sacola funciona no celular como uma mensagem de WhatsApp pronta: a cliente escolhe as peças e a conversa começa com o pedido montado. No site da BeHealth, as seções viram uma coluna no telefone e o botão de WhatsApp continua ao alcance. Nas demonstrações de agendamento e de landing page, a jornada inteira foi desenhada na tela pequena antes de qualquer outra.

Como conferir o seu site hoje

Abra o seu site no seu próprio celular, sem Wi-Fi, e responda a três perguntas. Eu entendo o que a empresa faz sem rolar a tela? Eu encontro o contato em um toque? Eu consigo ler sem dar zoom? Se alguma resposta for não, está aí o que precisa mudar primeiro.