Responsive Design et Digital Learning

Depuis plusieurs années, le Responsive Design s’est imposé comme un important facteur décisionnel dans le choix d’une formation e-learning.
Aujourd’hui, Franck, co-fondateur et responsable technique chez Elearnis, va nous éclairer sur le fonctionnement et les enjeux du Responsive Design en s’appuyant sur son expertise dans le domaine du Digital Learning.

Bonjour Franck, ces derniers temps nous entendons beaucoup parler de modules e-learning responsive, mais qu’est-ce que c’est exactement le Responsive Design ?

La notion de Responsive Web Design (RWD) a été introduite par Ethan Marcotte en mai 2010 dans un article pour A List Apart dans lequel il décrit une mise en page fluide, qui « répond » aux dimensions d’affichage utilisées par le navigateur. Il s’agit de créer une mise en page s’adaptant à tous types d’écrans en opposition à la création d’une mise en page spécifique par device.

Pourquoi le Responsive Design existe-t-il ?

Face à la multiplication des appareils permettant l’accès à l’information, et la croissance permanente de l’utilisation du mobile, il est primordial de proposer des contenus répondant à tous les usages, actuels et futurs.

Le Responsive Design permet de proposer une expérience utilisateur de qualité quel que soit le support.

Quels sont les différents types de Responsive Design ?

On peut séprarer le Responsive Design en 3 catégories :

1. Scalable (ou zoomable)
   Ce type de Responsive Design utilise la même mise en page quel que soit le support, et met à l’échelle le contenu, à la façon d’une vidéo par exemple.
   Exemple d’outil auteur utilisant cette technique : Articulate Storyline

2. Adaptive (ou adaptatif)
   Ce type de Responsive Design propose des mises en page fixes en fonction de catégories de devices. (Exemple : téléphone, tablette, desktop).
   Exemple d’outil auteur utilisant cette technique : Adobe Captivate

3. Fluid (ou fluide ou responsive)
   Ici, le contenu s’adapte à tous les types d’écrans quel que soit leurs dimensions. Il s’agit du mode le plus intéressant, permettant la customisation la plus poussée.
   Exemple d’outil auteur utilisant cette technique : Articulate Rise, pur HTML

Quels sont les principaux avantages du Responsive Design selon toi ?

En premier lieu, le Responsive Design permet d’améliorer l’expérience utilisateur, notamment sur mobile. De fait il améliore aussi l’engagement utilisateur, qui peut accéder au contenu à tout moment quel que soit le device utilisé.

Le Responsive Design permet également de proposer des contenus plus pérennes et plus facile à maintenir.

Quels sont les challenges du Responsive Design et plus particulièrement de l'e-learning responsive ?

Le Responsive Design propose 2 types de challenges :

1. Challenges ergonomiques
   • Afficher du contenu sur de plus petits écrans
     • Avoir une approche multi-supports dès la conception
     • Avoir une conception mobile first
     • Concevoir avec une approche d’amélioration progressive
   • Modes de consommation du contenu
     • Audio pas toujours disponible (exemple : consommation mobile sans casque dans un environnement public), c’est pourquoi il convient de mettre en place une fonctionnalité de sous-titrage automatiques.
     • Un découpage de l’information en grains courts
2. Challenges techniques
   • Optimisation pour la consultation nomade
     • La qualité de l’accès au réseau étant par nature beaucoup plus aléatoire pour les usages nomades, l’optimisation du poids des ressources et de leur temps de chargement est primordial.
   • Navigateurs supportés
     • Le support d’anciens navigateurs comme Internet Explorer peut être problématique pour le développement responsive, certaines technologies n’étant pas disponibles ou mal supportées par ces navigateurs.

Peux-tu nous parler des technologies utilisées pour développer les modules de Digital Learning chez Elearnis ?

Chez Elearnis, nous proposons 2 types de Responsive Design :

Scalable (ou zoomable)

Pour du contenu consulté principalement sur desktop et tablette, avec la solution Articulate Storyline.

Fluid (ou fluide ou responsive)

ELEARNIS training engine

Dès la création d’ELEARNIS en 2011, nous avons fait le pari du mobile learning et avons développé en interne un moteur de formation full responsive s’appuyant sur les standards du web tels que HTML, CSS et JavaScript.

Ce moteur est pensé pour une approche multi-supports :

• Mobile first
• Amélioration progressive (progressive enhancement)

Il a également été conçu avec une approche multilingue :

• Facilité de traduction avec import/export Excel des textes du modules
• Packages multilingues avec détection automatique de la langue de l’utilisateur

Il est également retro-compatible avec Internet Explorer.

Enfin ce moteur peut publier en SCORM 1.2, SCORM 2004 et xAPI (ex-Tin Can API)

Articulate Rise

Nous utilisons également la solution Articulate Rise pour des modules de formation nécessitant moins de customisation.

Pour terminer, pourrais-tu nous dire quelles sont les particularités de la plateforme LMS Elearnis ?

Afin de diffuser au mieux ces contenus de formation Responsive, il faut évidemment une plateforme de formation elle-même responsive.

Elearnis LMS propose une interface Responsive Design pour une expérience de formation réussie sur tous les supports.