Como Criar um Site Otimizado para Celular para a Sua Empresa

A maioria das pessoas que encontra o seu negócio está segurando um celular quando faz isso. Elas estão paradas numa garagem olhando um aquecedor de água vazando, sentadas no carro em frente a um concorrente ou deitadas no sofá às 21h decidindo para quem ligar de manhã. Se o seu site é difícil de ler, lento para carregar ou um sofrimento de tocar numa tela pequena, elas saem e ligam para o próximo nome da lista. Aprender a criar um site otimizado para celular não é mais um detalhe técnico. É a diferença entre conseguir a ligação e perdê-la.

A boa notícia: você não precisa ser desenvolvedor, e não precisa construir um "site mobile" separado. Este guia percorre o que otimizado para celular realmente significa, as coisas específicas que quebram no celular e como consertá-las em uma tarde. Tudo aqui funciona quer você construa o site você mesmo, contrate alguém ou use uma ferramenta.

O que "otimizado para celular" realmente significa

Um site otimizado para celular não é só uma versão encolhida do seu site de computador. É um site desenhado para que uma pessoa usando um polegar, em um celular intermediário, em uma conexão instável, consiga achar o que precisa e agir em segundos.

Isso se divide em quatro coisas:

Ele cabe na tela. Sem rolagem horizontal, sem apertar e dar zoom, sem texto saindo pela borda.
Ele é rápido. Carrega o conteúdo útil em alguns segundos, não em dez.
Ele é fácil de tocar. Botões e links são grandes o bastante para um polegar e espaçados para você não acertar o errado.
Ele é fácil de agir sobre. O telefone, o botão de agendar e o endereço são as primeiras coisas que um visitante vê, não as últimas.

O Google usa indexação mobile-first há anos, o que significa que ele olha a versão mobile do seu site para decidir a sua posição, mesmo para quem busca no computador. Uma experiência mobile fraca derruba, em silêncio, a sua visibilidade em todo lugar.

Comece com design responsivo, não com um site mobile separado

Anos atrás, os negócios construíam um segundo site só para celulares, normalmente em uma URL como m.seunegocio.com. Não faça isso. É o dobro do trabalho, divide o seu SEO e sempre fica desatualizado.

A abordagem moderna é o design responsivo: um único site que se reorganiza para caber em qualquer tela em que ele chega. As colunas se empilham, as imagens encolhem, o menu se recolhe. Como a TechTarget expõe no seu guia de boas práticas mobile, um layout responsivo vai de várias colunas no computador para uma única coluna legível no celular sem você manter duas versões.

Quase todo construtor de sites e modelo moderno é responsivo por padrão. Se você está escolhendo um tema ou modelo, "responsivo" ou "pronto para mobile" deve ser a primeira caixa que você marca. Uma coisa técnica a confirmar está enterrada no código: a página precisa de uma configuração de viewport que diz ao celular para renderizar na largura do dispositivo em vez de fingir ser um computador. Qualquer modelo decente já a inclui, mas se o seu texto aparece microscópico no celular, uma configuração de viewport faltando é o culpado de sempre e vale perguntar ao seu construtor ou desenvolvedor.

Desenhe para o polegar, não para o mouse

Um ponteiro de mouse é um único pixel. Um polegar chega perto de um centímetro de largura e é bem menos preciso. Esse único fato guia a maioria das decisões de design mobile.

Deixe os alvos de toque grandes. Botões e links devem ter pelo menos uns 44 por 44 pixels, mais ou menos a ponta de um polegar. Apple e Google recomendam essa faixa nas suas diretrizes de design.
Espace as coisas. Dois links empilhados a um pixel de distância garantem toques errados. Dê espaço aos elementos clicáveis para as pessoas não tocarem no errado.
Coloque o importante na zona do polegar. As pessoas seguram o celular e alcançam com o polegar, que cobre com conforto a parte de baixo e do meio da tela. A sua ação principal, normalmente "ligar" ou "agendar", pertence a onde um polegar naturalmente descansa, não escondida em um canto de cima.
Use um menu hambúrguer. O ícone de três linhas que abre a sua navegação é padrão por um motivo: ele esconde um menu longo atrás de um toque e mantém a tela limpa.

Deixe o texto legível sem zoom

Se um visitante tem que apertar para ler o seu horário, você o perdeu. No celular:

Mantenha o corpo do texto em no mínimo 16 pixels. Menor parece bom no seu notebook e é ilegível num celular sob o sol.
Use alto contraste. Texto escuro sobre fundo claro vence cinza-claro sobre branco toda vez, principalmente ao ar livre.
Mantenha os parágrafos curtos. Duas ou três linhas. Uma parede de texto que fica bem no computador vira uma rolagem intimidante no celular.
Use títulos claros para um visitante passando os olhos pular direto para "Serviços" ou "Contato".

Evite fontes de script decorativas para qualquer coisa que a pessoa precisa ler rápido. Guarde a personalidade para o seu logo.

Velocidade é a característica que os clientes sentem primeiro

Velocidade é onde a maioria dos sites de negócios locais falha em silêncio. Segundo números bastante citados no setor, mais da metade dos visitantes de celular abandona uma página que leva mais de 3 segundos para carregar. No celular, com dados móveis, três segundos passam rápido.

O maior culpado é quase sempre as imagens. Uma foto direto da câmera do celular pode ter 5 megabytes. Numa conexão lenta, isso é o orçamento inteiro de carregamento para uma imagem. Para consertar:

Redimensione as imagens para o tamanho em que elas de fato aparecem. Uma foto mostrada com 800 pixels de largura não precisa ter 4000 pixels de largura.
Comprima e use formatos modernos. Arquivos WebP são drasticamente menores que os JPEGs antigos sem perda visível de qualidade. Muitos construtores convertem automaticamente. Se o seu não faz, uma ferramenta gratuita como TinyPNG ou Squoosh faz em segundos.
Ligue o carregamento preguiçoso para as imagens abaixo da dobra só carregarem quando alguém rola até elas, em vez de todas de uma vez lá no início.
Corte a bagunça. Vídeo que toca sozinho, carrosséis pesados, widgets de chat e scripts de rastreamento todos adicionam peso. Mantenha o que merece o lugar.

Um site lento não só irrita as pessoas. Ele te custa posições e ligações ao mesmo tempo, que é o pior tipo de problema: invisível e caro.

Os recursos mobile que os negócios locais realmente precisam

Conselho mobile genérico para em "deixe os botões maiores". Para um negócio de serviços residenciais ou local, o ponto inteiro da visita mobile é fazer um cliente te alcançar agora. Construa para isso.

Telefone com clique para ligar. No celular, o seu número deve ser um link clicável que inicia uma ligação com um toque. Ninguém mais copia um número e disca na mão. Essa é a coisa de maior valor num site de serviços residenciais.
Um botão fixo de ligar ou agendar. Uma barra pequena presa ao rodapé da tela que acompanha o visitante enquanto ele rola, com "Ligar agora" ou "Pedir orçamento", significa que a ação está sempre a um toque de polegar.
Endereço que abre o mapa com um toque. O seu endereço deve abrir o app de mapas do celular com rotas em um toque. Para um local físico isso é enorme.
Formulários curtos com o teclado certo. Se você usa um formulário de contato ou orçamento, mantenha o mínimo de campos. Use os tipos de campo corretos para o celular mostrar um teclado numérico no campo de telefone e um teclado de e-mail no campo de e-mail. Cada campo a mais no celular perde gente.
Horário e área de atendimento no topo. "Você está aberto" e "você vai até a minha cidade" são as duas perguntas que um visitante de celular está fazendo. Responda sem uma rolagem.

O guia da Yelp sobre sites otimizados para celular para negócios locais faz o mesmo ponto de fundo: visitantes de celular são de alta intenção e locais, então o trabalho de design é remover todo passo entre chegar e te contatar.

Teste em um celular de verdade, não só no seu computador

Designers testam em um monitor grande com internet rápida e depois se perguntam por que clientes reais têm dificuldade. Teste do jeito que os seus clientes realmente navegam.

Rode as ferramentas do Google. O Google aposentou o seu Teste de Compatibilidade com Dispositivos Móveis avulso, mas o PageSpeed Insights agora te dá uma nota de desempenho mobile e correções específicas, mais os seus Core Web Vitals, os números reais de velocidade e estabilidade que o Google mede.
Use o seu próprio celular, e um antigo. Abra o site no seu celular pessoal. Depois peça emprestado um Android mais barato ou mais velho. Se funciona ali, funciona para todos.
Limite a sua conexão. Nas ferramentas de desenvolvedor do seu navegador você pode simular uma rede mobile lenta. É humilhante e é honesto.
Faça o teste de um polegar. Segure o celular com uma mão e tente agendar um trabalho ou achar o seu horário usando só o polegar. Se você não consegue, o seu cliente também não.

Teste tanto iOS quanto Android, já que renderizam de forma um pouco diferente, e teste de novo toda vez que você adicionar algo pesado como uma nova galeria de fotos ou um widget de agendamento.

O atalho: comece de um site que é responsivo por padrão

Tudo acima dá para fazer na mão. Também são muitas tardes se você também está tocando um negócio e atendendo o telefone.

É essa a lacuna que a Saynovo foi feita para fechar para donos de serviços residenciais e locais. O site que ela gera é responsivo desde a primeira versão: ele já cabe na tela do celular, os alvos de toque são dimensionados para polegares, as imagens saem comprimidas e o clique para ligar vem conectado, sem configurações mobile para ativar e sem uma versão mobile separada para manter em sincronia. Quando você quer uma mudança, é só pedir e o site se atualiza, e ele continua otimizado para celular conforme muda. Isso remove a parte em que a maioria dos donos trava: saber se a versão de celular está de fato certa.

Uma lista curta para deixar o seu site otimizado para celular

Quer você construa você mesmo ou use uma ferramenta, aprender a criar um site otimizado para celular se resume a um punhado de checagens que você pode fazer hoje:

Um site responsivo, não uma URL mobile separada.
Texto de pelo menos 16 pixels, alto contraste, parágrafos curtos.
Botões de pelo menos 44 pixels, bem espaçados, na zona do polegar.
Imagens redimensionadas, comprimidas e com carregamento preguiçoso para a página carregar em menos de 3 segundos.
Um telefone clicável, um botão fixo de ligar ou agendar e um endereço que abre o mapa com um toque.
Formulários curtos com os teclados mobile corretos.
Testado em um celular real e mais antigo e avaliado no PageSpeed Insights.

Acerte nisso e o seu site para de vazar o tráfego de celular que você já se esforçou tanto para conquistar. No celular, o negócio mais fácil de contatar normalmente vence, e agora esse é você.