Jquery Mobile est un framework qui permet d’uniformiser et d’adapter l’affichage d’un site web sur des supports aux tailles très différentes : smartphones, tablettes, et pourquoi pas ordinateurs portables. On est de plus en plus nombreux à utiliser des smartphones ou des tablettes. L’Internet mobile est décidément très pratique. Mais avec ses tailles d’écran très différentes, et ses périphériques qui chamboulent les habitudes, le travail du concepteur de site s’en trouve totalement modifié.
Imaginez un peu le tableau : on a de petits smartphones qui tiennent dans la poche. Et on a d’énormes tablettes dont la résolution rivalise avec les meilleurs écrans d’ordinateur. Ces appareils, on peut les tenir dans deux sens différents, en plus. Et au niveau de l’ergonomie, à la place d’un clavier et d’un souris, on utilise directement nos doigts sur l’écran. Plus de rollover, mais par contre des gestes qu’on n’avait pas auparavant, comme le swipe (faire glisser un élément).
La problématique, pour un concepteur de site Internet, est vraiment complexe. Vaut-il mieux adapter ce qui existe pour le rendre compatible avec les mobiles, ou créer une seconde version dédiée à ce type d’appareil ? Et ensuite, comment faire, quelle technique va-t-on employer ?
Responsive design ?
On entend beaucoup parler de responsive design, par exemple. Il s’agit d’une façon de coder qui permet de rendre les éléments de la page fluides. En fonction de la taille du navigateur, les blocs vont changer de taille, et mieux encore, ils peuvent changer de disposition, ou même apparaître, disparaître, ou se déplacer. Une barre de navigation qui était par exemple à droite sur un site en grande taille peut se retrouver au pied de la page sur un petit écran, et disposée de façon horizontale alors qu’elle était verticale. De cette façon, l’importance est donnée au contenu.
Inutile de préciser que cela demande beaucoup de travail. Il faut repenser le design du site en profondeur. Mais le jeu en vaut la chandelle. D’autant qu’il y a un autre point très important à faire peser dans la balance lors du choix de la composition ou recomposition du site mobile : le poids. En effet, les smartphones ne disposent pas toujours d’une vitesse de connexion idéale, et il faut alors jouer avec la frustration de voir une page s’afficher avec une lenteur extrême.
Pour corriger ce problème, il faut minimiser l’utilisation des images. Éviter de multiplier les requêtes. Peut-être diminuer la taille des images, ou proposer des résolutions différentes en fonction de la taille de l’écran. Il faut jongler avec beaucoup de paramètres
Jquery Mobile
Mais alors que propose Jquery Mobile ? Tout d’abord, je dois vous expliquer ce qu’est Jquery. Il s’agit d’un framework, d’une bibliothèque de fonction qui facilite énormément la programmation du javascript, en l’uniformisant et en permettant d’accomplir des fonctions compliquées avec juste quelques lignes de code. Jquery Mobile est une bibliothèque supplémentaire qui permet de faciliter énormément le développement spécifiquement pour l’adaptation aux mobiles. Par exemple, tous les éléments de la page sont habillés de façon uniforme sans aucun effort particulier. Il est facile d’avoir des effets de transition entre les pages. Les éléments sont tous chargés par défaut en AJAX, ce qui permet, en théorie au moins, de réduire le temps de chargement. Quant aux formulaires, leur ergonomie devient tout bonnement excellente ! En effet, on utilise non seulement les avancées du HTML5, mais aussi d’autres améliorations propres à Jquery Mobile, comme les boutons switch, des boutons à bascule bien pratique et particulièrement adaptés au tactile.
Jquery Mobile permet de gagner un temps certain. Mais cette bibliothèque n’a évidemment pas que des avantages. Par exemple, c’est un élément supplémentaire à charger. Même si c’est relativement léger et qu’on peut la charger à partir de serveurs mutualisés, ça compte quand même. Un autre écueil qu’on peut rencontrer, c’est justement l’habillage du site. Jquery Mobile travaille l’habillage en profondeur, et rajoute une multitude de styles. On a certes le choix, et il existe un outil qui permet de personnaliser un peu les couleurs. Mais si on veut avoir un habillage vraiment spécifique, alors là, ça devient assez compliqué. C’est possible, mais ça complique pas mal.
Ah oui, un point qui peut paraître évident… comme on utilise une nouvelle bibliothèque, il faut apprendre à utiliser son code. Franchement, pour la très grande majorité des fonctions, c’est vraiment simple, justement. Il suffit d’écrire son code HTML de la bonne façon, d’y mettre les options de code proposées par Jquery Mobile, et tout se met en place comme par magie ! Pour les configurations un peu plus poussées, eh bien c’est du Jquery, ça utilise la même syntaxe. Si vous connaissez l’un, vous passerez facilement à l’autre.
Mise à jour
L’usage de Jquery Mobile tend à tomber en désuétude. On lui préfère à présent des frameworks comme Bootstrap, qui permettent d’avoir un seul site qui s’adapte alors à tout type de tailles de navigateurs, bureau ou mobile.
