Dossier : Le “responsive design”

L'optimisation de votre site internet sur toutes vos plateformes

Le "responsive design" est une technique basée sur le couple de language HTML 5/ CSS3 qui permet de créer des sites qui s'adaptent à la plateforme de navigation de l'internaute. Autrement dit, que vous soyez sur un smartphone, une tablette, un notebook ou un poste fixe avec écran 30 pouces, le site internet proposera une ergonomie de page adaptée à cet écran.

Le “responsive design” est la rĂ©ponse pour adapter un site internet Ă  la multiplicitĂ© croissante des plateformes de navigation internet dont les rĂ©solutions varient de 2 Ă  30 pouces.

L’intĂ©rĂȘt du responsive design repose sur une optimisation de chaque lecture sur l’ensemble des contenus du site :

  • Les Ă©lĂ©ments de navigation restent “clickables” naturellement, sans nĂ©cessité de zoom, aussi bien sur une tablette ou un smartphone avec Ă©cran tactile ;
  • Dans le responsive design, les images de contenu s’adaptent Ă  la largeur de l’Ă©cran, quelle que soit sa taille, jusqu’Ă  la rĂ©solution maximum proposĂ©e, permettant ainsi aux Ă©crans 30′ de ne pas voir des images en timbres postes ou des images pixelisĂ©es ;
  • Les contenus textes restent lisibles et s’adaptent aux rĂ©glages de l’utilisateur ;
  • La structure des contenus peut ĂȘtre personnalisĂ©e pour chaque plateforme, en affichant un menu diffĂ©rent, mais il est aussi possible de simplifier une page en retirant des blocs, ce qui garantit une efficacitĂ© du rĂ©fĂ©rencement qui ne se rĂ©partira pas sur plusieurs URL pour un mĂȘme contenu.

responsive design

Pour illustrer ce propos, prenons comme exemple le site responive design d’Audacy

Le site est construit sur la base technique adaptĂ©e aux Ă©crans de 1024px de large mais s’adapte :
  • Les Ă©crans larges bĂ©nĂ©ficient d’un site optimisĂ© pour les Ă©crans de 1280px permettant de profiter d’images de 900 px sur le portfolio ;
  • Les tablettes profitent de l’ensemble des contenus du site mais avec une ergonomie adaptĂ©e pour une navigation en hauteur de 720px de large ;
  • Les smartphones bĂ©nĂ©ficient d’un contenu spĂ©cifique optimisĂ©, limitĂ© au minimum vital, pour une lecture en dĂ©placement. Deux rĂ©solutions sont dĂ©finies : une pour la lecture en largeur (320px) et une en hauteur (240px).

responsive design

Cette technique de responsive design vient concurrencer la mise en place de sites “mobiles”, qui nĂ©cessitent le dĂ©ploiement complet d’une solution de gestion de contenu et la mise en place de sous-domaines.

En parallĂšle de cette technique responsive design liĂ©e Ă  la mise en page des contenus pour support mobiles, il est dĂ©sormais possible de profiter des fonctionnalitĂ©s tactiles des smartphones et tablettes. En effet, des versions mobiles des librairies javascript voient le jour, permettant l’utilisation d’outils de navigation non plus au click, mais au dĂ©placement des doigts.

DĂ©couvrez d’autres sites utilisant le “responsive design”