Mais de 60 por cento de todo o tráfego da web vem hoje de dispositivos móveis. Um website que não está adaptado a telemóvel falha à maioria das pessoas que o visitam, e não é um caso raro. Acertar no telemóvel não é uma funcionalidade extra. É o mínimo que se espera de um website de negócio.
Tornar um website adaptado a telemóvel é dar aos visitantes em telemóvel a mesma qualidade de experiência que têm os visitantes em computador. Não uma versão reduzida que, tecnicamente, carrega, mas um site onde o texto é legível, a navegação funciona, as imagens aparecem corretamente e os formulários podem mesmo ser enviados de um telemóvel sem frustração.
Este artigo percorre as alterações práticas que tornam um website realmente adaptado a telemóvel, desde a navegação e o texto até às imagens, aos formulários e à velocidade.
O que quer dizer, na prática, adaptado a telemóvel?
Um website adaptado a telemóvel é aquele em que todas as funcionalidades funcionam corretamente num telemóvel, sem precisar de truques. O texto é legível no zoom predefinido. A navegação abre e fecha bem. Os botões são grandes o suficiente para tocar sem acertar no elemento errado. As imagens carregam e aparecem corretamente. Os formulários podem ser preenchidos e enviados sem frustração.
A distinção entre tecnicamente compatível com telemóvel e realmente adaptado a telemóvel importa. Um site é tecnicamente compatível se não se estraga num telemóvel. É realmente adaptado se usá-lo num telemóvel parece tão natural como usá-lo num computador. A diferença está nos detalhes. Espaçamento, tamanho de letra, tamanho das áreas de toque e tempo de carregamento determinam se a experiência parece certa ou apenas mal funcional.
A base de um website adaptado a telemóvel é o design responsivo, que faz o esquema adaptar-se automaticamente a diferentes tamanhos de ecrã. O artigo sobre o que é o design responsivo explica como isto funciona a nível técnico.
Como testas se o teu website está adaptado a telemóvel?
O teste mais fiável é percorrer o teu próprio site num telemóvel real. Não na pré-visualização móvel de um navegador. Não numa janela de computador reduzida a uma coluna estreita. Um telemóvel a sério, com os teus polegares, como um visitante o usaria.
Percorre todas as páginas. Abre a navegação e verifica se todos os links estão acessíveis. Lê o texto para confirmar que é legível sem ampliar. Toca em todos os botões para confirmar que respondem corretamente. Preenche e envia os formulários. Verifica se as imagens carregam e aparecem corretamente. Verifica se nada obriga a deslocar na horizontal.
Os motores de busca também oferecem ferramentas gratuitas de teste para telemóvel. Introduz o teu endereço e a ferramenta assinala problemas específicos, como texto pequeno demais para ler, elementos clicáveis demasiado juntos ou conteúdo mais largo do que o ecrã. Para orientações mais amplas sobre o que verificar antes de um site entrar no ar, o que saber antes de lançar o teu website inclui o teste em telemóvel no processo completo de pré-lançamento.
Como fazes a navegação funcionar em telemóvel?
A navegação é onde a experiência em telemóvel mais vezes falha. Um menu horizontal que ocupa toda a largura de um monitor de computador não tem para onde ir no ecrã de um telemóvel. A solução habitual é um menu recolhível ativado por um botão, normalmente num canto do topo.
O botão do menu tem de ser reconhecível de imediato. O ícone de três linhas tornou-se uma convenção muito conhecida para menus de navegação recolhidos. Quando o menu abre, deve cobrir ecrã suficiente para ser fácil de ler e tocar. Os itens precisam de espaço vertical suficiente para um dedo tocar num sem acertar no de cima ou no de baixo.
Mantém o menu móvel curto. Se a tua navegação de computador tem muitos itens, pensa em quais os visitantes em telemóvel mais provavelmente vão precisar e se os itens secundários podem ser agrupados ou retirados do primeiro nível. Um menu móvel mais limpo é mais fácil de usar. O artigo sobre o que é a navegação de um website trata da estrutura e da usabilidade da navegação em todos os dispositivos.
Como devem ser o texto e os tipos de letra em telemóvel?
O texto fácil de ler num computador pode ficar desconfortavelmente pequeno num telemóvel se o tamanho de letra for demasiado baixo. Um tamanho mínimo de letra de 16 píxeis no corpo do texto é o padrão mais usado para a legibilidade em telemóvel. Abaixo disso, o texto obriga a ampliar, o que a maioria dos visitantes não faz.
O comprimento das linhas também conta. Num computador, uma linha de texto pode ter 600 a 700 píxeis. Num telemóvel, esse mesmo texto quebra em linhas muito mais curtas. Se o espaço entre linhas for demasiado apertado ou os parágrafos demasiado longos, ler torna-se desconfortável num ecrã pequeno. Parágrafos curtos, espaço generoso entre linhas e quebras claras entre secções melhoram a legibilidade.
Os títulos devem diminuir proporcionalmente. Um H1 com 48 píxeis num computador pode ficar adequado com 28 a 32 píxeis num telemóvel. Se os títulos mantiverem o tamanho de computador num telemóvel, dominam o ecrã e empurram o conteúdo propriamente dito para baixo.
Como tratas das imagens em telemóvel?
As imagens são um dos maiores riscos de desempenho em telemóvel. Uma imagem em resolução total, pensada para um monitor de computador de 1440 píxeis, é muito maior do que o necessário quando mostrada num ecrã de telemóvel de 375 píxeis. Servir essa imagem a visitantes em telemóvel desperdiça largura de banda e atrasa bastante a página.
A solução é servir imagens de tamanho adequado a cada dispositivo. A maioria dos criadores de websites modernos trata disto automaticamente, gerando vários tamanhos e servindo o certo consoante o ecrã. Se geres as imagens manualmente, redimensiona-as para o maior tamanho em que vão aparecer, e não para o maior tamanho que a tua câmara consegue produzir.
Presta atenção a como as imagens são cortadas em telemóvel. Uma imagem larga em paisagem que parece equilibrada num computador pode ficar mal cortada num ecrã de telemóvel alto. As imagens de destaque e as secções de banner são os sítios mais comuns onde os cortes de computador e de telemóvel divergem de forma visível. O artigo sobre o que é a velocidade de um website explica o impacto da otimização de imagens no desempenho geral da página.
O que faz os formulários funcionarem bem em telemóvel?
Os formulários são um ponto de grande atrito em telemóvel. Preencher campos com um pequeno teclado tátil é mais exigente do que escrever num teclado completo. Quantos menos campos incluíres, melhor. Cada campo extra é uma oportunidade de frustração e uma razão para desistir.
O tamanho dos campos conta. Os campos têm de ser grandes o suficiente para tocar com precisão e largos o suficiente para o texto lá dentro ser legível. As etiquetas devem aparecer acima de cada campo, e não só como texto de exemplo lá dentro, porque esse texto desaparece assim que alguém começa a escrever.
Define corretamente os tipos de campo. Um campo de email deve abrir o teclado de email. Um campo de número de telefone deve abrir o teclado numérico. Um campo de data deve abrir um seletor de datas. São pequenas definições técnicas que tornam a experiência visivelmente mais fluida.
Testa cada formulário no teu telemóvel, preenchendo-o por completo e enviando-o. Confirma que o envio é concluído e que a mensagem de confirmação aparece corretamente. Um formulário de contacto que funciona no computador mas falha no telemóvel perde contactos em silêncio, sem tu saberes.
Como é que a adaptação a telemóvel afeta as posições na pesquisa?
Os motores de busca indexam primeiro a versão móvel do teu website. Isto quer dizer que a experiência em telemóvel não é importante só para quem visita em telemóvel. É a versão que determina como o teu site é entendido e classificado em todos os dispositivos.
Um site com mau desempenho em telemóvel, seja por carregamento lento, esquemas estragados ou texto ilegível, ficará abaixo de sites comparáveis que tratam bem do telemóvel. Os visitantes que chegam a um site móvel e saem logo porque não funciona enviam um sinal claro de que a página não serviu as suas necessidades. Taxas de abandono altas em visitantes de telemóvel afetam as posições ao longo do tempo.
A velocidade da página em telemóvel é um fator específico. Uma página que carrega em dois segundos numa ligação de banda larga rápida pode demorar seis ou mais segundos numa ligação de dados móveis normal. Imagens otimizadas, poucos scripts bloqueantes e uma estrutura de modelo limpa contribuem para carregamentos móveis mais rápidos. Para uma visão completa de como funciona a otimização para motores de busca, o que é o SEO trata do tema por inteiro, incluindo os fatores técnicos.
Como a WEMASY trata do telemóvel
O criador de websites da WEMASY usa modelos responsivos que se adaptam automaticamente a computador, tablet e telemóvel. O editor visual inclui uma pré-visualização para telemóvel, para veres como fica cada secção num ecrã pequeno enquanto constróis. A otimização de imagens e o desempenho em telemóvel são tratados pela plataforma, sem configuração manual.
Vê o que está incluído no criador de websites da WEMASY ou consulta os planos na página de preços.
Perguntas frequentes
Como sei se o meu website está adaptado a telemóvel?
Percorre o teu site num telemóvel real. Testa todas as páginas, todos os itens de navegação, todos os formulários e todos os botões. Os motores de busca também oferecem ferramentas gratuitas de teste para telemóvel, onde introduzes o teu endereço e eles assinalam problemas específicos. A combinação de um percurso manual com uma verificação por ferramenta revela os problemas que mais importam. As pré-visualizações móveis dos navegadores são úteis durante o desenvolvimento, mas não reproduzem totalmente a experiência num dispositivo real. Com o criador de websites da WEMASY, podes configurar isto diretamente no teu website.
Posso adaptar a telemóvel um website existente sem o refazer?
Depende de como o site foi construído. Os sites feitos em criadores de websites modernos conseguem muitas vezes melhorar a experiência em telemóvel ajustando as definições do modelo, redimensionando imagens ou mudando para um modelo melhor. Os sites feitos com código à medida ou em plataformas mais antigas podem precisar de trabalho mais significativo. Em alguns casos, refazer numa plataforma atual é mais rápido e dá melhor resultado do que tentar remendar um site antigo.
Um website adaptado a telemóvel fica melhor posicionado nos resultados de pesquisa?
Os motores de busca usam a versão móvel do teu site como versão principal para indexar e classificar. Um site que funciona bem em telemóvel e carrega depressa num telemóvel terá, em geral, melhor desempenho do que um construído sobretudo para computador. Para além do benefício nas posições, um site adaptado a telemóvel mantém os visitantes mais tempo, reduz as taxas de abandono e converte melhor. Estes sinais de comportamento também afetam o desempenho na pesquisa a longo prazo.
Qual é o tamanho mínimo de letra num website para telemóvel?
Um tamanho de letra de 16 píxeis no corpo do texto é o mínimo muito recomendado para a legibilidade em telemóvel. Abaixo disso, o texto fica difícil de ler sem ampliar. Os títulos devem diminuir proporcionalmente para não esmagarem o ecrã. Um espaço entre linhas de pelo menos 1,5 vezes o tamanho da letra melhora a legibilidade em ecrãs pequenos, sobretudo em parágrafos mais longos.
Que tamanho devem ter os botões num website para telemóvel?
Uma área de toque mínima de 44 por 44 píxeis é muito recomendada para botões em telemóvel. Isto dá ao dedo um alvo claro e reduz toques acidentais em elementos vizinhos. Os botões também devem ter espaço suficiente entre si, para que tocar num não seja registado como um toque em algo próximo. Os botões de apelo à ação devem ser grandes, visualmente distintos e fáceis de alcançar com o polegar sem mudar a posição do telemóvel.