O que é site responsivo e por que o seu precisa ser

É hora de descobrir porque não é qualquer sobrinho que faz site! No artigo sobre acessibilidade, falei que é importante pensar em todas as pessoas que vão acessar seu site de dispositivos diferentes. Mas você já parou para pensar em quantos dispositivos diferentes ele vai aparecer? Você vai precisar uma roupa de tamanho único que funciona em vários corpos diferentes. Difícil, mas não impossível. Um site que se apresenta bem em vários dispositivos é chamado de responsivo.

Não sei se você sabe, mas no começo da internet, os layouts dos sites eram baseados em tabelas. A tela era dividida em vários retângulos que eram preenchidos com conteúdo. Depois, talvez você se lembre, teve a onda dos sites em flash. Tinha muita animação, porque ele eram criados no programa Adobe Flash, que foi feito para isso. Só que, à medida em que os tablets e smartphones ganharam espaço, os sites em flash caíram em desuso, porque não dá para acessá-los em dispositivos móveis.

O que é site responsivo, adaptativo e fluido

E hoje em dia, como faz? A palavra da moda é responsivo, o site que se adapta a qualquer tela, como você já sabe (porque eu disse no começo do artigo). Tem que prestar atenção: responsivo é diferente de adaptativo e fluido.

Adaptativo é o site que tem versões diferentes – não sei se você prestou atenção, mas há alguns anos, se você acessasse o facebook pelo celular, o endereço começava com “m.”. Eu fazia isso porque meu smartphone era basicão e não tinha espaço para o aplicativo do facebook, que era super pesado. Enfim, você estava na versão do facebook adaptada ao celular. Já o site fluido é aquele em que os elementos (títulos, textos, imagens) têm uma porcentagem da largura da tela, mas os ficam onde estão. Eles só ficam mais largos ou mais estreitos

A importância da responsividade

Por fim, tem o responsivo, que é o cara. Por quê? Acredite ou não, as páginas ainda são compostas por blocos. Lembra do artigo passado, sobre front-end e back-end? Então, eu tinha contado que a linguagem HTML tem tags que fazem uma hierarquia no conteúdo. Essas tags separam o conteúdo… em blocos. E no design responsivo, esses blocos se reorganizam na página, dependendo da tela.

Sabe quem adora uma página que fica bem em qualquer tela? Os usuários. E, consequentemente, os motores de busca – Google, né – que ficam pesquisando o que é melhor para os usuários. Ou seja, páginas responsivas são ótimas para a SEO (otimização nos motores de busca).

Com a febre dos sites responsivos, mais um termo caiu na boca do povo, “mobile first”. A ideia era planejar uma página pensando na menor tela em que ela vai ser vista, a do celular, para depois jogar para a tela grande. Eu fiz um curso de usabilidade em que as professoras defendiam que não pode vir um depois do outro. Você tem que testar cada pedaço do site na tela de computador e de celular – e de preferência, num tablet também – para ver se vale a pena ficar com ela ou não. Mas pensar na tela de celular primeiro ainda é um exercício interessante para ver a hierarquia mais básica do seu site: já que só cabe uma coisa por vez, o que precisa vir primeiro?

Se você achou o artigo interessante, não se esqueça de compartilhar! Você também pode compartilhar o vídeo correspondente no canal do WordPress sem Código no YouTube: