Responsive : c’est un mot que vous avez forcément entendu ces dernières années, notamment dans le domaine du webdesign. Mais savez-vous ce que cela signifie précisément ? Et, surtout, en quoi cela vous concerne en tant que concepteur e-learning ?

Pour commencer, nous allons parler de design responsive dans son contexte d’origine, le webdesign. Ensuite, nous verrons comment appliquer cette notion en e-learning et pourquoi c’est important de le faire.

Qu’est-ce que le design responsive ?

Imaginez que vous deviez concevoir une mise en page pour une feuille de papier A4 standard, de dimension 210 x 297 mm. Faire cette mise en page ne pose aucun souci, puisque les dimensions sont fixes.

Ajoutons maintenant une nouvelle contrainte : il faudrait que vous transformiez votre maquette pour faire rentrer votre contenu sur un post-it de 76 x 76 mm puis sur un format A3 de 297 x 420 mm. Et bien sûr, il faut que le contenu soit toujours lisible, quelle que soit la taille de la feuille. Lorsque les dimensions se mettent à bouger, le travail de mise en page devient plus délicat, n’est-ce pas ?

Ce petit exemple vous montre concrètement le défi rencontré par les webdesigners depuis l’explosion des mobiles qui a débuté dans les années 2000. Sans design responsive, les webdesigners étaient obligés de créer plusieurs versions du même site. Ces versions étaient des copies du site original mais conçues spécifiquement pour les navigateurs mobiles. Créer et gérer plusieurs sites pour répondre à la demande croissante de contenus adaptés aux mobiles n’était ni économique ni rapide. Et face à la multiplication des appareils mobiles de tailles différentes, il devenait évident qu’on ne pouvait pas continuer à multiplier les versions. Il fallait mettre au point une technique nouvelle.

Le terme responsive design a été inventé par le webdesigner et auteur Ethan Marcotte dans un article de 2010 dont le titre était “Responsive Web Design” (en anglais). Il a utilisé ce terme pour décrire une façon de concevoir pour le web consistant à optimiser les sites pour qu’ils fonctionnent sur tous les appareils. Pour résumer, Marcotte propose que les webdesigners utilisent le design responsive pour créer la meilleure expérience utilisateur possible, en préservant le contenu et les fonctionnalités, de façon à rendre la lecture et la navigation facile quelle que soit la taille d’écran.

Le design responsive côté technique

Le design responsive consiste à utiliser trois éléments particuliers : une grille fluide, des images fluides et des media queries. En pratique, un site web est formé de blocs de contenu imbriqués les uns dans les autres. Pour faire un site responsive, les développeurs web définissent comment le site web va repositionner, redimensionner, masquer ou changer l’ordre de ces blocs en fonction de la taille de l’écran et des points de rupture (les paliers à partir desquels on bascule sur un autre affichage du contenu).

Par exemple, un webdesigner peut spécifier que le contenu soit sur une ou deux colonnes en fonction du nombre de pixels disponibles à l’horizontale. Cela signifie que si le site est consulté sur un smartphone, le contenu apparaîtra sur une seule colonne, mais sur une tablette, le même contenu apparaîtra cette fois sur deux colonnes. Il peut aussi définir, que si quelqu’un regarde le site depuis un ordinateur, il y aura deux colonnes et du contenu en plus qui n’apparaîtra pas sur les versions mobiles et tablettes.

Le design responsive résout donc le problème que nous avions tout à l’heure : créer une maquette qui fonctionne aussi bien sur un post-it que sur une feuille A4 ou même A3. Grâce au design responsive, il n’est plus nécessaire de créer une maquette par taille d’écran puisqu’on peut définir une maquette qui s’adapte à toutes les tailles d’écran. Il suffit de définir les règles qui déterminent comment le contenu réagira aux différentes contraintes de taille.

Maintenant que vous y voyez plus clair sur ce qu’est le design responsive pour les sites web, vous vous demandez sans doute comment appliquer cela en e-learning. En effet, comment le design responsive peut-il vous aider à proposer des modules e-learning quel que soit l’appareil de l’apprenant ?

Le e-learning responsive reprend les bases du webdesign responsive : les éléments qui composent les modules doivent s’adapter à la taille de l’écran utilisé. Mais il y a tout de même quelques spécificités. Pour mieux comprendre ce qui fait la particularité du e-learning responsive, nous allons d’abord nous intéresser aux défis qui concernent tout particulièrement le développement de modules pour des appareils de toutes tailles.

Les défis du e-learning responsive

À la différence des pages web, qui ont une disposition à défilement vertical permettant de répartir le texte et les images, la plupart des modules e-learning ont, comme les présentations dont ils sont issus, une disposition horizontale et les objets qui les composent ont des positions fixes les uns par rapport aux autres.

Les modules e-learning à base de diapos peuvent être composés de nombreuses sortes de contenus. On peut rencontrer de simples diapos contenant juste des visuels et du texte mais aussi des modules riches en activités interactives pour engager l’apprenant dans son apprentissage.

Les sites responsive fonctionnent parce que, souvent, la position des contenus sur une page web n’a pas vraiment d’importance. Par exemple, le propos d’un article n’est pas modifié par le fait que le texte soit présenté sur une ou trois colonnes ou que les images changent de position.

Mais ce n’est pas le cas des contenus des modules e-learning à base de diapos. Cela n’aurait aucun sens pour les apprenants si les objets changeaient de place ou disparaissaient à cause d’un écran trop petit ! Pour que les modules e-learning à base de diapos fonctionnent sur tous les appareils, la position des éléments sur l’écran ne doit pas changer, quels que soient la taille ou le format de l’écran. Et cela a posé problème à de nombreux développeurs e-learning : comment développer des contenus e-learning avec des éléments fixes mais qui s’adaptent à l’ordinateur, à la tablette ou au smartphone de l’apprenant ?

Bien que le e-learning à base de diapositives soit le choix le plus fréquent pour de nombreux contenus, certaines entreprises ont fait le choix de créer du e-learning responsive en abandonnant le format diapo pour créer des contenus avec défilement vertical, comme un site internet. En fait, au lieu de créer un module e-learning interactif, ils créent un mini-site.

L’inconvénient de cette approche ? Jusqu’ici les outils permettant de créer des modules e-learning responsive étaient des outils du développement web, et non des outils-auteur e-learning. Créer des contenus e-learning pour les mobiles demandait du temps, des compétences en codage et des outils de développement web que la plupart des développeurs e-learning n’ont pas.

Alors comment les outils auteur e-learning peuvent-ils relever le défi de la création de modules responsive ? Regardons tout cela de plus près.

Les solutions pour développer des modules e-learning responsive

Il est essentiel que ce soit la technologie qui fasse le plus gros du travail pour rendre les modules responsive et non les créateurs de modules. Chez Articulate, nous avons deux outils révolutionnaires dans le domaine du e-learning responsive qui visent précisément cet objectif.

Un outil de création en ligne pour créer du contenu e-learning responsive

Rise est une nouvelle application qui change la donne car il permet de développer du e-learning responsive avec un simple navigateur internet. Elle utilise les mêmes technologies que les sites web pour produire du contenu responsive sauf qu’elle a été conçu spécifiquement pour le e-learning.

Rise vous propose huit types de leçons clés en main tous extrêmement faciles à mettre en œuvre. Il vous suffit simplement d’insérer du texte, des images et du contenu multimédia pour obtenir des leçons variées avec des chronologies, des images avec légendes interactives, des processus et des quiz. Vous pouvez même incruster des URL ou des vidéos. Ou si vous préférez créer une leçon vraiment unique, vous pouvez empiler autant de blocs d’apprentissage (textes, contenus multimédia et activités interactives) que vous le souhaitez dans l’ordre de votre choix.

Toutes les leçons créées dans Rise sont fondamentalement responsive et ont été conçues en tenant compte des usages mobiles. C’est pourquoi, en plus d’être agréables à regarder, elles marchent parfaitement sur tous les appareils, quelle que soit leur orientation – et sans que vous ayez à taper une seule ligne de code ni à bidouiller. Vous n’êtes donc plus obligés de limiter vos apprenants à un seul type d’appareil : quel que soit l’appareil de l’apprenant, les modules conçus avec Rise s’adapteront automatiquement pour fournir la meilleure expérience utilisateur possible.

Voici un exemple de module créé dans Rise pour vous donner une idée du rendu. La création de modules dans Rise se fait si facilement qu’un des membres de la communauté E-Learning Heroes a pu créer ce module en moins d’un jour – et c’était la première fois qu’elle utilisait l’outil ! Et celui-là a été créé en l’espace de quelques heures seulement.

Un lecteur de modules responsive pour mobiles

Si Rise est l’outil parfait pour créer des modules e-learning responsive en quelques minutes, certaines entreprises veulent aussi créer des modules e-learning hautement interactifs à base de diapos – et elles souhaitent que ces modules soient, eux aussi, lisibles sur tous les appareils. Grâce au nouveau lecteur de modules responsive de Storyline 360 et de Studio 360, c’est parfaitement possible.

Ce lecteur responsive détecte le type d’appareil utilisé par l’apprenant et s’adapte aux différentes tailles d’écran et orientations en réduisant la place des contrôles de lecture pour laisser le plus de place possible au contenu. Par exemple, sur les smartphones, le lecteur responsive masque le menu latéral, supprime les éléments du navigateur et propose un contrôle de lecture adapté aux mobiles. Plus important encore, ce lecteur responsive préserve le contenu des modules à base de diapos, exactement comme il a été conçu. C’est le lecteur de module, et pas le créateur du module, qui se charge de s’adapter à l’appareil de l’apprenant.

Avec Rise et le nouveau lecteur de modules responsive, Articulate adapte les principes fondamentaux du design responsive au e-learning. Maintenant, vous pouvez fournir des contenus e-learning qui ne cantonnent pas les apprenants à un seul type d’appareil sans sacrifier la qualité de vos modules pour des raisons techniques.

Pourquoi est-il important de faire des contenus responsive en e-learning ?

Comme nous utilisons tous de plus de plus des appareils mobiles et que les objets connectés sont devenus une réalité, il n’est plus du tout réaliste de penser que les apprenants vont accéder aux modules uniquement depuis leur ordinateur de bureau. Aujourd’hui, nous sommes une société mobile, nos méthodes d’apprentissage doivent s’adapter à ce nouveau mode de vie. C’est pourquoi Articulate a fait le choix de vous proposer des outils e-learning responsive qui vous permettent de proposer à vos apprenants des modules adaptés à leurs besoins de mobilité.

Pour tester Rise et les fonctionnalités responsive de Storyline 360 et de Studio 360, essayez  Articulate 360 gratuitement pendant 30 jours.