Criação de site responsivo

Responsivo virou o mínimo, não o diferencial

Vale começar por onde muita agência prefere não começar. Responsividade foi um argumento de venda legítimo por volta de 2012, quando boa parte dos sites tinha layout de largura fixa e quebrava no celular. Hoje é o contrário: qualquer ferramenta séria, de construtor visual a código próprio, entrega adaptação de tela por padrão. Cobrar por isso como recurso extra é cobrar pelo que já vem incluso.

Isso não torna o assunto irrelevante, apenas desloca a pergunta. Deixou de ser "o site se adapta?" e virou "o site funciona bem para quem está no celular?". São coisas diferentes, e a segunda é muito mais difícil de acertar. Um site pode passar em qualquer teste automático de responsividade e ainda assim ser desagradável de usar com uma mão, no ônibus, com pouca bateria.

A diferença aparece nos detalhes que nenhum teste automático mede: o botão importante está ao alcance do polegar ou no topo da tela; o texto tem tamanho confortável ou obriga a aproximar o rosto; a tabela rola dentro dela mesma ou empurra a página inteira para o lado; o menu abre e deixa ver o conteúdo ou cobre tudo. Nada disso quebra o site. Tudo isso reduz a chance de a pessoa chegar até o contato.

Então a leitura honesta é esta: se um fornecedor apresenta responsividade como diferencial do projeto, vale desconfiar do resto da proposta. O que merece atenção é o que ele faz além disso.

• Adaptar a tela é padrão de qualquer ferramenta atual
• Funcionar bem no celular continua sendo difícil e raro
• Teste automático aprova sites desagradáveis de usar
• Responsividade vendida como diferencial é sinal de alerta

O Google indexa a versão de celular do seu site

Este é o ponto que mais muda decisão e o menos conhecido fora de quem trabalha com busca. O Google rastreia e avalia os sites usando predominantemente a versão que aparece no celular. Não é a versão de computador que define como o site é entendido e classificado, é a de tela pequena.

A consequência prática é direta e costuma surpreender. Se algum conteúdo existe no computador e some no celular, ele tende a valer menos ou nada para posicionamento, porque não é o que está sendo lido. Texto escondido para deixar a versão móvel mais limpa, bloco removido para encurtar a página, imagem com descrição apenas na versão maior: em todos esses casos, o que foi cortado deixa de contar.

O mesmo vale para dados estruturados, títulos e links internos. Se a navegação do celular expõe menos links do que a do computador, a distribuição de autoridade entre as páginas muda, e páginas internas podem ficar mais difíceis de alcançar do que se imaginava ao olhar o site na tela grande.

Isso reposiciona a responsividade de assunto de design para assunto de busca. Não é sobre ficar bonito em telas diferentes, é sobre a versão móvel ser a versão oficial do seu site aos olhos de quem manda tráfego para ele.

• A versão de celular é a que define como o site é entendido na busca
• Conteúdo que some no celular tende a não contar para posicionamento
• Navegação móvel com menos links muda a força das páginas internas
• Responsividade é decisão de busca, não só de estética

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

Os dois termos são usados como sinônimos e descrevem processos opostos. A diferença não é vocabulário, é a ordem em que as decisões são tomadas, e ela aparece no resultado.

No caminho responsivo tradicional, o layout nasce pensado para a tela grande e depois é adaptado para caber na pequena. Como a tela do computador comporta muita coisa, o projeto tende a acumular elementos, e a adaptação vira um exercício de encolher, empilhar e esconder. O que sobra no celular é uma versão comprimida de algo que foi desenhado para outro contexto.

No caminho mobile first, a tela pequena é o ponto de partida. Como ali cabe pouco, cada elemento precisa justificar sua presença, e a hierarquia fica decidida logo no começo: o que é essencial, o que é apoio, o que é dispensável. Quando esse layout cresce para a tela grande, ele ganha espaço e respiro, em vez de perder informação.

Trabalhamos assim, e o motivo não é preferência estética. É que a restrição da tela pequena obriga a resolver a pergunta difícil primeiro, que é o que realmente importa naquela página. Projeto que começa pelo desktop costuma adiar essa decisão e nunca tomá-la.

O que quebra no celular e ninguém percebe no computador

Existe um conjunto de problemas que praticamente não aparece durante a produção, porque quem produz está olhando uma tela grande, com mouse, conexão boa e aparelho novo. Todos eles são frequentes e nenhum gera erro.

O mais comum é o conteúdo largo demais empurrando a página inteira para o lado. Tabela, bloco de código, imagem sem limite de largura e palavra muito longa produzem esse efeito, e o sintoma é a página inteira deslizando na horizontal. A correção é fazer o elemento largo rolar dentro do próprio espaço, e não a página junto com ele.

Depois vêm os elementos fixos ocupando a tela. Cabeçalho fixo, barra de aviso de cookies, botão flutuante e chat somam altura, e numa tela pequena isso pode consumir boa parte do que a pessoa consegue ver. Cada um deles parece discreto no computador e desproporcional no celular.

Há também o que depende de passar o mouse. Menu que abre ao aproximar o cursor, informação que aparece em balão ao pairar sobre um ícone, efeito que revela texto: nada disso existe no toque. Quando uma informação só está acessível por esse caminho, ela simplesmente não existe para quem está no celular.

E há o formulário, que costuma ser o pior lugar. Campo pequeno demais para acertar com o dedo, teclado errado abrindo para telefone ou e-mail, seleção de data difícil de operar, botão de enviar que fica escondido atrás do teclado. Cada um desses detalhes derruba uma parte de quem já estava disposto a entrar em contato.

O polegar decide o layout

Quem usa o celular normalmente está com uma mão só, segurando o aparelho pela parte de baixo. Isso cria uma geografia na tela que não existe no computador: a parte inferior e central é fácil de alcançar, o topo exige reposicionar a mão, e o canto superior oposto ao polegar é o ponto mais desconfortável.

A consequência para o projeto é que a posição da ação principal importa muito mais no celular do que na tela grande. Botão de contato colado no topo, longe do alcance natural, cria um atrito pequeno e constante. O mesmo botão em posição confortável, acompanhando a leitura, é acionado sem esforço. Não é conforto pelo conforto: é a diferença entre a pessoa agir no impulso ou adiar.

O tamanho do alvo é o outro lado disso. O dedo é impreciso comparado ao cursor, e alvos pequenos ou colados produzem toque errado. Link de rodapé em lista apertada, ícone de rede social minúsculo e dois botões lado a lado sem espaçamento são as ocorrências mais comuns, e todas geram a mesma frustração: a pessoa acaba onde não queria e precisa voltar.

Vale ainda considerar que boa parte do uso acontece em situação ruim. De pé, em movimento, com uma mão ocupada, sob luz forte, com a tela suja. Um layout que exige precisão ou atenção plena funciona no teste do escritório e falha na rua.

• A ação principal fica ao alcance natural, não colada no topo
• Alvos de toque com tamanho e espaçamento confortáveis
• Nada de informação acessível só ao passar o mouse
• Testar imaginando alguém de pé, com uma mão, sob sol forte

Ler numa tela pequena é outra experiência

A leitura no celular tem restrições que a tela grande esconde, e ignorá-las produz páginas tecnicamente corretas que ninguém termina de ler.

A primeira é o comprimento da linha. Na tela grande, texto que ocupa toda a largura fica cansativo porque o olho perde a referência ao pular de linha, e por isso se limita a largura do bloco de texto. No celular acontece o inverso: a linha já é curta, e o risco é o texto ficar picotado, com poucas palavras por linha, o que também atrapalha o ritmo. Tamanho de fonte e margens precisam ser ajustados para a tela, e não apenas herdados.

A segunda é o tamanho do texto. Fonte pequena, que parece elegante no computador, obriga a aproximar o rosto no celular. Como muita gente acessa com a tela em brilho reduzido para poupar bateria, ou sob luz do sol, o problema piora fora do ambiente controlado do escritório. Contraste suficiente deixa de ser preferência de design e vira condição de leitura.

A terceira é o comprimento da página. No celular a rolagem é barata e natural, então página longa não é problema em si. O que cansa é página longa sem marcação: sem títulos que permitam saltar, sem parágrafos curtos, sem respiro visual. Quem lê no celular escaneia mais e lê linearmente menos, e a estrutura precisa acompanhar isso.

O tablet é o tamanho que todo mundo esquece

Entre o celular e o computador existe uma faixa de tamanhos que raramente é conferida, e é onde aparecem os defeitos mais estranhos.

O problema típico é o layout cair no pior dos dois mundos: largo demais para a versão empilhada de celular, que fica esticada e com linhas longas demais, e estreito demais para a versão de computador, que fica apertada e com elementos comprimidos. Como quase ninguém abre o site nessa largura durante a produção, ela passa.

A situação mais comum de tablet, aliás, não é a que se imagina. Além do aparelho em si, essa faixa de largura aparece quando alguém usa duas janelas lado a lado no computador, ou vira o celular na horizontal para ver um vídeo ou uma tabela. Nesse último caso, a mudança de orientação é justamente o momento em que a pessoa estava tentando enxergar algo melhor, e é o pior momento possível para o layout falhar.

A verificação é simples e leva pouco tempo: abrir o site em larguras intermediárias e conferir se a transição entre os formatos acontece em um ponto que faz sentido para o conteúdo, e não num número escolhido por hábito.

Esconder conteúdo no celular sai caro

É a solução mais tentadora quando a versão móvel fica longa, e uma das mais caras. Vale entender por que, porque o custo não é óbvio.

O primeiro motivo já foi dito e é o mais grave: como a versão de celular é a que o Google usa para entender o site, o que é escondido ali tende a deixar de contar para posicionamento. Você mantém o conteúdo no computador achando que ele continua trabalhando, e ele não está.

O segundo é sobre quem visita. Esconder um bloco parte do princípio de que quem está no celular quer menos informação, e isso quase nunca é verdade. A pessoa no celular costuma ser a mesma que estaria no computador, no meio de uma decisão igual, precisando dos mesmos argumentos. O que muda é o contexto de leitura, não o interesse.

Existe uma exceção legítima, que é o conteúdo cuja forma não sobrevive à tela pequena, como uma tabela muito larga ou um gráfico complexo. Nesse caso, a saída não é esconder: é apresentar o mesmo conteúdo de outro jeito, com rolagem dentro do bloco, versão em lista ou resumo em texto. O conteúdo permanece, a forma muda.

A regra prática que usamos é simples. Se algo pode ser removido da versão de celular sem prejuízo, provavelmente pode ser removido da versão de computador também, e o projeto melhora nos dois lados.

Redimensionar a janela do navegador não é testar

É assim que a maioria dos projetos é conferida, e explica por que tanto site aprovado tem problema no celular. Arrastar a borda da janela mostra como o layout se reorganiza, e é útil para isso. Só que quase tudo que dá errado no celular não tem a ver com largura.

Não aparece na janela redimensionada: o comportamento do toque, o teclado que cobre metade da tela ao entrar num campo, o desempenho num aparelho de dois ou três anos atrás, a rolagem com inércia, o comportamento das barras do navegador que aparecem e somem conforme se rola, e a diferença de renderização entre navegadores.

Por isso conferimos em aparelho real antes de entregar, e em mais de um sistema. Android e iPhone divergem em detalhes que aparecem exatamente onde dói: campo de formulário, seleção de data, vídeo, elemento fixo e altura de tela. Um site pode estar impecável em um e ter um defeito visível no outro, e só quem abre nos dois descobre.

Também vale conferir o comportamento em conexão ruim, e não só na rede do escritório. Aqui o assunto encosta em velocidade, que tratamos com mais profundidade na página de landing page: o ponto específico do celular é que a rede é instável e o aparelho costuma ser mais lento do que o de quem construiu o site.

• Aparelho real antes da entrega, não só a janela redimensionada
• Android e iPhone, porque divergem em formulário, data e vídeo
• Conferência de peso e de tempo de carregamento antes de publicar
• Layout desenhado a partir da tela pequena, não adaptado depois

Quando responsividade não é o seu problema

Vale dizer antes de orçar, porque é comum atribuir à responsividade um problema que está em outro lugar.

Se o site já se adapta e ainda assim quem entra pelo celular não age, o gargalo provavelmente é de conteúdo ou de oferta, não de layout. Melhorar o comportamento em tela pequena ajuda, mas não convence quem não se convenceu pelo argumento. Nesse caso o trabalho é de otimização do que está no ar, que é outro serviço com outro método.

Se quase ninguém acessa pelo celular, e isso acontece em alguns nichos corporativos, a prioridade é outra. Continua valendo funcionar bem em tela pequena, porque a versão móvel é a que o Google usa, mas investir esforço desproporcional ali não é o melhor uso do orçamento.

Se o site é antigo e o problema é estrutural, remendar a responsividade costuma custar mais do que refazer. Layout de largura fixa, base pesada e código acumulado por anos resistem a esse tipo de correção, e o resultado fica sempre parcial.

E se o site simplesmente não existe ainda, essa não é uma decisão a tomar: qualquer projeto novo já nasce se adaptando. A conversa passa a ser sobre o que o site precisa fazer, e não sobre telas.

Como saber se o seu site funciona bem no celular

Dá para chegar a uma conclusão razoável sem ferramenta nenhuma, em poucos minutos, e vale fazer antes de contratar qualquer coisa.

Pegue o seu celular, abra o site usando dados móveis em vez do wi-fi, e tente completar o caminho que um cliente faria: encontrar o serviço, entender o que está incluído e iniciar um contato. Faça isso segurando o aparelho com uma mão só. A maior parte dos problemas aparece nesse teste, sem precisar de mais nada.

Preste atenção em quatro coisas durante o percurso. Se a página desliza para o lado em algum momento. Se você errou algum toque. Se precisou dar zoom para ler alguma coisa. E se, ao chegar no formulário ou no botão de contato, algo atrapalhou. Cada uma dessas ocorrências custa uma parcela dos visitantes.

No lado dos dados, a comparação mais reveladora está no seu relatório de acesso: a diferença de comportamento entre quem entra pelo celular e quem entra pelo computador. Quando quem vem do celular sai muito mais rápido ou entra em contato muito menos, isso não é característica do dispositivo, é sintoma. A maioria dos sites tem essa diferença e a maioria dos donos nunca olhou.

Vale lembrar que ferramentas automáticas de avaliação medem o que dá para medir sozinho, como largura, tamanho de fonte e peso. Elas ajudam e não substituem abrir o site e tentar usar.

• Abra o próprio site pelo celular, com dados móveis, usando uma mão
• Anote se deslizou para o lado, se errou toque ou se precisou de zoom
• Compare o comportamento de celular e computador no seu relatório
• Ferramenta automática ajuda, mas não substitui tentar usar

Projetos em que o celular é o acesso principal

Assistência técnica de urgência e serviço de bairro são atendidos quase sempre por quem está no celular, muitas vezes na rua. Os cases aparecem sem número porque não temos dado separado por dispositivo, e sessão total não provaria nada sobre desempenho no celular.

Assistência TécnicaDigital AquecedoresVer o caseBeleza e SEO LocalCorte & StiloVer o caseBeleza e Alto PadrãoCoiffeur Oscar FreireVer o case

Empresas de São Paulo e o acesso pelo celular

Em São Paulo, uma parte grande do acesso acontece em deslocamento. Transporte público, espera, intervalo de trabalho e trânsito são contextos em que a pessoa está com uma mão ocupada, atenção dividida e conexão irregular. É a pior condição possível de leitura, e é nela que boa parte das decisões começa.

Isso pesa mais em serviço local. Quem procura algo perto costuma estar na rua, e a busca acontece no momento da necessidade. Site que exige zoom para ler o endereço, ou que esconde o telefone atrás de dois cliques, perde contato que já estava praticamente decidido.

A conexão também não é uniforme pela cidade. Metrô, subsolo, prédio antigo e região de cobertura fraca produzem carregamento lento mesmo em aparelho bom, e o site precisa continuar utilizável nessa situação, e não apenas na rede do escritório de quem o construiu.

A Axcali fica em São Paulo, atende empresas da capital e da região metropolitana, e trabalha de forma remota com clientes de todo o Brasil.

• São Paulo capital
• Zona Sul
• Zona Leste
• Zona Oeste
• Vila Mariana
• Tatuapé
• Santana
• Grande ABC
• Região metropolitana

Perguntas frequentes

O que mais perguntam sobre site no celular.

Continue por aqui