Abra um site no seu telemóvel, depois num portátil e, por fim, numa TV. Se a visualização estiver correta em todos os três ecrãs, sem ter de forçar a vista, significa que foi desenvolvido com um design responsivo. Esta abordagem permite que um único código-fonte adapte o seu layout, imagens e tipografia a qualquer ecrã em que seja apresentado.

Ethan Marcotte cunhou o termo em 2010, quando a navegação móvel estava em plena expansão e os designers se viam confrontados com uma escolha: criar sites separados para cada dispositivo ou criar um que se adaptasse a todos. O design responsivo venceu. As principais ferramentas são as grelhas fluidas, as imagens flexíveis e as media queries. Uma media query pergunta ao browser qual a largura da viewport e aplica diferentes regras CSS consoante a resposta.

O que torna um design responsivo?

• Grelhas fluidas que utilizam percentagens em vez de pixels fixos.
• Imagens flexíveis que se adaptam ao tamanho dos seus contentores.
• Consultas de suportes que aplicam pontos de interrupção para diferentes tamanhos de ecrã.
• Objetivos otimizados para o toque em layouts para dispositivos móveis

O objetivo não é apenas adaptar o conteúdo a um ecrã pequeno. É preservar a legibilidade, a hierarquia e a usabilidade em todos os contextos. Um layout de três colunas para desktop pode reduzir-se a uma única coluna num telemóvel. Um menu hambúrguer substitui uma barra de navegação completa. Um bom design responsivo parece inevitável, como se o website sempre tivesse sido concebido para ter este aspeto no seu dispositivo.