Muitas vezes demos de frente com um layout que está mal estruturado e com alguns itens fora de ordem, mas nada pior do que você abrir o site no smartphone ou tablet e ter aquela visão do site pequeno demais para clicar nos botões de navegação ou ter itens jogados para um lado e outro, tendo que arrastar a tela para um lado e outro para visualizar as informações. Mas porque então isso acontece? Simples, como a tecnologia está sempre em evolução, temos que pensar que os códigos e as ferramentas se modificam, o que passou a uma semana já se torna velho no meio digital, então é essencial buscar estar uma semana a frente sempre, encontrar o melhor forma de deixar a navegação do seu usuário a melhor experiência possível, por isso da importância de entender o porque de ter um site responsivo.
Houveram algumas modificações de um tempo para cá no estilo dos sites, antigamente o grande barato era o site em flash, onde menus, banners tudo era animado, mas com a entrada dos navegadores na vida das pessoas e principalmente o Google, a busca pelas primeiras páginas do navegador ficaram constantes e com isso sentiu-se a necessidade de ter um site que fosse lido da melhor forma por esse navegador, coisa que era impossível com o site em flash, já que o buscador lia aquele site como se fosse apenas uma imagem, por não conseguir acessar seu código fonte(a linha de códigos que mostra tudo o que seu site tem, tais como nome das imagens, textos e etc).
Após a saída do site em flash, começaram a se focar em site em HTML e CSS, linhas de códigos que o Google lê com bastante facilidade e que aumentam bastante a velocidade do carregamento do site. Mas ai chegaram no mercado com grande força os smartphones e tablets, ocasionando uma revolução na era digital, e todo esse frisson por querer ter um celular com a tela touch fez com que o mercado se modificasse, tendo que começar a apresentar uma experiência melhor para esses novos usuários, para isso atualizações nas linhas de códigos acima tiveram que ser feitas, facilitando para os desenvolvedores criarem sites visualmente mais bonito e principalmente “responsivos”.
Antes de explicar melhor o que é e como funciona um layout responsivo, vou mostrar alguns gifs abaixo que ilustrem bem como funciona:
Já nesta primeira imagem, vocês conseguem ver com clareza a diferença de um para outro, nela vimos um layout trabalhando com porcentagens e outro com px (pixels), e que acontece quando colocamos porcentagens ao invés de pixels, o site quando diminuído para uma tela do tamanho do celular se adapta mantendo seus itens na mesma proporção visualizada no desktop (PC), assim mantém um visualização clara dos conteúdos, imagens e ícones apresentados naquele determinado site. Abaixo mais alguns gifs que mostram os diversos tipos de itens que devemos prestar atenção na hora de criar um site responsivo.
Mas porque pensar então tanto no Smartphone ao invés de criar um site bonito para o PC, já que a tela é maior e os elementos ficam mais visíveis e bonitos de serem mostrados. Simples, o acesso em sites por Smartphones aumentaram 60% de alguns anos para cá e essa crescente não vai parar tão cedo, já que as pessoas estão passando muita mais tempo navegando por dispositivos mobile (Qualquer dispositivo que você consiga utilizar enquanto caminha) do que PC´s, isso mostra o tamanho da importância da sua empresa estar preparada para entregar a melhor experiência em seu site. Por isso que atualmente a coisa que mais se houve é o tal do Mobile First, que nada mais é que pensar no usuário do mobile antes do usuário que acessará pelo desktop, pois esse usuário merece uma atenção e uma experiência incrível de navegação.
Abaixo segue alguns exemplos de sites responsivos desenvolvido pela Gravidade.Agency:
