Responsive design, ou comment afficher au mieux votre site sur n’importe quel support… Bootstrap est une bibliothèque HTML, Javascript et CSS qui permet d’adapter un site sur n’importe quel type de plateforme, du plus petit mobile au plus grand écran de bureau.

Maintenir ou créer un site est une entreprise compliquée quand on voit la multiplicité des différents supports. Il faut alors trouver une solution pour que le contenu soit lisible sur toutes les plateformes. Bootstrap propose l’une des meilleure solutions du moment.

Auparavant, nous n’avions que les sites Web, à afficher sur des écrans de bureau dont la taille n’a jamais cessé d’augmenter. La difficulté pour les intégrateurs et concepteurs de sites était donc de prévoir un site qui pouvait être vu sur le plus petit dénominateur commun, en général avec une largeur de 1024 pixels. Qui peut le moins peut le plus, dans ce cas, et cette largeur assez standard suffisait bien.

On a bien eu, en parallèle, une tentative de percée du web mobile avec le Wap, mais soyons sérieux, ça n’a jamais vraiment pris. Et pour cause…

Puis, avec l’arrivée d’iOS et d’Android, on a eu des navigateurs web sur nos téléphones. Et là, tout a définitivement changé. En effet, les sites prévus pour les grands écrans de bureau avaient alors beaucoup de mal à s’afficher sur les petits écrans de smartphones. Sans compter l’ergonomie déplorable, avec l’habitude des menus déroulants au survol de la souris, très mal interprétés sur une interface tactile.

Responsive design, des sites dédiés aux mobiles ?

Certains ont alors développés des versions de leurs sites spécifiquement dédiées aux mobiles, tournant par exemple avec Jquery Mobile. Mais franchement, maintenir deux versions du même site, ça n’est pas très pratique.

Bootstrap propose un autre type de solution. Vous n’aurez qu’un seul site. Mais en fonction du type d’écran sur lequel il va s’afficher, certains éléments de la page vont changer de largeur, certains vont se déplacer, les polices de caractères peuvent changer de taille… bref, tout le contenu va s’adapter en fonction des possibilités d’affichage.

Bootstrap profite des dernières avancées du HTML5 et des CSS. Le point le plus important est l’utilisation, en CSS, des media queries. Le principe est simple : votre fichier CSS contient du code qui détermine des styles CSS spécifiques à certaines largeur d’écran. Ainsi, vous pouvez dire qu’un bloc va faire 1024 pixels de large sur un écran de bureau, il en fera 1024 sur une tablette en mode paysage, 800 en mode portrait, 640 sur un mobile, etc.

Comment ça marche ?

Bien évidemment, Bootstrap va vous mâcher le travail. Son principe est assez simple – même si la réalisation ne l’est pas forcément. Chaque bloc est alors virtuellement découpé en 12 colonnes, et chaque bloc à l’intérieur d’un bloc est aussi découpé en 12 colonnes. De plus, il existe cinq largeurs d’affichage de base :

  • XS pour les smartphones en mode portrait.
  • SM pour les smartphones en mode paysage.
  • MD pour les tablettes en mode portrait.
  • LG pour les tablettes en mode paysage.
  • XL pour tous les grands affichages, comme les PC de bureau.
  • SM pour les smartphones en mode paysage. MD pour les tablettes en mode portrait.
  • LG pour les tablettes en mode paysage. XL pour tous les grands affichages, comme les PC de bureau.

Quand on construit un bloc d’affichage, on lui attribue alors plusieurs styles, qui combinent à la fois le type de largeur et le nombre de colonnes pour cette largeur. Ainsi, un bloc qui possède les styles lg-8 md-6 sm-4 xs-12 s’affichera ainsi :

  • Écrans de bureau et tablettes en mode paysage : 8 colonnes sur 12, donc 2/3 de la largeur de la page.
  • Tablettes en mode portrait : 6 colonnes sur 12, donc la moitié de la largeur.
  • Smartphones en mode paysage : 4 colonnes sur 12, donc 1/3 de la largeur de la page.
  • Smartphones en mode portrait : 12 colonnes, donc 100% de la largeur.

Les autres blocs sont traités de la même façon. Ainsi , un bloc de navigation pourra se déplacer en dessous du bloc de contenu sur les petits écrans, alors qu’il sera à droite ou à gauche si la place le lui permet.

L’ergonomie avant tout

Bootstrap permet aussi d’uniformiser l’ergonomie générale. Il existe en effet de nombreux modèles qui permettent de réaliser par exemple des formulaires complexes qui seront tout à fait accessibles même sur le plus petit des smartphones. Et cela est très important pour votre site web : sachez que Google déréférencera votre site si ces règles d’ergonomie ne sont pas correctement respectées.

Cette librairie dispose de bien d’autres avantages. Depuis sa création, elle a bien évolué, et Répond à toutes les problématiques, à ma connaissance, qui peuvent se présenter pour un site responsive design.

Oh, c’est important de le noter : Bootstrap est gratuit et open-source. Pourquoi vous en priver ?


1 commentaire

IPSH · 29/03/2020 à 21:09

Bootstrap, une fois qu’on a réussi à plonger dedans, c’est franchement sympa et on prend des automatismes vis à vis des noms des classes, ça fait gagner un temps fou.

Laisser un commentaire

Emplacement de l’avatar

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *