« The need for most people to create front-end code may not even exist in the not-so-distant future. » Zurb, créateur du cadriciel Foundation.
La multiplication des plateformes, et avec elle le besoin de sites adaptatifs, complexifie la vie des développeurs web. Heureusement, depuis quelques mois, une petite révolution est en train de se produire.
Des cadriciels d’interface (interface framework) peuvent simplifier radicalement la production d’interfaces utilisateur.
Qu’est-ce qu’un cadriciel ?
Un cadriciel est un ensemble cohérent de composantes logicielles. Celui-ci permet d’abstraire le niveau le plus technique du codage et d’ainsi multiplier la productivité des développeurs Web.
Deux types de cadriciel
Il existe en fait deux types de cadriciel : les cadriciels back-end et les cadriciels d’interface.
On connaissait déjà les cadriciels du côté back-end (Rails, Django, Symfony, Zend, CodeIgniter). Incontournables, ils permettent d’accélérer dramatiquement la programmation du volet logique d’une application, sans toutefois toucher la présentation de l’interface utilisateur.
Du côté de l’interface, on profitait déjà du cadriciel JavaScript jQuery et de tous les plug-ins compatibles, mais c’était du rapiéçage; il s’agissait de prendre des plug-ins à droite et à gauche et d’essayer de tout faire fonctionner ensemble.
Certains cadriciels d’interface se démarquent particulièrement par le large spectre des besoins qu’ils couvrent : Bootstrap de Twitter et Foundation de Zurb. Les deux permettent notamment d’obtenir une mise en page adaptative. Ils sont également compatibles avec 99% des navigateurs Web en circulation (tous sauf Internet Explorer 6).
Attardons-nous sur Bootstrap, le plus populaire des deux.
Bootstrap, de Twitter
Bootstrap était au départ une librairie de tous les éléments d’interface qu’on trouve sur les applications de la compagnie Twitter. Vous y reconnaîtrez le design de Twitter.com.
Mark Otto, un des deux architectes de ce cadriciel, dit qu’il a transformé Bootstrap en projet à code ouvert pour « help awesome people make awesome shit ». Des milliers de développeurs se sont montrés intéressés. À ce jour, plus de 24 000 développeurs sont abonnés aux mises à jour de Bootstrap sur GitHub, le site collaboratif de partage de code source.
Ce cadriciel permet de créer l’interface d’un site ou d’une application dotée d’une interface élégante, avec un effort minimal. Bootstrap comprend tous les éléments d’interface les plus courants, tels que la navigation, les boutons, les étiquettes, les tableaux, les alertes, les barres d’avancement, les formulaires, etc. C’est en quelque sorte un guide de style Web directement utilisable par les intégrateurs.
Pourquoi utiliser un cadriciel comme Bootstrap?
1. Pour profiter d’une excellente compatibilité avec les vieux navigateurs, et ce, gratuitement
Assurer la compatibilité avec tous les navigateurs est un cauchemar pour les intégrateurs. Avec Bootstrap, c’est déjà fait. (Internet Explorer 7 ou mieux)
2. Pour ne pas laisser les détails au hasard
Le diable est dans les détails, et, en utilisant ce cadriciel, tous les détails sont déjà peaufinés. Il s’agit de détails qui, pour des raisons de temps ou de budget, sont souvent oubliés.
3. Pour avoir un site ou une application qui va bien vieillir
Comme des centaines de développeurs travaillent à débugger et à améliorer le code du cadriciel, il est raisonnable d’espérer que votre site fonctionnera adéquatement à long terme, avec des coûts de maintenance réduits.
4. Pour faire plus avec moins
En ne réinventant pas la roue, l’utilisation d’un cadriciel permet, en théorie, d’économiser des efforts importants en termes d’intégration. On peut donc investir l’effort ailleurs.
5. 
Pour avoir un site adaptatif, en y mettant peu d’effort
Ce type de mise en page permet, avec peu d’effort, d’obtenir un visionnement adapté à toutes les plateformes. Par conséquent, on pourra éviter d’avoir à développer un site mobile.
Est-ce que les cadriciels réduiront le besoin en ergonomie Web?
Le cœur du travail de l’ergonome web reste le même. Cependant, l’ergonome doit parfois consacrer du temps à déceler des problèmes ergonomiques provenant de détails dans l’intégration. Plusieurs problèmes courants pourront maintenant être évités grâce aux cadriciels d’interface.
En contrepartie, une mise en page adaptative représente du travail additionnel pour l’ergonome. En effet, il doit déterminer la mise en page optimale en fonction des différentes résolutions d’écran.
Donc, au final, l’investissement en ergonomie sera tout aussi nécessaire qu’avant l’arrivée des cadriciels.
Est-ce qu’il est difficile de créer un site avec un design original en utilisant un cadriciel ?
Pas nécessairement. Il est possible de modifier l’apparence graphique de Boostrap sans modifier le code du cadriciel grâce à LESS, un préprocesseur CSS. On peut par exemple, en une seule ligne, rendre changer la rondeur des coins de tous les boutons.
L’utilisation de ce préprocesseur permet aux développeurs de personnaliser l’apparence de l’interface, tout en restant abonnés aux mises à jour de Bootstrap.
Cependant, il est vrai que pour un œil averti, l’apparence d’un site créé avec Bootstrap pourrait montrer des airs de famille avec Twitter. Ceci n’est cependant pas négatif pour l’expérience de l’utilisateur. En effet, le fait que l’interface soit familière à l’internaute peut vraisemblablement le rassurer.
