Com o crescimento da variedade de dispositivos onde os websites são visualizados (laptops, tablets, netbooks, celulares, desktops com tela pequena, iMacs com telas gigantescas, segundo monitor etc.), seria enlouquecedor desenhar múltiplas versões de um mesmo site que suprissem cada uma dessas variações de tamanho de tela e cada uma das resoluções de tela disponíveis no mercado.

O Responsive Web Design é uma das soluções técnicas para esse problema: programar um site de forma que os elementos que o compõem se adaptem automaticamente à largura de tela do dispositivo no qual ele está sendo visualizado.

Um design responsivo inclui:

• Adaptar o layout da página de acordo com a resolução em que está sendo visualizada.
• Redimensionar as imagens automaticamente para que caibam na tela e para que não sobrecarreguem a transferência de dados em um celular, por exemplo.
• Simplificar elementos da tela para dispositivos móveis, onde o usuário normalmente tem menos tempo e menos atenção durante a navegação.
• Ocultar elementos desnecessários nos dispositivos menores.
• Adaptar tamanho de botões e links para interfaces touch onde o ponteiro do mouse é substituído pelo dedo do usuário.
• Utilizar de forma inteligente recursos mobile como geolocalização e mudança na orientação do aparelho (horizontal ou vertical).

Uma variação do “Responsive Web Design” é o “Adaptive Web Design”, uma versão um pouco simplificada da primeira. A diferença, no segundo caso, é que o layout se adapta para três ou quatro larguras de tela específicas — e não pixel a pixel, como no primeiro caso.