Existe uma diferença entre um site que funciona no celular e um site que foi feito para o celular. Ela não aparece no print da proposta, mas aparece no relatório de conversão.

Site responsivo é o resultado: o layout se adapta a qualquer tela. Mobile-first é o caminho: o projeto começa pela tela pequena e depois cresce para o desktop.

A maioria dos projetos faz o contrário. Desenha para a tela grande e depois espreme. E é aí que o site fica com botão pequeno demais, menu que não fecha, formulário que corta campo e imagem que demora a carregar.

Este texto explica por que a ordem importa, o que muda em SEO e conversão, e como avaliar se o seu site atual foi feito do jeito certo.

A internet brasileira é móvel

Não é tendência, é o cenário consolidado. Segundo dados do IBGE, mais de 80% da população brasileira acessa a internet pelo smartphone. O tempo médio de navegação em dispositivos móveis no país passa de 3 horas e 39 minutos por dia, segundo o Panorama Mobile Time/Opinion Box.

No mundo, o Statista aponta que o tráfego móvel já responde por cerca de 60% de todo o tráfego da web.

Na prática, para a maior parte das empresas brasileiras, o celular não é o segundo dispositivo. É o principal, e muitas vezes o único.

Responsivo e mobile-first não são a mesma coisa

Os termos aparecem juntos, mas descrevem coisas diferentes.

Site responsivo é a característica final: o layout se reorganiza conforme o tamanho da tela. É o que o cliente vê e aprova.

Mobile-first é a metodologia: o designer e o desenvolvedor começam pela versão móvel, considerando as restrições de espaço e a navegação por toque. Só depois adaptam para o desktop, aproveitando o espaço extra.

Por que a ordem importa tanto? Porque espremer é mais difícil que expandir.

Quando o projeto nasce no desktop, o designer trabalha com espaço abundante: menu com oito itens, três colunas, banner com muito texto. Na hora de reduzir para o celular, alguma coisa precisa sair. E essa decisão é tomada às pressas, no fim do projeto, geralmente pelo desenvolvedor.

Quando o projeto nasce no celular, a escassez força a hierarquia desde o início. O que é essencial fica; o resto entra como complemento na versão maior. O resultado é um site mais enxuto nas duas versões.

Veja também: as etapas da criação de um site.

O que acontece quando o site não é responsivo

O visitante não volta. Segundo estudo do Google, 61% dos usuários dificilmente retornam a um site em que tiveram dificuldade de acessar pelo celular. E boa parte deles vai direto para o concorrente.

O Google rebaixa. O buscador concluiu a transição para a indexação mobile-first: hoje ele rastreia e avalia a versão móvel do site para decidir posição, mesmo para quem busca do computador. Se a sua versão mobile tem menos conteúdo ou carrega pior, é essa a versão que define o seu ranking.

A conversão cai. Pesquisa da Apptentive, no Mobile Experience and Engagement Benchmark Report, aponta que sites com design responsivo têm 67% mais chance de gerar conversão que sites não responsivos.

Se o seu site demora a abrir, veja por que um site lento custa caro.

As cinco vantagens do mobile-first

Melhor experiência do usuário. Design e usabilidade pensados para telas menores e para gestos de toque. Isso reduz a taxa de rejeição e aumenta o tempo de permanência.

Melhor desempenho em SEO. Como o Google avalia a versão móvel, um site nascido mobile-first já parte com vantagem estrutural. Não precisa de correção depois.

Maior alcance. Com mais de 80% dos brasileiros acessando pelo celular, um site que funciona bem no mobile alcança um público que o site desktop-first simplesmente perde.

Menor tempo de carregamento. A metodologia incentiva um site mais leve, com menos recursos carregados de início. Menos peso significa página mais rápida, e página rápida significa mais conversão.

Maior taxa de conversão. A soma dos quatro pontos anteriores. Experiência melhor, site mais rápido e mais gente chegando resultam em mais formulários preenchidos.

Como implementar na prática

Designer e desenvolvedor precisam conversar desde o início. Layout mobile-first tem restrições técnicas que só aparecem na programação. Se o protótipo for aprovado sem essa validação, o desenvolvedor vai improvisar, e o resultado foge do que foi aprovado.

Teste em dispositivos reais, não só no redimensionador do navegador. Reduzir a janela do Chrome não reproduz toque, teclado virtual, conexão móvel nem tela com entalhe. Teste em pelo menos um Android e um iPhone.

A metodologia vale para o conteúdo, não só para o layout. Texto que funciona em três colunas no desktop vira um bloco interminável no celular. Parágrafo curto, subtítulo frequente e a informação principal antes da dobra.

Comece pelo caminho de conversão. Antes de desenhar qualquer página, percorra no celular o trajeto que você quer que o visitante faça, da entrada até o envio do formulário. Se você se irritar em algum ponto, ele já saiu ali.

Veja os elementos de um site que converte.

Como avaliar o seu site atual

Cinco testes rápidos, todos feitos no seu próprio celular, com dados móveis, não no Wi-Fi do escritório:

1. Cronometre o carregamento. Passou de três segundos, há problema.
2. Tente clicar nos botões com o polegar. Se você errar o alvo, seu cliente também erra.
3. Preencha o formulário até o fim. Campo cortado, teclado que cobre o botão, máscara que não funciona.
4. Leia um texto sem dar zoom. Se precisou aproximar, a fonte está pequena demais.
5. Abra o menu e navegue. Menu que não fecha ou que exige precisão milimétrica é sinal de layout espremido.

Se dois ou mais falharem, o problema não é ajuste, é metodologia. E metodologia não se corrige com remendo.

Um roteiro mais completo em os 12 sinais que seu visitante avalia em segundos.

O que isso significa para a sua empresa

Site responsivo deixou de ser diferencial há anos. O que separa os projetos hoje é em que ordem as decisões foram tomadas, e isso é escolha de quem constrói, não item de checklist.

Na Divera, todo layout nasce pelo celular e depois vira desktop. Não é preferência técnica: é o reflexo de onde o seu cliente está.

Se quer entender como isso se aplica ao seu projeto, conheça nossos serviços de criação de sites profissionais.