Créée par Twitter en 2011, Bootstrap est un framework, une collection d’outils utile à la réalisation de sites web et, d’applications orientés interface graphique. Il a su s’imposer comme référence. Mais est-il pour autant un indispensable pour la réalisation de chaque site web ?
Tout commence au début d’un projet
Tout projet commence avec un client, avec qui nous échangeons, nous construisons des prototypes qui évoluent en maquette, majoritairement desktop, puis mobile, parce que le client n’arrive pas à se projeter (et c’est normal, ce n’est pas son métier !).
Et c’est là qu’il y a un premier couac ! Les graphistes ne s’aperçoivent parfois pas de certaines subtilités (ou rigidités) de Bootstrap et proposent des maquettes, jolies, harmonieuses, équilibrées qui sortent des grilles proposées par Bootstrap et lorsque l’intégrateur les passe en responsive cela devient parfois un casse-tête monumental pour l’intégration, surtout si le client et le DA sont adeptes du « pixel perfect ».
Il faut donc pour cette étape que le concepteur prenne en compte les comportements de blocs proposés par Bootstrap et que le graphiste soit bien sensibilisé à la grille, aux pictogrammes, aux éléments pensés par Bootstrap pour ne pas proposer des écrans allant dans des logiques opposées.
Cela signifie que si la logique mise en place par Bootstrap n’est pas prise en compte dès la conception des maquettes, cela engendrera une perte de temps. L’intégrateur surchargera le fonctionnement du Framework, ce qui alourdira le chargement.
Est-il optimal ?
L’utilisation de Bootstrap a un impact sur les performances. En terme de taille, pour le CSS et le JS les fichiers, même minifiés restent lourds :
- bootstrap.min.css : 157ko
- bootstrap.min.js : 59ko
De plus Bootstrap se base sur un code lourd où l’on n’hésite pas à rajouter des éléments HTML pour reproduire la mise en forme de la maquette.
Bootstrap va apporter un grand nombre de composants mais quel est le pourcentage de ce que vous allez utiliser ? J’ai vu un grand nombre de sites utiliser Bootstrap juste pour l’utilisation de sa grille… quel est l’intérêt de charger tout plein d’éléments pour en utiliser qu’une infime partie ?
Bootstrap est tout de même très à jour sur les technologies. Depuis sa version 4, le code a subi une réécriture pour utiliser le préprocesseur SASS, en laissant tomber LESS. Il supporte également flexbox.
Dans sa version 5, il va également abandonner JQuery pour faire place à du javascript natif, ce qui correspond à la tendance d’utiliser les standards ECMAscript.
Est-ce un gain de temps ?
À mon sens Bootstrap peut être un gain de temps lorsque l’on développe des interfaces pour des outils, des Back Offices, des applications et qu’on n’a pas trop le temps de passer par la phase de création.
Dans ce cas, il peut se révéler être un formidable outil car la grande majorité des besoins ont déjà été pensés. Il assure également une grande compatibilité entre les différents navigateurs.
Alors, que devons-nous faire ?
Chaque projet a des contraintes, des objectifs et surtout un coût. Il faut donc analyser l’ensemble et trouver la meilleure réponse technique qui ravira le client et les utilisateurs finaux.
Bootstrap, bien utilisé, est un bon outil. Mais ce n’est pas parce qu’on l’utilise qu’il faut passer outre l’apprentissage de la structure HTML/CSS.
Même si je suis plutôt adepte de l’Atomic Design, mon côté dinosaure et artisan du web ira plus facilement à faire une intégration spécifique à la demande du client. Depuis plusieurs années à intégrer, j’ai pu identifier certains besoins client, et me créer en conséquence une librairie de classe que je réutilise, si besoin, dans mes projets. L’utilisation des préprocesseurs me permettent également de bien segmenter mon code et d’appeler le nécessaire en fonction des pages et pas un ensemble d’éléments qui ne servira pas dans la page en question.
Est-il utile d’utiliser Bootstrap sur un site vitrine de 3 pages ? clairement non !
Est-il pertinent d’utiliser Bootstrap pour réaliser une interface de Back-office ? Oui, sans aucun doute.
Les questions à se poser sont :
- Est-ce que Bootstrap va nous être utile ?
- Est-ce qu’il va vraiment nous faire gagner du temp ?
- Allons-nous devoir faire de nombreuses surcharges pour avoir le rendu attendu ?
- Quel pourcentage de Bootstrap allons-nous utiliser ?