Twitter Bootstrap, un cadre de développement de plus en plus incontournable

Les débats de la dernière année sur la pertinence de développer des sites Web en format Responsive Web Design (RWD) – traduit en français par « réactif » ou « adaptatif » selon les auteurs – ont été forts intéressants, voir relevés. Le souci d’optimisation de la performance d’un site, plus particulièrement en ce qui concerne la rapidité de téléchargement de ses composantes, et de son expérience usager représentent des préoccupations saines pour tout développeur. Entendons-nous pour affirmer que, dans certains cas, le développement d’un site en format réactif représente un choix fort pertinent.

Les statistiques sur l’adoption des tablettes viennent valider cette décision, pour la rendre souvent carrément simple… En effet, selon une toute récente étude d’Ipsos, environ un propriétaire de tablette sur dix au Canada considère maintenant cet appareil comme son ordinateur principal (source).

Développement de sites réactifs: les questions initiales à se poser

Le site devra-t-il être géré par un CMS ? Si oui, comment développer les gabarits de gestion de contenu des pages ? L’impact des sites réactifs sur le développement des CMS est encore très peu documenté, et nous nous promettons de revenir ce sujet dans un autre billet futur.

Devons-nous modifier notre processus de conception et de développement ? Les développeurs affirment que oui… Conséquence : les designers graphiques doivent utiliser les références des cadres de développement (ou framework) choisis par les développeurs… L’impact sur le processus de conception de l’expérience usager est évidemment majeur.

Autre question : doit-on développer le site – et particulièrement ses classes de CSS – à partir de zéro ou devrait-on plutôt utiliser un cadre de développement existant ? Si oui, lequel ?

Bien sûr, l’ampleur du projet constitue un premier critère de décision. Pour un microsite d’une page, il est tout à fait pensable de développer les medias queries appropriés à partir de zéro. Pour des sites plus importants et essentiellement « informationnels », l’utilisation de cadres de développement réactifs devient vite critique dans la rentabilité potentielle d’un projet. Votre client, interne ou externe, comprendra-t-il que le site projeté, avec toutes ses classes de CSS pour les 1000 résolutions d’écrans actuelles, multiplie les heures de conception et de développement ? Rien n’est évidemment moins sûr !

Conséquemment, les développeurs, dont nous sommes, se doivent de connaître et de sélectionner un cadre de développement de site réactif approprié. Nous avons choisi Twitter Bootstrap et voici pourquoi.

Une référence incontournable

Aujourd’hui, Bootstrap s’est imposé comme cadre de développement réactif par excellence au même titre que WordPress dans le développement de blogues en 2003 et 2004. Si cette affirmation semble contestable, force est d’admettre que des milliers de développeurs dans le monde réalisent leurs sites Web réactifs en Twitter Bootstrap et que ce cadre de référence devance de loin la compétition. Peut-on en dire autant des autres ? Zurb Foundation ? Voyez ce qu’en dit Google Trends :

graph-barom2

Une vaste librairie de styles et d’éléments graphiques

Bootstrap intègre une vaste librairie de CSS et d’éléments graphiques contemporains et pertinents. Ceci facilite autant la conception que le développement du site comme tel. Un développeur qui connait bien cette librairie est ainsi en mesure de développer des prototypes (ou wireframes) plus rapidement. Menus déroulants, onglets vers le haut, vers le bas et vers le côté, boutons de plusieurs couleurs et de plusieurs tailles, barres de navigation, formulaires, différentes options de positionnement des éléments, fils d’Ariane, systèmes de pagination, vignettes de contenu, barres de progression (progress bar), icônes, etc. La liste est longue !

Bien sûr, tous ces éléments de design reviennent d’un projet à l’autre. Nul besoin d’avoir réalisé beaucoup de sites avec Twitter Bootstrap pour se rappeler de la classe « navbar »…

De plus, une importante communauté de développeurs de gabarits et d’autres outils de « personnalisation » des CSS de Twitter Boostrap s’est construite autour de ces éléments de base. Cela en fait un cadre de développement très flexible, extrêmement complet et très bien documenté. Il existe même des gabarits de PSD contenant une foule de composantes graphiques Twitter Bootstrap (celui-ci, par exemple). De telles librairies raviront autant le développeur que le designer graphique, qui pourront ainsi parler un langage commun.

Le casse-tête des résolutions d’écran

Imaginez-vous en train d’expliquer à votre client ou à votre patron que les résolutions d’écran de 1024 pixels de largeur ne représentent plus que 15 % des visites sur son site et qu’il existe en fait des centaines de résolutions d’écrans différentes aujourd’hui. Imaginez-vous maintenant en train d’expliquer ce que l’usager va voir en 768, en 320, en 1280, en 1920 pixels, etc. « Qu’arrivera-t-il de mon site sur un téléphone mobile !? », s’exclamera votre interlocuteur !

Dans cette jungle de résolutions, de nouveaux standards de développement se sont imposés. Afin de faciliter le travail de conception, Twitter Bootstrap offre justement une liste pré-intégrée de résolutions:

Label

Layout width

Column width

Gutter width

Large display 1200px and up 70px 30px
Default 980px and up 60px 20px
Portrait tablets 768px and above 42px 20px
Phones to tablets 767px and below Fluid columns, no fixed widths
Phones 480px and below Fluid columns, no fixed widths

Simple, non ? Si l’on se fie à ce standard, il devient plus simple de statuer sur le comportement des éléments de contenu. « En dessous de 980 pixels, le bouton de menu pour les appareils mobiles apparait », pourrez-vous alors expliquer à votre interlocuteur.

De plus, avec Bootstrap vous avez l’assurance que les vieux fureteurs comme IE 8, qui est encore très présent dans certains milieux, afficheront tout simplement la résolution par défaut. En effet, Twitter Bootstrap intègre déjà les CSS nécessaires. Pour mieux comprendre cc comportement, nous vous invitons à aller voir cette page avec IE8, puis avec Firefox, avec une résolution de 1440 pixels de largeur (ou plus). Vous verrez tout de suite la page s’adapter.

Pour toutes ces raisons, Twitter Bootstrap est réellement devenu un cadre de développement incontournable.