Sabe aquele site que você abre no celular e a tela até fica ajustada, mas com letras tão pequenas que você precisa utilizar o zoom para ler? Então, esse não é um site responsivo.
Sites responsivos são inteligentemente projetados para serem adaptados a qualquer tipo de resolução, sem distorções. Um design responsivo identifica qual é a largura de cada dispositivo e, dessa forma, consegue determinar o quanto de espaço está disponível e como a página será mostrada para que esses espaços sejam aproveitados da melhor forma. Também ajusta as dimensões das imagens, das fontes e dos demais elementos de uma página para que eles não fiquem desproporcionais.
Em termos bem práticos, é aquele site que, com o mesmo layout, se ajusta perfeitamente a qualquer resolução de forma harmônica, passando a mesma experiência de leitura ao usuário, independentemente do dispositivo pelo qual está sendo acessado.
Uma outra confusão comum acontece entre sites responsivos e versões mobile de um site. Há algumas diferenças entre essas duas definições, como veremos abaixo.
Diferenças entre um site responsivo e uma versão mobile
Responsivo é todo o site projetado para ser adaptado para qualquer tipo de tela. É uma única estrutura de códigos que funciona em diferentes resoluções.
Um mobile template é um pouco diferente, é um segundo site separado, feito exclusivamente para ser aberto em determinados tipos de dispositivos.
O recomendado, por diversos motivos, é que o site seja responsivo. No entanto, se ainda não for possível ou se você estiver com um projeto em andamento para essa adaptação, uma versão mobile ou um plugin que adapte para dispositivos móveis é uma opção interessante também.