Como Tornar Seu Site Mobile-Friendly

Para tornar um site mobile-friendly, use design responsivo que escala automaticamente layout, imagens e texto para qualquer tela, mantenha texto grande e legível, dimensione botões para dedos e acelere suas páginas. Faça isso e seu site funciona bem em qualquer celular.

Este guia passa por cada etapa em termos simples, de layouts responsivos a áreas de toque e velocidade de página. A maior parte dos visitantes chega pelo celular, então um site mobile-friendly não é um extra agradável. É a diferença entre manter esses visitantes e perder eles.

O que significa mobile-friendly na prática?

Um site mobile-friendly é aquele que parece bom e funciona bem em tela pequena, sem pinçar, dar zoom ou rolar na horizontal. Tudo cabe, lê com clareza e responde ao toque.

O principal caminho para isso é o design responsivo, em que o layout se ajusta ao tamanho da tela. No notebook seu conteúdo pode ficar em três colunas; no celular essas colunas viram uma. Mesmo conteúdo, reorganizado para caber. Quando as pessoas falam em site mobile-friendly, em geral querem dizer design responsivo.

Como o design responsivo funciona?

O design responsivo depende de algumas peças técnicas trabalhando juntas. Você não precisa montá-las manualmente se usa uma ferramenta moderna, mas ajuda saber o que acontece por baixo.

Um template ou tema responsivo dá um layout feito para flexionar desde o início. Uma meta tag viewport no cabeçalho da página diz aos navegadores para escalar a página à largura do dispositivo, em vez de mostrar uma versão encolhida de desktop. E sistemas de layout flexíveis, junto com regras que mudam o estilo em certas larguras de tela, fazem seções de várias colunas colapsarem em uma coluna em telas menores.

O resultado é um site que se reorganiza para cada dispositivo. Se você constrói com uma ferramenta responsiva como o Atomic Builder, esse comportamento já vem embutido, e suas páginas se adaptam sem você escrever código.

Ajuda pensar no celular primeiro e depois escalar para cima. Quando você começa pela menor tela, é obrigado a decidir o que realmente importa, porque só há espaço para o essencial. Você mantém a mensagem-chave e o botão principal e elimina o excesso. Escalar esse layout enxuto para o notebook é fácil, porque você está acrescentando espaço, não tentando enfiar um design largo em uma tela estreita. Sites feitos ao contrário, desktop primeiro, são os que tantas vezes quebram no celular.

Como tornar o texto legível no mobile?

Texto que funciona em monitor largo pode virar um bloco minúsculo no celular. Legibilidade é uma das vitórias mais rápidas para um site mobile-friendly.

Defina o texto de corpo grande o suficiente para ler sem zoom, em torno de 16 pixels ou mais. Dê um pouco mais de espaçamento entre linhas para não parecer apertado. Quebre o conteúdo em parágrafos curtos e listas para as pessoas escanearem com o polegar. Use títulos claros e maiores para separar seções, para o visitante encontrar o que quer sem ler cada linha.

Essas escolhas pequenas se somam. Uma página fácil de ler mantém as pessoas nela; texto denso e minúsculo manda elas de volta aos resultados de busca.

O comprimento da linha também importa no celular. Um parágrafo confortável em monitor largo pode virar uma fita estreita e estranha em tela pequena se não estiver bem configurado. Mantenha frases curtas e deixe o layout responsivo cuidar da largura, em vez de forçar tamanhos fixos pensados para desktop. Quando o texto flui naturalmente na tela em que está, a leitura parece sem esforço, e leitura sem esforço é o que mantém o visitante mobile rolando em vez de sair.

Como fazer botões e menus funcionarem no celular?

No celular, as pessoas navegam com o polegar, não com o ponteiro do mouse. Botões e links precisam servir a isso.

Faça as áreas de toque grandes o suficiente para pressionar com facilidade e dê espaço para o visitante não acertar o errado por engano. Espaçe links pelo mesmo motivo. Troque uma barra de navegação de desktop cheia por um ícone de menu compacto que abre ao toque, mantendo a tela limpa. Evite pop-ups difíceis de fechar em display pequeno, porque um pop-up que não fecha é um dos jeitos mais rápidos de perder um visitante mobile.

Um bom design de toque é sobretudo respiro. Quando cada botão é fácil de encontrar e de pressionar, o site inteiro parece sem esforço no celular.

Formulários merecem cuidado extra no mobile, porque é onde muitos visitantes desistem. Mantenha-os curtos, peça só o que realmente precisa e empilhe os campos em uma coluna para ninguém pinçar para alcançar uma caixa. Quando puder, use o teclado certo para cada campo, para o celular mostrar teclado numérico em telefone e teclado de e-mail em e-mail. Toques pequenos assim reduzem o esforço de preencher um formulário, e no celular esforço é exatamente o que custa conversões.

Como acelerar um site no mobile?

Velocidade importa em todo lugar, mas importa mais no celular, onde a conexão varia e a paciência é curta. Uma página lenta perde visitantes antes de ver qualquer coisa.

Comece pelas imagens, que costumam ser a parte mais pesada da página. Comprima e redimensione para carregar rápido e configure para escalar ao container, para nunca transbordar a tela. Sirva formatos modernos de imagem quando puder. Remova excesso e elementos só de desktop que o celular não precisa. Quanto mais leve a página, mais rápido ela aparece e mais visitantes ficam para ler.

Velocidade também sustenta seus outros objetivos. Uma página rápida converte melhor e ranqueia melhor, e por isso aparece tanto no nosso guia sobre o que faz uma boa landing page quanto nas melhores práticas de design de site.

Fontes e scripts também acrescentam peso, embora seja fácil ignorar. Cada fonte personalizada e widget de terceiros é outro arquivo que o celular precisa buscar antes da página parecer pronta. Use uma ou duas fontes em vez de cinco e elimine qualquer plugin ou embed que você não precise de verdade. Uma página que carrega widget de chat, três scripts de rastreamento e vídeo em autoplay vai arrastar no celular, não importa o visual. Mais enxuto quase sempre é mais rápido, e mais rápido quase sempre mantém mais visitantes.

Como testar se seu site é mobile-friendly?

Nunca assuma que uma página funciona no mobile. Confira, porque uma janela de navegador encolhida raramente conta a história inteira.

O melhor teste é o mais simples: abra seu site em um celular real e use como um visitante usaria. Toque botões, preencha formulários, leia o texto e role por cada página importante. Ferramentas gratuitas de buscadores também podem sinalizar problemas mobile e apontar o que corrigir. Preste atenção especial às páginas-chave, como homepage e qualquer landing page para a qual você manda anúncios, porque essas carregam mais peso.

Teste de novo sempre que fizer uma mudança. É fácil corrigir algo no desktop e quebrar algo no mobile sem perceber; uma checagem rápida no celular depois de cada edição evita dor de cabeça depois.

Também ajuda testar em mais de um celular, se puder. Tamanhos de tela variam muito, de aparelhos antigos pequenos a modelos grandes modernos, e um layout perfeito no seu dispositivo pode ficar apertado em um menor ou estranho em um maior. Você não precisa de uma gaveta de celulares. Pegar o aparelho de um amigo por dois minutos, ou usar os tamanhos de tela que seu construtor permite visualizar, costuma bastar para pegar as piores surpresas antes dos visitantes.

Por que mobile-friendliness importa para SEO?

Ser mobile-friendly não é só sobre visitantes. Também afeta como os buscadores tratam seu site.

Os buscadores olham a versão mobile das suas páginas ao decidir como ranquear, então um site que sofre no celular pode perder visibilidade mesmo para quem busca no notebook. Velocidade e usabilidade entram nisso também, porque buscadores favorecem páginas que carregam rápido e são fáceis de usar. Um site mobile-friendly sustenta os dois objetivos: mantém os visitantes que você já tem e ajuda mais pessoas a encontrar você.

Perguntas frequentes

Como saber se meu site é mobile-friendly?

Abra em um celular real e use, ou rode em uma ferramenta gratuita de teste mobile-friendly. Procure texto legível, toques fáceis e nenhuma rolagem horizontal.

O que é design responsivo?

É uma abordagem em que o layout se ajusta automaticamente ao tamanho da tela, para um site funcionar em celulares, tablets e desktops sem versões separadas.

Preciso de um site mobile separado?

Não. Um site responsivo se adapta a cada tela, o que é mais simples de gerir do que construir e manter uma versão mobile à parte.

Por que meu site fica ruim no celular?

Causas comuns são template não responsivo, configuração de viewport ausente, imagens grandes demais ou texto e botões minúsculos e apertados. Cada uma tem correção.

Mobile-friendliness afeta o ranking no Google?

Sim. Os buscadores avaliam a versão mobile das suas páginas, então um site que funciona mal no celular pode ranquear mais baixo para todos.

Construa um site que funciona em qualquer tela

Um site mobile-friendly mantém seus visitantes e ajuda novos a encontrar você. Use design responsivo, mantenha texto e botões fáceis, acelere as páginas e teste em um celular real.

Comece seu teste grátis do Atomicat e construa um site rápido e responsivo sem escrever código.