O conceito de responsividade, na psicologia, refere-se a atitudes compreensivas que visam, através do apoio emocional e da bi-direcionalidade na comunicação, favorecer o desenvolvimento da autonomia e da auto-afirmação.

Na Web o termo responsividade significa que o site é utilizável em vários dispositivos diferentes, por exemplo:  Smartphones, Tablets, Desktops, etc.

Antes de começarmos falar sobre responsividade web fica uma dica de ouro: Pense sempre em fazer um site responsivo, caso contrário, você terá fazer que um site para cada tipo de dispositivo que o seu visitante utiliza.

Existe um órgão que gera padrões para páginas web, visando permitir que todas as páginas criadas na linguagem HTML, por exemplo, sejam compatíveis com os diversos navegadores existentes no mercado.

Confira os padrões da W3C clicando aqui.

Visando exemplificar os conceitos associados à responsividade, utilizamos algumas imagens feitas pela Froont:

DESIGN RESPONSIVO VS DESIGN ADPATADO

São bem parecidos, porém existe uma pequena diferença. Na animação você consegue ver que o responsivo altera o tamanho da tela imediatamente, enquanto o adaptado faz essa alteração conforme ela aumenta/diminui com um maior tempo de respostas.

MOBILE FIRST VS DESKTOP FIRST

O conceito de mobile first é bem simples ao invés do seu site ser construido primeiro no desktop e depois adaptado ao mobile é justamente ao contrario primeiro se faz o site no mobile e depois no desktop.

LARGURA MÁXIMA

Algo que deve ser observado nesse tipo de projeto gráfico é a largura máxima. Existem duas formas de proceder:

1 – Defina até qual largura o seu site fará adaptação do layout, excedendo essa largura ele deixará de se adaptar ao tamanho da tela, e não exibirá as informações da melhor forma.

2 – Defina a largura do site levando em consideração um tamanho percentual da tela do dispositivo. Assim, independente do tamanho, ele sempre de adaptará ao dispositivo do visitante.

UNIDADES ESTÁTICAS VS UNIDADES RELATIVAS

Utilize o máximo possível de unidades relativas, que mudam de acordo com o tamanho da tela. Evite usar valores fixos, por exemplo: ao invés de definir que o tamanho de uma área do site é de 1000px, prefira definir que ele terá 100% (que é uma unidade relativa). Unidades relativas tem como conceito se adaptarem a dispositivo que estão.

Com essas pequenas dicas, o seu site ficará muito melhor para os visitantes!