Este termo significa que o site se ajusta automaticamente a todos os tipos de tela, desde as telas pequenas de um celular segurado na vertical até uma televisão de dezenas de polegadas em uma sala grande. Para isso, o layout precisa ter características conhecidas como “layout elástico” e/ou “layout líquido”. Um método muito fácil para ver esses fenômenos em ação é abrir o site num desktop/laptop, reduzir a largura do navegador aos poucos e observar o comportamento do site.
Trata-se de instruções CSS que só funcionam em uma determinada resolução de tela. Exemplo: em uma tela com 1000px de largura, é aplicado o “bloco A” de formatações e, numa tela com 500px de largura, é aplicado o “bloco B” de formatações.
Aqui, a cada 1px aumentado ou diminuído, o layout se reajusta como se fosse um líquido preenchendo todos os espaços de um recipiente. Geralmente é um bloco de formatações com medidas em porcentagem. Exemplo: o tamanho do logotipo será 30% da largura total. Essa instrução garante que o logotipo fique sempre pequeno, no topo e à esquerda – como na maioria dos sites.
Isso significa que o site NÃO é responsivo. Geralmente, quando o logotipo, os textos, os botões e outros elementos ficam muito pequenos, sendo necessário dar zoom com o movimento de pinça dos dedos, é porque a única instrução responsiva que o site contém é abrir com zoom reduzido. Um site assim é muito penalizado no SEO, no PageSpeed, no Ads etc. O Google e outros buscadores levam muito em consideração as questões de acessibilidade para ranquear e posicionar os sites. Questões como legibilidade, contraste de cores e facilidade de clicar/tocar em botões diferentes que estão próximos, sem gerar clique/toque acidental, são fatores relevantes. Se este é o caso do seu site, veja o nosso serviço de atualização de site.
Muito cuidado com elementos flutuantes e sobrepostos na tela, como, por exemplo: botão flutuante do WhatsApp, aviso de cookies, pop-up de promoções, janela ativa de chat, mascotes, jogos, permissão de localização etc. Todos esses elementos, além de causar confusão e, algumas vezes, serem irritantes, podem levar o site a sofrer penalidades de acessibilidade e no PageSpeed.
1) Caso o site utilize algum código rastreador, use um aviso de cookies discreto, exibido uma única vez durante toda a navegação. Esse aviso de cookies é obrigatório por lei (LGPD).
2) Um botão de contato via WhatsApp. Na versão para telas grandes, em que a pessoa utilizaria um mouse, a posição não faz diferença. Já na versão para tablet e celular, é recomendável posicionar o botão à esquerda, já que a maioria das pessoas é destra e utiliza o polegar para navegar e rolar a tela. Um botão flutuante à direita fica exatamente na posição em que a pessoa usa o polegar, gerando toque acidental e uma navegação ruim.
3) Parem com os pop-ups! Ninguém gosta de ser bombardeado por propagandas interruptivas. É melhor utilizar um layout que conduza a pessoa a CTAs estratégicos. Por exemplo, em vez de utilizar um pop-up “Urgente! Promoção no PIX”, exiba dois preços na listagem de produtos: o valor regular e o valor com X% de desconto no PIX.
4) Deixe um espaço confortável para as pessoas lerem o conteúdo do site. Quanto mais desconfortável, caótico e trabalhoso de manusear, menor o engajamento.
Todos os sites da GEXIS são desenvolvidos pensando primeiro no celular, seja um site institucional em HTML, um site one-page ou uma landing page.
