Este termo significa que o site se ajusta automaticamente a todos os tipos de tela. Desde telas pequenas de um celular segurado na vertical até uma televisão de dezenas de polegadas de uma sala grande. Para isto o layout precisa conter características conhecidas como “layout elástico” e/ou “layout líquido”. Para ver estes fenômenos em ação um método muito fácil é abrir o site num desktop/laptop, reduzir a largura do navegador aos poucos e ver 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% do tamanho total da largura. Esta instrução garante que o logotipo fique sempre no topo pequeno na esquerda – como é a maioria dos sites.
Isto significa que o site NÃO é responsivo. Geralmente quando o logotipo, textos, botões e outros ficam muito pequenos sendo necessário dar zoom através do movimento de pinça com os dedos é porque a única instrução responsiva que o site contém abrir com zoom negativo. Um site assim é muito penalizado no SEO, PageSpeed, Ads, etc. O Google e outros buscares levam muito em consideração questões de acessibilidade para ranquear e posicionar os sites. Questões como legibilidade, contraste de cores, facilidade de clicar/tocar em botões diferentes que estão próximos sem gerar clique/toque acidental são fatores relevantes.
Muito cuidado com elementos flutuantes e sobrepostos na tela como por exemplo: botão flutuante do Whatsapp, aviso de cookies, popup de promoções, janela ativa de chat, mascotes, jogos, permissão de localização e etc. Todos estes 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, utilize um aviso de cookie discreto cujo é exibido uma única vez durante toda a navegação. Este aviso de cookie é obrigatório por lei.
2) Um botão de contato via Whatsapp. Na versão de telas grandes onde uma pessoa utilizaria um mouse não faz diferença a posição. Já numa versão para tablet e celular é recomendável utilizar o botão na esquerda já que a maioria das pessoas são destras e utilizam o polegar para navegar e rolar tela. Um botão flutuante à direita fica exatamente na posição em que a pessoa utiliza seu polegar gerando toque acidental e uma navegação ruim.
3) Parem com os popup! Ninguém gosta de ser bombardeado por propagandas interruptivas. É melhor utilizar um layout que conduz a pessoa a CTAs estratégicos. Por exemplo, ao invés de utilizar um popup “Urgente! Promoção no PIX” exiba na listagem de produtos dois preços: valor regular e valor com X% de desconto no PIX.
4) Deixe um espaço confortável para as pessoas lerem o conteúdo do site. Quantos mais desconfortável, caótico e trabalhoso de manusear, menos engajamento.
