A maioria dos seus visitantes chega pelo telemóvel. Mesmo assim, quase tudo é construído no ecrã grande — e a vista pequena é verificada, quando o é, mesmo no fim. É exatamente daí que nascem os problemas que mais vezes reparo nas formações.
A única dica que muda a forma de trabalhar
Construa a página e verifique depois logo cada secção no telemóvel, antes de passar à seguinte. Não tudo de uma vez no fim.
A diferença é considerável: se depois corrigir vinte secções ao mesmo tempo, perde a noção de que alteração fez efeito em que sítio. Secção a secção, é sempre uma ninharia.
A vista muda-se no editor, em baixo à esquerda, através do símbolo do dispositivo.
Como as vistas de dispositivo se relacionam
O princípio em que a maioria tropeça no início: o Elementor herda do grande para o pequeno.
O que define na vista de ambiente de trabalho vale automaticamente também para tablet e telemóvel — desde que aí não defina nada diferente. Assim que introduzir um valor próprio na vista de telemóvel, esse valor fica fixado para o telemóvel e deixa de acompanhar o ambiente de trabalho.
Daí resultam duas regras práticas:
Altere os conteúdos sempre na vista de ambiente de trabalho. Se editar um texto na vista de telemóvel, ele muda de facto em todo o lado — mas perde facilmente a noção de que definição está presa onde.
Defina valores para telemóvel apenas onde é necessário. Cada valor sobrescrito é um ponto que terá de manter adicionalmente em futuras alterações.
Os cinco erros mais frequentes
Larguras fixas em píxeis. Um contentor com 1200 píxeis de largura não cabe em nenhum ecrã de telemóvel e provoca deslocação horizontal. Use valores percentuais ou uma largura máxima em vez de uma largura fixa.
Espaçamentos pensados só para o ambiente de trabalho. 120 píxeis de espaçamento interior em cima e em baixo parecem generosos no ecrã grande. No telemóvel significam que o visitante desliza por superfícies vazias. Defina no telemóvel valores nitidamente mais pequenos — normalmente metade ou menos.
Tamanhos de letra sem adaptação para telemóvel. Um título de 64 píxeis ocupa cinco linhas no telemóvel. Para títulos compensa quase sempre um valor próprio, mais pequeno.
Áreas de toque demasiado pequenas. Os botões e os pontos de menu precisam de um tamanho mínimo para serem acertados com o polegar de forma fiável — cerca de 44 por 44 píxeis. Duas ligações diretamente uma por baixo da outra com pouco espaço são um suplício no telemóvel.
Ordem errada. No ambiente de trabalho a imagem está à esquerda e o texto à direita. No telemóvel empilham-se — e de repente a imagem aparece antes do título. Com contentores flexbox altera a ordem em Avançado por cada vista, sem duplicar a construção. Porque é que os contentores são aqui superiores está em contentores em vez de secções.
Ocultar elementos no telemóvel — com critério
Em Avançado → Responsivo pode ocultar elementos por dispositivo. É útil para gráficos decorativos que no telemóvel só ocupam espaço.
Duas limitações: os elementos ocultos são carregados na mesma — poupa espaço, mas não tempo de carregamento. E nunca oculte conteúdos necessários à compreensão. Uma versão para telemóvel à qual faltam informações essenciais não é otimização nenhuma.
Breakpoints próprios
Por predefinição, o Elementor trabalha com ambiente de trabalho, tablet e telemóvel. Em Definições do site → Responsivo podem ativar-se limiares adicionais, por exemplo para ecrãs grandes ou telemóveis pequenos.
O meu conselho: fique-se pelas três vistas padrão enquanto não tiver um problema concreto. Cada breakpoint adicional significa mais uma vista que tem de verificar a cada alteração — e a precisão adicional, na prática, ninguém repara nela.
Verificar: não só no editor
A vista de telemóvel no editor é uma simulação. Mostra a largura corretamente, mas não tudo: comportamento tátil, representação real das fontes, comportamento de carregamento com má ligação.
Veja a página pelo menos uma vez num aparelho real antes de ela ir para o ar. E verifique sobretudo duas coisas: a página desloca-se na horizontal? Então há algures um elemento demasiado largo. E o menu funciona — abre-se, deixa-se fechar?
Quanto ao tempo de carregamento
No telemóvel a ligação é muitas vezes pior e o aparelho mais lento. É precisamente aí que são medidos também os Core Web Vitals, que entram na avaliação da pesquisa. Se quiser poupar tempo de carregamento nalgum sítio, então no telemóvel: Elementor e Core Web Vitals.
Elementor Pro: as definições responsivas existem nas duas versões. O Pro alarga-as ao cabeçalho, ao rodapé e aos popups — precisamente no menu do telemóvel é essa a diferença que se nota. Ver o Elementor Pro
Se quiser percorrer o seu site comigo na vista de telemóvel, em vez de curar sintomas isolados, essa é uma parte típica da minha formação de Elementor.
Etiquetas