Bonjour à tous !

Aujourd’hui, je vais vous présenter le terme de responsivité (ou responsivity pour nos amis anglophones).

C’est quoi ?

La responsivité n’a rien à voir avec une quelconque responsabilité. Il s’agit tout simplement, comme l’image l’indique, d’adapter un support à de multiples écrans. Que ce soit sur un tout petit mobile, sur une tablette, ou sur un écran de cinéma votre site doit être visible sans difficulté, sans scroll inférieur. La taille doit s’adapter de manière à ce que le zoom ne soit pas utilisé.

Comment ça marche ?

Aujourd’hui de nombreux outils sont disponibles pour permettre aux développeurs de concevoir un site des plus responsives. La technique par défaut est le CSS qui dispose d’une fonction nommée “media queries“. Elle consiste à définir des règles en fonction d’une taille précise par exemple :

” Mon image fait 200 px de hauteur, SI je passe sur un écran faisant plus de 1900 px alors elle fera 400 px de hauteur.”

Ces règles sont totalement malléables et personnalisables.  Il existe cependant (et heureusement) des libraires qui disposent de media queries tout fait, avec lesquelles la simple application d’une classe adapte notre contenu à toute une gamme de taille. Bootstrap par exemple est l’une des libraires les plus connues ayant cet effet.

Pourquoi se prendre la tête ?

Adapter son site pour mobile peut paraître être un plus facultatif, mais détrompez-vous. Il s’agit en réalité d’une chose indispensable ! Pour plusieurs raisons :

  • Aujourd’hui les robots de Google (et autres moteurs de référencement) pénalisent de plus en plus les sites qui ne s’adaptent pas au téléphone mobile (et un jour forcément pour les sites qui ne s’adaptent pas non plus aux très grands écrans)
  • De plus, au fil des années, le nombre de personnes consultant les sites depuis un téléphone mobile grandit de façon non considérable !

Conclusion

Pour conclure, nous pouvons dire que la responsivité n’est pas une chose évidente mais qu’en raison de son utilité de plus en plus indispensable, devient l’objet principal de grande librairie telle que Bootstrap ou Materialize. Se prendre la tête en devient indispensable pour la pérennité de votre site que ce soit en matière de référencement ou d’accessibilité.

 

Je vous abandonne sur ces bons mots et vous souhaite à tous une bonne continuation,

Adam MARONGIO