Le principe du responsive web design
 
Alors, concrètement, le responsive web design, qu'est-ce que c'est ? C'est une technique de réalisation de site web, qui permet de faire des sites qui s'adaptent automatiquement à l'espace disponible sur l'écran. En général, on se base sur la largeur de l'écran pour déterminer comment les éléments du site doivent s'afficher :

Organisation des blocs du site en fonction de la largeur disponible

Quand on dispose de moins de place en largeur, on peut mettre moins de blocs côte à côte. Dans ce cas, on les positionne plutôt de haut en bas.
Mais attention, ce n'est pas une règle. Comme vous le voyez, on peut aussi considérer que certains blocs moins importants sont inutiles sur des mobiles et les faire disparaître (vous remarquerez que le bloc gris n'apparaît plus dans la version mobile). On peut aussi, à l'inverse, faire apparaître de nouveaux blocs et outils de navigation sur mobile si on le souhaite.
 
Techniquement, le responsive web design se base sur les Media Queries. C'est une fonctionnalité offerte par le langage CSS, qui permet de mettre en page les sites web. Lorsqu'on fait du responsive web design, on utilise les Media Queries de CSS pour faire en sorte que le design s'adapte à toutes les résolutions d'écran. Je reviendrai sur l'aspect technique un peu plus loin.

En responsive web design, on ne dit pas "on va faire un site mobile, un site tablette et un site ordinateur". On fait un seul site, conçu pour exploiter au mieux la taille de l'écran. L'avantage, c'est qu'on peut ainsi gérer toutes les tailles d'écran d'un coup.