Coder un site en responsive prend parfois beaucoup de temps et peut générer un code HTML particulièrement complexe et tentaculaire pour les projets les plus poussés. Intention.js est une librairie qui permet d’adapter directement le code HTML en fonction de la taille du navigateur.
Intention.js est une librairie qui se propose de faciliter la mise en place d’un site responsive en limitant au maximum l’utilisation des media queries, ces outils introduits dans CSS3 qui permettent de reconnaître la taille de l’écran de l’utilisateur et d’adapter les éléments à afficher en fonction de l’espace disponible. Le principal souci du responsive reposant uniquement sur le CSS est celui de la connexion : l’utilisateur chargera l’intégralité du site, même les images qui ne seront au final pas affichées, ce qui pose un réel problème pour les utilisateurs consultant le site depuis un smartphone et ne disposant pas d’une connexion suffisante.
Un schéma résumant la façon dont fonctionne Intention.js : le script tel qu'il est construit au départ et le code HTML servi aux différents utilisateurs en fonction de leur terminal.
(cliquez pour agrandir)
Intention.js propose donc une autre solution : on commence par déterminer plusieurs « threshold groups », des seuils permettant de définir comment la page va se comporter en fonction du terminal utilisé. Il permet également de prendre en compte le caractère tactile ou non du terminal, ainsi que les hautes définitions. Une fois ces aspects définis, Intention.js vous permet d’adapter à la volée le HTML de la page, qui se modifiera en fonction des seuils définis plus haut : vous pouvez indiquer deux versions de la même image, en basse et en haute résolution pour un même contenu.
Le code sera modifié en conséquence avant d’être envoyé à l’utilisateur, ce qui allège les temps de connexion et simplifie la mise en place d’un site réactif. Outre le responsive, la technologie développée par Intention.js peut permettre d’autres applications pour toute personne souhaitant mettre en place une page Web répondant en quasi temps réel et se restructurant en fonction de divers paramètres : les développeurs d’Intention citent ainsi la possibilité de restructurer une page en fonction de la profondeur de scroll, du nombre de page vue, du moment de la journée etc..
Intention.js dispose d’un site Web très complet qui regorge d’exemples et d’explications sur cet outil. Intention.js nécessite jQuery et Underscore.js pour fonctionner et le code source est disponible sur GitHub.