Le Responsive Web Design regroupe une série de techniques de conception graphique et de développement permettant de créer un site qui pourra s'auto-adapter en fonction de la taille d'un écran.


Ordinateur de bureau, tablette, smartphone, télévision connectée...

Son objectif consiste à prévoir tous les formats de moniteur, et proposer des modes de lecture et de navigation pour chacun d'eux.
Source: Journaldunet

Trois techniques Responsive Web Design

Le concept de Responsive Web Design (RWD) s'appuie sur trois éléments techniques :

• Image adaptatives
  Les images ayant un besoin de flexibilité sont redimensionnées en unité relative, afin de prévenir un éventuel débordement du contenu en dehors de son élément conteneur.
• Media queries
  Un site web RWD utilise la technologie CSS3 media queries, une extension de la règle @media. Il permet à la page d'utiliser des règles CSS différentes en fonction des caractéristiques du terminal de consultation. Le plus communément il s'agit des règles appliquées en fonction de la largeur du terminal. Ces différentes largeurs sont appelées "points de rupture" et correspondent à 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.
• Grille fluide
  Le concept de grille fluide consiste en un dimensionnement relatif des différents blocs de la page. Les unités relatives comme les pourcentages ou les EMs sont assez adaptées pour cela, beaucoup plus que les unités absolues comme les pixels ou les points.

Pour appréhender au mieux un projet responsive, il est important de constituer au préalable des familles de résolutions. Généralement, on constitue 2 à 3 types de gabarits :

• <600 px pour les Smartphones
• entre 600px et 900px pour les tablettes orientées portrait
• plus de 900px pour les ordinateurs de bureau