Site responsivo [parte 1]: o que é e qual sua importância

Antes de iniciarmos o assunto, uma primeira pergunta: você acessou este conteúdo através de um smartphone, pc ou tablet? A pergunta parece irrelevante, mas tem tudo a ver com o assunto site responsivo.

O que significa o termo “site responsivo”?

Site responsivo é quando um website ajusta seu layout de acordo com o dispositivo do usuário. Seja um computador, smartphone ou tablet, o objetivo é melhorar a experiência do usuário, pois como cada dispositivo possui características próprias, é importante que o site atenda a estas especificidades.

Por que é importante ter um site responsivo?

Você já deve ter passado por esta experiência: estava navegando com seu celular e acessou um site onde os textos, imagens e botões eram pequenos demais, muito difíceis de ler e clicar. Caso já tenha tido esta experiência, você sabe que ela não foi nada positiva. Tratava-se de um site não responsivo.

A probabilidade de um visitante que navega com smartphone desistir e sair do site do seu negócio, caso este não seja responsivo, é enorme, justamente pelo fato da dificuldade em ler, navegar. Ou seja, a experiência é muito ruim, e isso impacta diretamente sobre os visitantes do seu site.

Ter um site responsivo é cada vez mais importante. Atualmente mais de 50% dos acessos a sites no mundo ocorre através dos dispositivos móveis: smartphones e tablets. Estar fora deste cenário significa perder, potencialmente, 50% dos possíveis visitantes ao seu site.

Como funciona um site responsivo?

Um site responsivo é projetado de modo a identificar a largura da tela do dispositivo que o usuário está utilizando ao acessá-lo. A partir desta informação, ele se ajusta a esta tela. Textos, imagens, botões e demais elementos se ajustam de modo a tornar a experiência do usuário ideal para aquela determinada tela. Abaixo ilustramos de modo simplificado a diferença entre um site não responsivo e um site responsivo.

Perceba como em um site não responsivo os elementos “encolhem” para se encaixar na largura da tela do dispositivo. Tudo fica muito pequeno, dificultando a navegação. Já no layout ajustável, os elementos se organizam de formas distintas, mantendo tamanhos e disposição coerentes com a largura do dispositivo.

Além dos sites responsivos, existem também os sites mobile. Embora seja fácil de confundir ambos, eles não significam a mesma coisa.

Entenda e diferença entre sites responsivos e sites mobile

Um site responsivo, como dito anteriormente, ajusta-se a largura da tela do dispositivo utilizado para acessá-lo. Ou seja, o layout do site é um só, porém dependendo do dispositivo ele se organiza atendendo ao dispositivo.

Um site mobile é projetado especificamente para um dispositivo móvel. Ou seja, o site pode ter um layout para computador desktop e um outro layout completamente diferente para smartphone ou tablet. E como se fossem 2 sites projetados de modo independente.

O ideal é que o site seja responsivo, pois assim há mais garantia que, independente do dispositivo utilizado, este mantenha a experiência do usuário ideal.