Aujourd’hui, je vais parler de mon expérience en ce qui a trait à l’intégration de design responsive dans des projets elearning, c’est-à-dire l’intégration de la plateforme de cours et des modules de formations en eux-mêmes.
Je vais me concentrer sur le couple LMS/Outils auteur Moodle/Storyline, qui sont les outils avec lesquels j’ai le plus souvent travaillé dans le cadre de projets elearning et que je connais le mieux. Je présenterai donc l’intégration de thèmes responsive avec Moodle, l’application Moodle Mobile et je parlerai de l’utilisation d’Articulate Storyline pour créer des modules de formations qui soient lisibles sur mobiles et tablettes.
Il existe évidemment d’autres outils auteurs et d’autres LMS, j’ai notamment déjà travaillé avec les outils MOS (MOS Solo et MOS Chorus) ou e-doceo (elearning Designer et elearning Manager). Vous pouvez consulter cet article pour avoir un tour d’horizon de plusieurs outils auteurs de modules elearning. Mais, ici, on se concentrera sur Moodle et Storyline, avec lesquels j’ai le plus d’expérience.
Moodle et thèmes responsive
Pour avoir une plateforme LMS qui soit lisible sur mobile et tablette, la première solution, quand on utilise Moodle, est de développer un thème responsive design. Comme le thème par défaut livré avec Moodle (Clean) est responsive, il est possible de créer un thème enfant, on créé en fait un thème qui hérite des propriétés du thème parent, mais, en y ajoutant notre personnalisation. On pourra ensuite mettre à jour le thème parent pour bénéficier des nouveautés sur notre thème enfant, sans pour autant supprimer notre développement (CSS, Javascript, Gabarit de pages…).
De mon côté, j’utilise souvent le thème Essential. C’est un thème pour Moodle basé sur Bootstrap, comme je connais bien ce framework, c’est parfait pour moi. L’avantage de ce thème est qu’il est facilement personnalisable puisqu’il propose, une fois installé, plusieurs pages de paramétrages directement en admin de Moodle, dans les réglages du thème. C’est-à-dire qu’on peut déjà paramétrer les couleurs, le logo, les réseaux sociaux, un diaporama en page d’accueil et des blocs personnalisés sans même aller coder ! C’est un gros avantage pour des déploiements rapides.
Ensuite, évidemment, pour aller plus loin et personnaliser de manière plus pointue, il faudra aller ajouter du CSS. Là encore, le thème propose en admin un champ CSS personnalisé pour ajouter son propre code. Par contre, si on a vraiment beaucoup de code additionnel, la création d’un thème enfant serait plus appropriée.
La création de thèmes responsive pour Moodle permet donc de lire le LMS sur mobile, cela dit ce n’est pas la solution parfaite et elle présente des limites. Le design s’adapte à l’écran certes, mais l’ergonomie n’est pas non plus idéale sur un mobile (sur tablette cela peut être convenable selon la taille de la tablette) et cela ne vaudra pas une vraie application mobile, ce que Moodle propose et dont on va parler un peu maintenant.
Application Moodle Mobile
Sur smartphone, on peux télécharger l’application Moodle Mobile qui affichera automatiquement notre LMS dans l’appli, nous permettant d’avoir un vrai affichage ergonomique pour smartphone.
Il est possible de personnaliser l’apparence de notre site dans l’appli en ajoutant notre CSS en admin dans Plugin/Services web : couleurs, polices, apparence générale… Cela dit, ça ne change que l’apparence et si notre LMS présente des développements spécifiques (exemple : modification du tableau de bord, ajout d’une remontée automatique de contenu en accueil…) et que l’on veut les voir aussi dans l’appli, il faudra faire un deuxième développement pour l’application.
Cette dernière n’est pas la solution miracle, évidemment, pour obtenir un outil vraiment personnalisé selon nos besoins, il faudra faire du développement spécifique, mais, elle est très efficace et couvrira d’office les besoins courant d’un projet elearning. Ensuite, pour avoir une plateforme complètement adaptée aux mobiles, la deuxième étapes sera d’adapter les éventuels modules de formations, c’est ce dont on va parler maintenant.
Modules de formation elearning responsive
Comme dis plus haut, je vais parler d’Articulate Storyline. Première chose, on peux publier avec Storyline nos modules en HTML5, donc responsive. On peux également les publier au format pour Articulate Player pour iPad, rendant la lecture optimale sur la tablette d’Apple. Ce sont les exports de base du logiciel, mais ils peuvent être suffisants.
Mais, l’outil que j’ai trouvé très efficace est l’application Articulate Player pour smartphone (testé sur un téléphone avec Android pour ma part). Le téléchargement est proposé dès qu’on essaye d’accéder à un module qui a été publié avec Storyline. L’application se charge ensuite de lire le module qui s’adaptera à la taille de l’écran. C’est une bonne base, on est alors assuré que nos modules sont lisibles sur smartphones.
Cela dit, on parle ici de modules qui ont été développé pour ordinateur « classique » et, même si le module s’adapte l’ergonomie sera vraiment moyenne pour un téléphone : boutons et liens pas facilement cliquables, polices trop petite… La solution ? Développer une deuxième version du module avec des dimensions de base adaptées au téléphone, autour de 320-380px de large environ, c’est-à-dire à peu près la largeur d’un smartphone.
Cela représente évidemment un coût de développement plus important mais je pense que c’est la meilleure manière d’obtenir un résultat vraiment adapté au mobile. En effet, la création de design fluide qui s’adapte à toutes les largeurs d’écran à ses limites, que ce soit pour un LMS, un site web, un service en ligne ou même un module elearning. On aura jamais une ergonomie aussi bien adaptée aux mobiles que si l’on développe spécifiquement pour ce format.
Ce sera ma conclusion sur cet article, l’adaptabilité sur tous supports de contenus elearning, c’est possible, mais, pour un résultat vraiment adaptée et un expérience mobile learning optimale pour l’apprenant, un développement spécifique pour les modules et une application mobile pour le LMS sont recommandés. L’ergonomie et la présentation des contenus sera alors vraiment optimisée.