Abriste o teu website num telemóvel e encontraste algo que não se parece nada com o que construíste? Um website quebrado no telemóvel é uma das queixas mais comuns dos donos de marcas que desenharam o site num computador e nunca verificaram como se comportava num ecrã mais pequeno. Este artigo explica o que causa o problema, como diagnosticar qual é o que afeta o teu site e o que fazer para o corrigir.
Mais de metade de todo o tráfego web vem agora de dispositivos móveis. Essa quota tem vindo a subir há anos e continua a crescer. Se um visitante chega ao teu site a partir de um telemóvel e encontra texto demasiado pequeno para ler, imagens que saem do ecrã ou um menu de navegação que não responde ao toque, as probabilidades de ficar são baixas. Uma taxa de rejeição alta no telemóvel é muitas vezes o primeiro sinal mensurável de que algo está quebrado, e muitos donos de marcas só ligam as duas coisas quando vão ver a análise.
O mais frustrante é que os problemas de apresentação no telemóvel nem sempre são óbvios na vista de computador que usas para gerir o site. Os problemas tendem a surgir só quando olhas para o ecrã real do telemóvel, o que significa que podem passar despercebidos durante semanas ou meses enquanto os visitantes saem em silêncio.
Porque é que um website parece quebrado no telemóvel?
Não há uma única causa para um website quebrado no telemóvel. O problema costuma ser um de cinco problemas de base e, em alguns casos, uma combinação de mais do que um. Perceber qual causa afeta o teu site determina que correção se aplica.
O site não foi construído com design responsivo
Um website responsivo ajusta o seu layout automaticamente consoante a largura do ecrã que o mostra. Num computador, o conteúdo pode aparecer em três colunas. Num tablet, em duas. Num telemóvel, numa única coluna com scroll. Este ajuste acontece através de regras CSS chamadas media queries, que dizem ao navegador como reorganizar o conteúdo em diferentes tamanhos de ecrã.
Se um site foi construído sem design responsivo, apresenta o mesmo layout fixo seja qual for o tamanho do ecrã. Um site desenhado para um monitor de computador com 1440 píxeis de largura vai tentar apresentar-se com essa largura num ecrã de telemóvel com cerca de 390 píxeis. O resultado é uma página encolhida e afastada, em que o texto é ilegível e os botões são demasiado pequenos para tocar. O conteúdo está lá, tecnicamente, mas é inutilizável.
Os sites mais antigos, sobretudo os construídos com editores de arrastar e largar que não davam prioridade ao resultado em telemóvel, têm muitas vezes este problema. Os sites programados à medida sem pensar primeiro no telemóvel também podem cair nesta categoria.
As imagens não estão dimensionadas para ecrãs de telemóvel
Uma imagem carregada com 3000 píxeis de largura e apresentada sem limites vai tentar mostrar-se no tamanho completo, seja onde for vista. Num computador, o navegador consegue encolhê-la para caber. Num dispositivo móvel sem regras de dimensionamento responsivo, a imagem pode ultrapassar a margem do ecrã, causando scroll horizontal ou um colapso do layout.
Mesmo quando as imagens não transbordam, as imagens grandes e não otimizadas afetam a velocidade do website e a razão pela qual importa no telemóvel. Uma imagem de carregamento lento que impede o resto da página de aparecer é uma forma de comportamento quebrado, mesmo quando o layout tecnicamente se mantém. Os visitantes com ligações móveis são particularmente sensíveis a isto.
Elementos de largura fixa transbordam do ecrã
Os elementos de largura fixa são contentores, divs, tabelas ou outros elementos HTML a que foi atribuída uma largura específica em píxeis na folha de estilos, em vez de uma percentagem ou de uma unidade flexível. Um contentor definido com 900 píxeis de largura aparece bem num computador, mas ultrapassa a margem de um ecrã de telemóvel, obrigando o utilizador a fazer scroll horizontal para ver o conteúdo todo. O scroll horizontal num website é quase sempre sinal de um problema de transbordo de largura fixa.
As tabelas são um culpado frequente. Uma tabela de preços ou um quadro comparativo construído em HTML com colunas fixas pode colapsar de forma dramática no telemóvel, fazendo o texto empilhar-se de maneiras impossíveis de ler. O mesmo se aplica a barras laterais, widgets incorporados e qualquer elemento programado com uma largura explícita em píxeis que exceda o espaço disponível no ecrã do telemóvel.
Os tamanhos de letra são demasiado pequenos para ler sem ampliar
O texto que se lê bem a 14 píxeis num ecrã de computador pode tornar-se ilegível num telemóvel, sobretudo em ecrãs de alta densidade, em que o número físico de píxeis é muito superior ao tamanho lógico do ecrã. Se um visitante precisa de fazer zoom com os dedos para ler o teu conteúdo, a experiência está quebrada, mesmo que o layout esteja tecnicamente intacto.
O tamanho mínimo recomendado para o texto do corpo no telemóvel é de 16 píxeis. Abaixo disso, arrisca-se a falhar a legibilidade numa parte significativa dos dispositivos. O texto mais pequeno também sinaliza aos motores de pesquisa que a página não está otimizada para telemóvel, o que pode afetar a forma como o site é classificado e indexado.
A navegação colapsa mal ou não funciona ao toque
Os menus de navegação para computador são muitas vezes construídos como barras horizontais com itens de menu que aparecem ao passar o rato por cima. Num ecrã tátil, passar o rato por cima não existe. Um menu que depende dessa interação simplesmente não funciona num telemóvel. Os visitantes tocam no item do menu e nada acontece, ou são levados para a página errada porque o estado que devia revelar um submenu nunca é ativado.
Mesmo a navegação que tecnicamente funciona ao toque pode estar quebrada na prática se as áreas de toque forem demasiado pequenas ou estiverem demasiado próximas umas das outras. A regra geral para áreas de toque em telemóvel é um mínimo de 44 por 44 píxeis. Áreas mais pequenas levam a toques falhados, navegação acidental e visitantes frustrados que acham mais fácil sair do que encontrar o que vieram procurar.
Como verificar se o teu website está adaptado a telemóvel
A verificação mais rápida é abrir o teu site num telemóvel a sério. Usa o teu próprio dispositivo e, se possível, outro de marca e modelo diferentes. O que parece bem num telemóvel pode aparecer de forma diferente noutro, devido a diferenças na resolução do ecrã, no motor de apresentação do navegador e na versão do sistema operativo.
As ferramentas de programador do navegador oferecem uma simulação de telemóvel integrada. Na maioria dos navegadores de computador, premir F12 abre o painel de programador. Um ícone de barra de dispositivos permite simular diferentes tamanhos de ecrã e tipos de dispositivo. É útil para verificações rápidas, mas não substitui por completo os testes em equipamento real, porque os ambientes simulados não reproduzem o comportamento tátil, a apresentação das letras nem as condições de rede reais.
O teste de compatibilidade com dispositivos móveis da Google, disponível através do Google Search Console, avalia as tuas páginas e assinala problemas concretos de usabilidade em telemóvel. Identifica problemas como texto demasiado pequeno para ler, elementos clicáveis demasiado juntos e conteúdo que não cabe na área visível. O relatório dá detalhe ao nível da página, para saberes que páginas específicas falham e quais passam.
Ver os dados de análise acrescenta uma camada de comportamento ao quadro técnico. Se a tua taxa de rejeição no telemóvel for substancialmente superior à do computador, essa diferença aponta muitas vezes para um problema de apresentação ou de usabilidade nos telemóveis. O artigo sobre taxa de rejeição alta no telemóvel explica como ler estes sinais e o que leva os visitantes a sair logo em ecrãs mais pequenos.
Como corrigir um website que parece quebrado no telemóvel
A correção certa depende da causa que produz o problema. Cada uma das cinco causas acima tem uma solução correspondente.
Passa para um layout responsivo
Se o site não é nada responsivo, a correção é reconstruí-lo numa base responsiva ou passar para uma plataforma que gere HTML responsivo por defeito. Acrescentar comportamento responsivo a um site não responsivo depois de feito é possível, mas muitas vezes dá mais trabalho do que reconstruir a partir de um ponto de partida responsivo. Se o site está numa plataforma moderna que suporta temas ou modelos responsivos, mudar para um modelo responsivo costuma ser o caminho mais rápido.
Redimensiona e limita as imagens
As imagens devem ser carregadas no tamanho real de apresentação necessário, e não na resolução original de exportação. Para a maioria das imagens de um website, uma largura máxima de 1200 píxeis é suficiente para ecrãs de alta densidade e mantém os tamanhos dos ficheiros controlados. Regras CSS que definem max-width: 100% nas imagens garantem que nunca transbordam do contentor, seja qual for a largura do ecrã. Esta única regra resolve a maioria dos problemas de imagens a transbordar sem precisares de redimensionar cada imagem.
Troca as larguras fixas por unidades flexíveis
As larguras fixas em píxeis em contentores, tabelas e outros elementos de layout devem ser trocadas por larguras em percentagem ou por unidades CSS flexíveis como em, rem ou vw. Um contentor definido com width: 90% em vez de width: 900px adapta-se bem a qualquer tamanho de ecrã. Nas tabelas, acrescentar uma regra CSS que as torna roláveis na horizontal dentro do contentor evita que estraguem o layout geral em ecrãs estreitos.
Aumenta os tamanhos de letra para telemóvel
O texto do corpo no telemóvel deve estar definido com pelo menos 16 píxeis. Se a folha de estilos do computador define um tamanho menor, uma media query dirigida às larguras de ecrã de telemóvel pode substituí-lo. Os tamanhos dos títulos também devem ser revistos, porque muitos estilos de título que parecem proporcionados num computador ficam excessivamente grandes num telemóvel e empurram o resto do conteúdo para baixo antes de o visitante ter lido alguma coisa.
Troca a navegação baseada em hover por um menu para telemóvel
A solução habitual para a navegação em telemóvel é um menu recolhível, muitas vezes chamado menu hambúrguer, ativado por um toque em vez de por passar o rato por cima. A maioria das bases responsivas e dos criadores de websites inclui este padrão por defeito. Se a navegação do site atual não tem um equivalente para telemóvel, acrescentá-lo exige alterar a folha de estilos e o JavaScript ou mudar para um tema que inclua a navegação para telemóvel como funcionalidade integrada. O tamanho das áreas de toque também deve ser revisto, para garantir que todos os itens do menu cumprem o mínimo de 44 píxeis.
Se o teu site tem páginas quebradas além de problemas de apresentação, corrigir primeiro o layout visual torna muitas vezes mais fácil navegar e testar cada página durante o processo de auditoria.
Como o WEMASY trata o telemóvel
O criador de websites do WEMASY gera HTML responsivo em todas as páginas sem exigir configuração. Os layouts reorganizam-se automaticamente nos tamanhos de ecrã de telemóvel, as imagens ficam limitadas dentro dos contentores e a navegação passa para um menu adaptado ao toque em telemóveis e tablets. Os tamanhos de letra, as áreas de toque e os espaçamentos estão todos definidos no sistema de design da plataforma para cumprir os padrões de usabilidade em telemóvel, por isso as marcas que lançam no WEMASY começam com um site pronto para telemóvel, em vez de terem de o adaptar depois.
Vê o que está incluído no criador de websites WEMASY ou consulta os planos disponíveis na página de preços.
Perguntas frequentes
Porque é que o meu website parece bem no computador mas quebrado no telemóvel?
Isto acontece normalmente porque o site foi construído ou desenhado sobretudo para ser visto no computador, sem regras CSS responsivas que adaptem o layout aos ecrãs mais pequenos. O navegador do computador tem largura suficiente para mostrar o layout fixo como previsto. O ecrã de um telemóvel não tem, por isso os elementos transbordam, sobrepõem-se ou encolhem até ficarem ilegíveis. Ver o site no modo de simulação de telemóvel de um navegador ou num dispositivo real é a forma mais rápida de perceber o que os visitantes em telemóvel estão a ver. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
Um layout quebrado no telemóvel afeta a minha posição na Google?
Sim. A Google usa indexação mobile-first, o que significa que a versão para telemóvel de uma página é a que a Google avalia principalmente para efeitos de ranking. Um site com problemas de apresentação no telemóvel, texto pequeno ou conteúdo que transborda da área visível recebe pontuações de usabilidade mais baixas, o que se reflete no desempenho global na pesquisa. Corrigir os problemas no telemóvel é uma melhoria da experiência do utilizador e também um ganho de SEO.
O que causa o scroll horizontal num website no telemóvel?
O scroll horizontal no telemóvel aponta quase sempre para um elemento com uma largura fixa em píxeis que excede a largura do ecrã do telemóvel. Os culpados comuns incluem tabelas, barras laterais, conteúdo incorporado, imagens sem limites de largura e contentores definidos com uma largura em píxeis em vez de uma percentagem. Identificar o elemento que transborda nas ferramentas de programador do navegador e depois trocar a largura fixa por uma percentagem, ou acrescentar controlos de transbordo ao contentor pai, costuma resolver o problema.
Como testo se o meu website está adaptado a telemóvel?
Abre o site num telemóvel real e percorre todas as páginas principais. Depois abre-o nas ferramentas de programador de um navegador de computador e usa o modo de simulação de dispositivos para ver vários tamanhos de ecrã. Para uma auditoria estruturada, passa as páginas pelo relatório de usabilidade em telemóvel do Google Search Console, que assinala problemas concretos como texto demasiado pequeno, elementos clicáveis demasiado juntos e problemas de configuração da área visível. As duas abordagens juntas dão o quadro mais completo.
Posso corrigir um site quebrado no telemóvel sem reconstruir tudo?
Depende de como o site foi construído originalmente. Se o site corre numa plataforma que suporta temas responsivos, mudar para um tema responsivo é muitas vezes a correção mais rápida e não exige reconstruir o conteúdo do zero. Se o site é programado à medida com um layout não responsivo, alterações CSS pontuais com media queries podem resolver problemas específicos sem reconstruir tudo. No entanto, se o layout é feito com tabelas ou depende muito de larguras fixas em todo o lado, reconstruir sobre uma base responsiva costuma ser mais eficiente do que remendar problemas individuais.
Porque é que os visitantes saem do meu website ao fim de poucos segundos no telemóvel?
Quando os visitantes chegam a uma página com problemas de apresentação, texto ilegível, navegação quebrada ou imagens de carregamento lento, saem depressa porque a página não cumpre as expectativas básicas de usabilidade. Os visitantes em telemóvel têm menos tolerância ao atrito do que os visitantes em computador. Se o layout está quebrado ou lento, voltam aos resultados de pesquisa e clicam no resultado de outro site. O artigo sobre visitantes que saem do teu website explica toda a variedade de razões por que as pessoas saem depressa e como diagnosticar qual afeta o teu site.