La révolution des cadriciels d’interface

par
   

"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.

Prototype fonctionnel réalisé avec le cadriciel Foundation de ZurbLa 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.

Infographie montrant les cadriciels d'interface et back-end

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.

COMMENTAIRES

  1. DEV stuff | Pearltrees

    [...] 2. Pour ne pas laisser les détails au hasard La révolution des cadriciels d’interface –  Adviso | le blogue interne [...]

  2. Aktifimmo

    Cadres = frame non? Ces logiciels utilisent-ils des frames? Je pose cette question car je suis référenceur mais pas développeur. Je suis donc à la recherche d’un moyen de pouvoir créer des sites sans trop de techniques tout en alliant mes compétences de référenceur pour pouvoir lancer mon petit business. Et comme le référencement n’aime pas les frames, ça pourrait être embêtant.

  3. Michael

    Non, Bootstrap n’utilise pas de frame (comme tous les cadriciels d’interface d’ailleurs), il définit simplement la manière d’écrire le code HTML. Ce dernier est donc référencé comme pour un site « classique ».

  4. Laurent

    Très bon article que je viens de lire après en avoir publié un sur je sujet. Je me suis permis de mettre un lien vers le votre beaucoup plus complet.

    Cette croissance en termes de développement de framework est un réel gain de temps et colle parfaitement avec les besoins actuels. Ils permettent aujourd’hui de rapidement batir un MVP, de le tester et l’adapter sans forcément avoir besoin de sous-traiter la création d’un front et back-end. On peut facilement gérer son front-end avec des connaissances de bases. Et si nos connaissances sont limitées. Il est plus facile de batir son cahier des charges (pour la partie front bien sûr).

    Laurent

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>