Como Tornar um Site Adaptável ao Telemóvel

Para tornar um site adaptável ao telemóvel, acrescente uma etiqueta meta viewport, construa o layout mobile-first com larguras flexíveis e use pontos de quebra em CSS para o reorganizar em ecrãs maiores — empilhando colunas, recolhendo o menu e ajustando as imagens ao espaço. Depois, verifique cada página à largura de telemóvel para detetar deslocamento lateral, texto minúsculo e botões demasiado pequenos para tocar. Num site criado com IA, um prompt claro seguido de uma passagem por uma pré-visualização com tamanho de telemóvel costuma resolver a maioria dos problemas.

O que é, de facto, o design adaptável

Um site adaptável usa um único conjunto de páginas e URLs que se ajustam ao ecrã. Em vez de um site "m." separado, o CSS muda o layout a certas larguras, chamadas pontos de quebra (breakpoints). Os blocos de construção são:

• A etiqueta meta viewport indica aos navegadores móveis que devem usar a largura real do dispositivo.
• Layouts fluidos usam percentagens, flexbox e grid em vez de larguras fixas em píxeis.
• Media queries (ou classes de frameworks como o md: do Tailwind) mudam o layout acima de uma determinada largura.
• Media flexível — imagens e vídeos que encolhem para caber no seu contentor.

Isto importa porque é provável que grande parte do seu tráfego venha de telemóveis e porque o Google indexa a versão móvel das suas páginas. Se o conteúdo ou as ligações existirem apenas no computador, o Google também pode não os ver.

Opções e compromissos

Mobile-first costuma ser mais simples: uma coluna é o layout mais fácil, e acrescentar colunas à medida que o espaço cresce dá menos trabalho do que as retirar.

As partes que costumam partir

A etiqueta viewport

Se uma página parece um pequeno site de computador num telemóvel, falta a etiqueta viewport:

<meta name="viewport" content="width=device-width, initial-scale=1">

Não acrescente maximum-scale=1 nem user-scalable=no. Bloquear o zoom com pinça torna o site mais difícil de usar para pessoas com baixa visão.

Larguras fixas e deslocamento lateral

O erro de adaptação mais comum é algo mais largo do que o ecrã: um contentor com width: 1200px fixo, uma tabela larga, um URL comprido ou um bloco de código, uma imagem sem max-width: 100%. A página inteira passa então a deslocar-se para os lados. Use max-width em vez de width, deixe o texto quebrar linhas e dê às coisas largas a sua própria área de deslocamento.

Navegação

Cinco ligações de menu de computador raramente cabem num telemóvel. A resposta habitual é um botão de menu que abre um painel. Mantenha visíveis as duas ou três ações mais importantes — "Marcar", "Carrinho", "Iniciar sessão" — e garanta que o menu funciona com o teclado e se fecha facilmente.

Texto e áreas de toque

• Um texto de corpo de cerca de 16 px é um mínimo sensato em telemóveis. Campos com texto mais pequeno fazem os iPhone ampliar ao tocar.
• Facilite o toque em botões e ligações. As WCAG 2.2 AA definem um mínimo de 24 por 24 píxeis CSS (ou espaçamento suficiente); cerca de 44 píxeis é mais confortável para os polegares.
• Deixe espaço entre ligações adjacentes para que as pessoas não toquem na errada.

Tabelas e dados

As tabelas largas são a parte mais difícil de uma app adaptável. Opções, por ordem de preferência: mostrar menos colunas em telemóveis, transformar cada linha num cartão ou colocar a tabela num contentor com deslocamento horizontal e a primeira coluna fixa. Escolha consoante aquilo que as pessoas precisam de comparar.

Imagens e media

Use max-width: 100% e height: auto, sirva ficheiros mais pequenos em ecrãs pequenos com srcset e defina a largura e a altura para evitar saltos no layout. Vídeos e mapas incorporados precisam de um contentor adaptável para manterem a proporção. Imagens mais pequenas também tornam as páginas mais rápidas — veja como tornar o seu site mais rápido.

Formulários

Coloque as etiquetas acima dos campos, faça os campos ocupar toda a largura e use os tipos de entrada corretos (type="email", type="tel", inputmode="numeric") para que os telemóveis mostrem o teclado adequado. Coloque o botão de envio onde o polegar o alcance e mantenha-o visível quando o teclado abrir.

Interações apenas com o cursor

Os telemóveis não têm cursor sobre elementos. Dicas, menus pendentes e pré-visualizações que só aparecem com o cursor são invisíveis para quem usa toque. Faça-os funcionar também com toque.

Prompts que funcionam

Para uma construção nova, diga-o logo no início:

Construa com abordagem mobile-first. Uma coluna em telemóveis, duas colunas a partir da largura de tablet, layout completo no computador. Sem deslocamento horizontal a 320 px de largura, texto do corpo com pelo menos 16 px, áreas de toque com pelo menos 44 px, um botão de menu em ecrãs pequenos e tabelas que se transformam em cartões nos telemóveis.

Para uma página existente, descreva o que vê:

Em telemóveis, a página /pricing desloca-se para os lados e os três cartões de planos ficam esmagados lado a lado. Empilhe os cartões verticalmente abaixo de 768 px, faça a tabela de comparação deslizar horizontalmente dentro do seu próprio contentor com a coluna de funcionalidades fixa e mantenha o layout de computador sem alterações.

Verifique cada página a 375 px de largura. Liste tudo o que transborde, se sobreponha, tenha texto menor que 16 px ou áreas de toque menores que 44 px, ou funcione apenas com o cursor, e corrija cada um deles.

Passo a passo

1. Confirme a etiqueta viewport no cabeçalho da página.
2. Teste a 320–375 px de largura no modo de dispositivo do navegador ou numa pré-visualização com tamanho de telemóvel. Percorra cada página de cima a baixo.
3. Resolva primeiro o deslocamento horizontal. Encontre o elemento demasiado largo; tudo o resto é difícil de avaliar enquanto ele existir.
4. Organize a navegação: botão de menu, ações principais visíveis.
5. Verifique texto, áreas de toque e formulários em cada fluxo principal — registo, pesquisa, finalização de compra, contacto.
6. Trate tabelas e media: cartões ou contentores de deslocamento, imagens e incorporações adaptáveis.
7. Verifique os tamanhos intermédios. Arraste lentamente a largura do telemóvel até ao computador; os layouts costumam partir perto da largura de tablet.
8. Teste num telemóvel real. Os emuladores não mostram coisas como o teclado no ecrã a tapar um botão, os recortes do ecrã e a rapidez do site com dados móveis.

Erros comuns

• Testar apenas um tamanho de telemóvel. Verifique um telemóvel pequeno, um grande e um tablet.
• Esconder conteúdo no telemóvel para caber. O Google indexa a versão móvel, e os utilizadores de telemóvel querem a mesma informação.
• Desativar o zoom na etiqueta viewport.
• Imagens de tamanho de computador em telemóveis, que aumentam o tempo de carregamento e os dados gastos.
• Elementos fixos a acumularem-se: um cabeçalho fixo, um banner de cookies e um balão de chat podem tapar metade do ecrã de um telemóvel.
• Janelas pop-up que não se fecham num ecrã pequeno porque o botão de fechar fica fora do ecrã.

Lista de verificação para telemóveis

• Etiqueta meta viewport presente; zoom não desativado
• Sem deslocamento horizontal a 320 px em nenhuma página
• Texto do corpo ~16 px; os campos não provocam zoom
• Áreas de toque suficientemente grandes e espaçadas
• O menu funciona em telemóveis e com o teclado
• Tabelas legíveis em telemóveis (cartões, menos colunas ou contentor de deslocamento)
• Imagens e incorporações ajustam-se; servem-se ficheiros de tamanho adequado
• Os formulários usam os tipos de entrada certos; o botão de envio é alcançável
• Nada importante depende do cursor
• Testado em pelo menos um telemóvel real

A adaptação do layout faz também parte da acessibilidade: as WCAG pedem que o conteúdo funcione a 320 px de largura e a 200% de zoom. Se estiver a construir uma app que as pessoas usam diariamente no telemóvel, como criar uma app web adequada ao telemóvel vai mais longe, incluindo PWAs instaláveis.

Design adaptável na Mythex

A Mythex constrói apps web adaptáveis e, no Pro, pode empacotá-las como apps para Android e iPhone. No espaço de trabalho, clique no ícone de telemóvel acima da Pré-visualização (Mudar para Móvel) para ver a sua app numa moldura com tamanho de telemóvel, e arraste a borda da moldura para experimentar outras larguras (Pré-visualização e Código). A documentação tem um prompt inicial curto para corrigir o layout em ecrãs pequenos, em prompts de adaptação ao telemóvel. Verifique também num telemóvel real — abra o URL publicado ou partilhe uma ligação de pré-visualização e abra-a no seu telemóvel.

Perguntas