Pourquoi adopter Bootstrap pour développer son site ?

Guillaume - 19/05/2015

Créé en 2011 par Mark Otto et Jacob Thornton, deux développeurs chez Twitter, Bootstrap est devenu en peu de temps un framework CSS de référence. Les CSS, pour Cascading Style Sheets, servent à mettre en forme (couleur, police, positionnement..) des pages web. Nous pouvons comparer Bootstrap à une boîte à outils du développeur propice au démarrage rapide et efficace un site web. D'ailleurs, le mot bootstraper est à l’origine de l’expression “Bootstrap”, qui signifie amorcer un projet. Développé sous licence MIT (licence open-source), Bootstrap permet aux développeurs de l’utiliser, le modifier et le distribuer librement.

Bootstrap

Les deux développeurs de Twitter sont partis du principe que tous les sites web ont des besoins identiques de développement au départ. Pour cela, Bootstrap propose une panoplie de codes HTML et framework CSS prêts à l’emploi et aussi des composants JavaScript prédéfinis utilisant la bibliothèque jQuery.

QU’EST-CE QU’UN FRAMEWORK ?

Un site internet c’est comme une voiture. Pour la créer, il faut de multiples matériaux que l’on imbrique pour former un véhicule prêt à rouler. En grande majorité, les constructeurs automobiles font appel à des sous-traitants afin de livrer les matériaux nécessaires afin de gagner du temps et de l’argent. Concernant un site internet, c’est la même chose. Au lieu de sous-traiter à des fabricants de pneumatiques ou de moteurs, le développeur utilise des frameworks. Il faut le voir comme un orchestre de composants mis à disposition, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie l’architecture d’un site internet, logiciel ou application.Par exemple, nous devons faire du routage pour un site, nous prenons un composant déjà tout prêt et qui a fait ses preuves et nous l'utilisons : gain de temps et fiabilité. L'utilité d'un framework est d'éviter de passer du temps à développer ce qui a déjà été fait par d'autres, souvent plus compétents.

Aujourd’hui, pour avoir un site web optimal, il faut qu’il soit responsive, c’est-à-dire modulable selon tous les types d’écrans (smartphone, tablette tactile, ordinateur, TV). L’enjeu est que la structure du site reste cohérente. C’est pourquoi Bootstrap a initié un système de grille. Il s’agit tout simplement d’un découpage en cellules de mêmes dimensions. On peut alors décider d'organiser du contenu en utilisant, pour chaque élément, une ou plusieurs cellules comme le démontre le schéma ci-dessous.

grille Bootstrap

Un exemple de grille Bootstrap @blog.netapsys.fr

La grille Bootstrap comporte par défaut 12 colonnes comme l’illustre le schéma précédent. Cependant, il faut savoir qu’elle est flexible et extensible dans la mesure où l’on peut réduire le nombre de colonnes ou en insérer de nouvelles dans chaque colonne existante.

Quand un utilisateur diminue ou élargit une page web, que se passe-t-il pour ces éléments ?

Le système Bootstrap possède quatre tailles de grilles prédéfinies pour que la page se module suivant la taille de l’écran selon deux hypothèses : soit les éléments se redimensionnent en restant positionnés, soit ils s'empilent quand la fenêtre devient plus étroite et se positionne côte à côte quand elle s'élargit. Pour illustrer nos propos, regardons comment le site Team Officine - que nous avons développé intégralement - réagit selon trois tailles (format mobile, format tablette tactile, format laptop).

team officine smartphone responsive
Format smartphone
team officine tablette responsive
Format tablette

team officine laptop responsive

Format laptop

En offrant à la page web une ergonomie cohérente quelque soit le format et le support, nous pouvons dire que le site est responsive. Mais il n’y a pas que cette approche, certes essentielle, à prendre en compte. Depuis 2013, Bootstrap permet au développeur de s’orienter vers une nouvelle directive, celle du Mobile First. Complémentaire au Responsive Design, il a pour but de bâtir une structure et un web design conçus d'abord pour les smartphones et les tablettes plutôt que pour les ordinateurs.Le Mobile First permet de réfléchir à ce qui est important dans le site et à garder l’essentiel pour les petits supports qui sont de plus en plus utilisés pour naviguer sur des pages web. Puis, lors du passage du site internet sur des écrans plus grands (tablette tactile, puis ordinateur), on ajoute ce qui peut être considéré comme secondaire.

Quelles spécificités la documentation de Bootstrap recouvre-t-elle ?

Cette documentation spécifique à Bootstrap propose des templates de composants classiques du web clé en main. Nous pouvons ainsi voir la documentation comme une bibliothèque où l’on pioche les composants qui nous intéressent : des tableaux, formulaires, boutons... Mais aussi des composants avancés comme des barres de navigation, des modals, des carrousels...

composant javascript carousel

Composant JavaScript carrousel © capture écran getbootstrap.com/javascript/#carousel

Le système de classe de Bootstrap permet d’optimiser l’intégration du site en utilisant des pré-processeurs CSS à l’image de Less et Sass. Ces derniers accordent une plus grande liberté dans la syntaxe, mais sans en changer le comportement fondamental du CSS.

LES POINTS FAIBLES RECENSÉS

Tous les avantages de ce framework ont un prix. De nombreux composants disponibles dans Bootstrap sont déjà chargés sur le site alors qu’ils n’ont pas systématiquement une utilité. D’autre part, il ne s’agit pas d’un code sémantique. Bootstrap est principalement composé de balises < div > (balises neutres).

Dernier point que l’on peut recenser : sa popularité. En effet, de nombreux sites web intègrent Bootstrap sans faire de quelconque ajustement. Au final, la ressemblance se fait sentir.

Chez Escale, nous prenons en compte ces points faibles et après deux ans d’utilisation, avons développé une véritable expertise sur ce framework. Nous utilisons Bootstrap pour amorcer nos projets web en les façonnant pour rendre l’expérience unique. C’est le cas, par exemple, du projet îlink-Asso, association nantaise qui avait besoin d’un site internet pour communiquer sur son activité.


Et si on parlait de vous ?

Vous avez un projet de site web ? Une problématique technique à nous soumettre ?
Dites-nous en plus : nous sommes impatients de découvrir votre projet !

escale © 2017 | Startup Palace - 18 rue Scribe - 44000 Nantes France | Proudly built on GestionAIRMentions Légales