* Montage PSD2HTML RESPONSIVE DESIGN MOBILE Versailles

Un site web adaptatif (anglais RWD pour responsive web design, conception de sites web adaptatifs selon l'OQLF1) est une notion de conception de sites web qui réunit différents principes et technologies dans laquelle un site est conçu pour offrir  à l'internaute, une expérience de consultation optimale facilitant la lecture et la navigation. l'utilisateur peut ainsi consulter le même site web à travers une large gamme d'appareils ( TV, moniteurs d'ordinateur, smartphones, tablettes,etc.) sans avoir recours au défilement horizontal ou au zoom avant/arrière sur les appareils tactiles particulièrement et avec le même confort visuel, actions qui détériorent considérablement l'expérience utilisateur.

La notion de Web adaptatif repense la façon de concevoir les parcours de navigation sur Internet, puisqu'il ne s'agit plus de concevoir autant de parcours qu'il y a de famille de terminaux mais d'élaborer une seule interface auto-adaptable. Ainsi, les socles techniques et les sources d'information ne sont pas dupliqués. Cela produit des économies d'échelles dans la conception et la maintenance de sites internet bénéficiant de ce mode de conception.

Un site web élaboré sur le principe du RWD2 utilise une extension de la règle @media 5, la technologie CSS3 media queries (en) 3,4,  pour adapter la mise en page à l'environnement de consultation, grâce à une grille fluide dans laquelle se casent les différents contenus de la page6.

Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives telles que les pourcentages ou les EMs sont mieux adaptées pour cela, plus que les unités absolues comme les pixels ou les points6.

Media queries rend possible l'utilisation dans la page de règles CSS différentes en fonction des caractéristiques du terminal de consultation. Habituellement, il s'agit des règles appliquées selon la largeur du terminal. Ces différentes largeurs sont appelées "points de rupture" et cadrent avec un besoin de modifier la mise en page à partir d'un certain seuil critique, pour la facilitation de la navigation et de la lecture du contenu.

Afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur, les images ayant un besoin de flexibilité sont également redimensionnées en unités relatives.

Le concept de RWD, tel que décrit par Ethan Marcotte 7 s'appuie sur les trois éléments techniques cités précédemment.

Les media queries ne servent qu'à apporter quelques modifications dans l'interface, quand l'utilisation de grilles fluides ne permet pas de résoudre tous les èmes liés à l'adaptabilité du produit, selon Marcotte E. Elles sont souvent mises en avant comme l'élément technique principal du Responsive Web Design.