Mobile

Por que o teu site pode parecer minúsculo e afastado no telemóvel

O motivo mais comum de todos para um site parecer avariado em dispositivos móveis, visto do lado do ecrã do visitante.

O que é

Esta verificação diz respeito à mesma meta tag viewport explicada de forma mais técnica no nosso outro guia sobre o viewport, mas aqui a partir do ponto de vista do que um visitante em telemóvel realmente experiencia: sem ela, o navegador do telemóvel assume que a página foi feita para um ecrã de computador muito mais largo e encolhe tudo para caber, resultando em texto minúsculo e difícil de ler, e num layout que obriga a estar constantemente a fazer zoom e a deslocar a página só para conseguir ler normalmente.

Para a maioria dos sites hoje em dia, especialmente aqueles que já têm um design verdadeiramente responsivo, isto é puramente um problema de configuração em falta, não um problema de design — o layout responsivo já existe, só nunca chega a ter a oportunidade de ser ativado.

Por que importa

Na maioria dos sites atuais, os visitantes em telemóvel representam mais de metade do tráfego total, por isso um problema tão fundamental na apresentação móvel não é um caso raro — na maioria das vezes afeta a maioria de todas as pessoas que visitam o site. Um visitante que chega a uma página que parece avariada, apertada e difícil de percorrer no telemóvel tem uma probabilidade consideravelmente maior de sair de imediato, em vez de lutar com zoom e deslocamentos para ler texto de tamanho normal.

Como este problema específico é tão visualmente óbvio assim que é verificado (basta abrir o site num telemóvel), é também um dos mais rápidos de confirmar como resolvido assim que a definição subjacente é corrigida.

Como corrigir

  1. Abre o teu site num telemóvel real, ou usa o modo de pré-visualização móvel/barra de dispositivos do teu navegador (normalmente disponível nas ferramentas de programador).
  2. Se a página parecer um layout de computador encolhido, em vez de um layout móvel devidamente dimensionado, esta definição é muito provavelmente a causa.
  3. Consulta o nosso guia técnico sobre o viewport para a correção exata de código — uma única tag <meta name="viewport"> resolve isto em praticamente todos os casos.
  4. Se usares um criador de sites, isto é definido automaticamente pela plataforma na quase totalidade dos casos — uma vista móvel avariada nesse contexto costuma indicar antes um código personalizado a interferir.
  5. Verifica novamente a página num telemóvel depois da correção, para confirmar que o texto e o layout já têm o tamanho correto sem ser preciso ampliar.

Veja se o seu próprio site tem este problema

O Launch Readiness analisa o seu site em busca deste e de mais ~50 problemas antes do lançamento, em segundos — grátis, sem registo.

Fazer uma análise grátis