Technique du « Responsive Design »

Matthieu Lerat - 9/11/2011

Avec la multiplication des plateformes, il devient de plus en plus compliqué de trouver des solutions pour concevoir des interfaces adaptées à chaque terminal. La prolifération des formats d’écran desktop, mobile et tablette (avec pour chacun de multiples tailles d’écrans) implique qu’un seul site peut être potentiellement affiché sous une dizaine de dimensions différentes. Comment garantir un affichage correct quel que soit le cas ?

Or il existe une technique appelée « Responsive Design » qui permet de répondre en partie à ces problématiques ; et il serait important de s’y intéresser !

Le Responsive Design, qu'est-ce que c'est ?

Responsive Design :  Une grille flexible pour créer une présentation de l’information souple et adaptable (source : « A flexible grid to create a responsive and adaptive layout »)

Ces dernières années, différentes versions d’un site étaient disponibles et l’utilisateur était redirigé vers la version du site qui correspondait le mieux à son mode d’affichage. Par exemple, facebook.com qui redirigerait sur m.facebook.com.

Le principe du Responsive Design est de ne proposer qu’une seule URL avec une interface qui s’adapte en fonction de votre écran en exploitant différentes feuilles de styles CSS. Il s’agit d’une nouvelle façon de penser les interfaces web où la mise en page, les marges, les tailles de typo et d’image ainsi que la disposition des éléments s’adaptent en fonction des dimensions du navigateur.

Voici un exemple avec l’affichage d’un même site sous mobile, tablette et ordinateur :

Les avantages

  • Permet d’éviter de créer un site web en plus d'un site mobile optimisé pour un mobile spécifique. Un site est maintenant censé être optimisé pour tous les terminaux, quels que soient les dimensions d’écrans.

Les  limites

  • Une « multi-conception » est nécessaire afin d’organiser les mêmes informations dans différents cas.
  • Ce type d’interface demande un minimum d’expertise et surtout un gros travail de préparation en amont pour « penser » une interface en plusieurs largeurs.

Notons que cette technique repose sur du développement Javascript ou CSS3 (avec les « medias queries ») permettant de définir une feuille de style en fonction de certaines propriétés du navigateur.

 

En savoir plus sur le responsive design

Quelques sites à visiter

Plus d’informations

Fermer