Seus clientes e potenciais vão ver seu site em uma tela de 3" no celular, de 13" no notebook ou de 30" em um monitor de mesa? Em todas elas vai ser uma boa experiência?
O problema da diversidade
A super proliferação dos celulares e tablets, que acontece hoje em dia, não aposentou os computadores e notebooks, que continuam firmes e fortes nos escritórios, home-offices e na mesa dos estudantes em EAD (ensino à distância).Além disso, muitas pessoas acrescentam um monitor grande aos seus computadores ou notebooks, por questões de conforto visual, ou pelo espaço extra para poder abrir vários softwares simultaneamente.
Essa diversidade toda trouxe um problema para os responsáveis pelo marketing digital das empresas: nunca dá para saber o tamanho da tela onde o cliente, ou cliente potencial, vai ver o seu marketing digital, em particular o centro de qualquer presença digital, o seu site.
O homem é a medida de todas as coisas
Em um mundo ideal, para resolver o problema dos tamanhos de telas, bastaria você ampliar ou encolher todas os elementos da página do site - textos, fotos, vídeos, gráficos - proporcionalmente com a tela onde eles estão sendo exibidos. No monitor de 30 polegadas você mostraria a foto com 20cm de largura e no celular de 3 polegadas mostraria com 2cm de largura.Infelizmente, nós não vivemos em um mundo ideal.
Uma fotona de 20cm pode ficar exagerada na tela grande e a mesma foto com 2cm de largura pode tornar difícil enxergar detalhe no celular. O mesmo acontece com o tamanho das fontes - das letras: abaixo de um certo tamanho fica ilegível, acima de um certo tamanho fica parecendo que tudo é manchete. Não dá certo só ampliar ou encolher tudo automaticamente para o tamanho da tela, sem critério.
Para complicar, o dedo é muito maior e mais impreciso que a combinação mouse / ponteiro digital. Na tela grande do computador é fácil clicar com o mouse em um botão pequeno. Na tela pequena do celular é difícil clicar com o dedo no mesmo botão pequeno.
Então, na contramão da ideia simplista de ampliar as coisas na tela grande e encolher nas pequenas, os botões, links e outros itens clicáveis ou de interação tem que ser grandes nas telas pequenas e podem ser pequenos nas telas grandes.
Na verdade, a fisiologia humana tem uma faixa de conforto desconectada do tamanho do hardware. Para que o site seja agradável de usar é preciso trabalhar dentro dessa faixa em todos os elementos da página, independentemente do tamanho do suporte material.
Um site responsivo. E adaptável...
O jeito mais moderno de abordar essa questão é através das tecnologias para se fazer um site responsivo. Esse nome (uma tradução apressada e mal ajambrada do inglês responsive) quer dizer um site que se altera e se adapta automaticamente, para diferentes tamanhos e orientações de tela (vertical ou horizontal).A tradução de responsive é sensível, significando no original em inglês que o site sente, percebe, a tela onde está. Responsivo, só mudando para a sonoridade do português, significa alguém que responde. É mais um termo médico - o paciente saiu do coma, está responsivo.
Na humilde opinião deste escriba, termos técnicos a gente deveria ou manter no original, como hardware e software, ou traduzir para a palavra de melhor significado na nossa língua, por exemplo, traduzir para site adaptável. Mas o nome responsivo pegou, então vamos de responsivo. Eu tento defender a última flor do Lácio, mas no mundo digital essa é uma batalha morro acima.
Como é feito um site responsivo
Basicamente, as tecnologias para fazer um site responsivo permitem ao criador do site programá-lo para testar dinamicamente, no momento da exibição da página do site, o tamanho e a orientação da tela onde ele está sendo exibido. Daí montar, ou remontar, os elementos da página em diferentes tamanhos, proporções e alinhamentos.Por exemplo, incluir na programação do site "se a tela for maior que 600 pixels mostre esta foto encostada do lado esquerdo da tela, se for menor mostre-a bem no meio da tela" ou "se for computador mostre o botão de fechar a janela com um x pequeno no canto esquerdo, se for celular mostre o botão de fechar a janela como um grande quadrado vermelho embaixo".
Coloquei os exemplos em linguagem natural para facilitar a compreensão do que acontece. Na real, seriam usadas linguagens de programação, mais ou menos assim:
@media only screen and (min-width: 600px) { .img{ width:50%; left}}
O objetivo das programações desse tipo é colocar tudo na faixa de conforto do usuário, sem perder a linguagem estética geral da página. Um site que faça essa formatação dinâmica de seu conteúdo, para adaptá-lo ao tamanho e orientação de cada tela, é um site responsivo.
Uma palavra final de caução
Como muitas ferramentas, as tecnologias para fazer um site responsivo dependem de quem as opera.
Um violão de qualidade, na mão do Yamandu Costa soa como anjos cantando. Na minha, como cachorros latindo. As tecnologias para fazer um site responsivo tem o potencial de proporcionar uma grande experiência a quem acessa um site, em qualquer tipo de tela. Mas elas dependem de uma agência digital experiente e competente no seu uso.
Para um site responsivo agradar, funcional e esteticamente, seu criador tem que programar um bem coreografado balé de geometrias. Toda vez que se altera um elemento de uma página para adaptá-lo ao tamanho e orientação de uma tela, se altera também o resto do espaço disponível para todos os outros elementos da página, bem como as relações entre todos eles.
A um bom site não basta ser responsivo, tem que ser responsivo feito por alguém que realmente sabe o que está fazendo, como a Vendere 😀.
Gostou do post?
Compartilhe! ↓ →