Responsive

Responsive

par sandrine glineur,
Nombre de réponses : 20

Bonjour,
nous travaillons sur le thème Adaptable pour notre futur Moodle .
Le thème ne me semble pas adapté pour du Responsive :
les menus de la barre d’entête disparaissent
Le titre est coupé…

Il faudrait agir sur le CSS pour maîtriser les points de rupture d’un écran à à un autre.
Comme cela se passe si le thème évolue par rapport au CSS qui aura été crée?
Quel thème est le plus Responsive selon vous ?

Merci pour vos réponses.
Sandrine Glineur
Graphiste

Moyenne des évaluations  -
En réponse à sandrine glineur

Re: Responsive: Thème adaptable

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour Sandrine,

Ce thème n'est pas un thème standard Moodle.

Il faut donc poster dans le forum du concepteur du thème.

ICI. En bas dans les commentaires. Si possible en anglais.

Daniel

PS: Il me semble bien que ce thème est responsive (voir aussi les paramètres de configuration).

En réponse à Daniel Méthot

Re: Responsive: Thème adaptable

par Patrick Viney,

Je dirais qu'il y a des thèmes qui sont plus responsive que d'autres en effet...

Même si un thème se dit responsive, il est fréquent de découvrir à l'usage certains problèmes d'affichage, d'autant plus que Moodle est en constante évolution, ces thèmes développés par des auteurs tiers se doivent de constamment mettre à jour leur thème pour corriger tel ou tel détail, sur telle ou telle page de Moodle (qui en contient des centaines).

Un bon indicateur est de regarder le nombre de mises à jours effectuées, l'ancienneté du thème et sa popularité (le nombre de téléchargements, et donc le nombre d'utilisateurs susceptibles de remonter des bugs d'affichage ou de proposer des améliorations).


En réponse à Patrick Viney

Re: Responsive

par sandrine glineur,
Bonjour Patrick,



merci pour votre réponse.



J'ai regardé et que pensez-vous du thème ESSENTIEL ?



Bon Dimanche.



Sandrine
En réponse à sandrine glineur

Re: Responsive

par jacky lepeintre,

Bonjour sandrine,


Nous travaillons actuellement sur le même thème que vous. Je ne suis pas sûr de comprendre le problème. Pourriez-vous poster des captures d'écran du problème svp ? 

Ça marche plutôt bien sur ordi, tablettes mais moins efficacement sur Cellulaire.


A+    JAcky

En réponse à jacky lepeintre

Re: Responsive

par sandrine glineur,
Bonjour Jacky,



par exemple les menus de l'entête disparaissent quand le site Moodle

passe en format tablette ou téléphone portable.



Il n'y a pas de menu burger qui apparait.



Nous avons décidé de choisir un autre thème "BOOST" pour la partie

mobile et tablette. La encore un autre problème se pose quand un écran

d'ordinateur n'est pas bien réglé : il n' y a pas de redirection vers le

thème BOOST mais toujours sur la version d'ADAPTABLE.



Nous ne voulons pas régler les bogs inhérent pas l'ajout de CSS au

risque de tout perdre si le thème doit être réactualisé.



Voilà. J'espère avoir été claire dans mes explications.



Bon Dimanche.



Sandrine
En réponse à sandrine glineur

Re: Responsive

par Séverin Terrier,
Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Bonjour Sandrine,

Il nous manque beaucoup d’informations pour pouvoir t'aider efficacement.

Notamment, s'agissant d'un thème graphique, des copies d'écran permettraient de mieux appréhender les difficultés rencontrées. Cela pourrait par exemple être lié à des images (ou paramètres) que vous auriez réglé de façon erronée.

Il est donc important de fournir un maximum d'éléments (copies d'écrans, paramètres modifiés...), afin d'éviter de perdre du temps en suppositions...

Séverin

Moyenne des évaluations Utile (1)
En réponse à Séverin Terrier

Re: Responsive

par sandrine glineur,
Bonjour Séverin,

Je veux bien faire des copies d'écran mais sans intervenir sur le thème sans l'ajout de css le menu de l'en-tête disparaît sous format tablette et portable sans afficher de menu burger...



Bien cordialement

Sandrine
En réponse à sandrine glineur

Re: Responsive

par Patrick Lemaire,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Bonjour Sandrine,

Sans glisser dans la mauvaise plaisanterie... c'est quoi un "menu burger" ?!? incertain

Dans les captures d'écrans, il nous manque la version ordinateur si je ne m'abuse. C'est bien celle qui devrait servir de "référence" ?

A bientôt,
Patrick

En réponse à Patrick Lemaire

Re: Responsive

par Luiggi Sansonetti,
Avatar Développeurs de plugins Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Titulaires du Moodle Course Creator Certificate Avatar Traducteurs

Salut Pat

Suivant les visuels plus bas, ce qui semble disparaître sont les petits ajouts à côté du choix de la langue :

versus

A confirmer, mais c'est ce que je vois de différent via les 3 visuels.

En réponse à Séverin Terrier

Re: Responsive

par sandrine glineur,

Bonjour Severin,

voilà ce que cela donne en images.

Sandrine


Annexe Agrandissement à 200 % .png
Annexe Format ecran ordinateur.png
Annexe Format tablette.png
En réponse à sandrine glineur

Re: Responsive

par Jérôme DEMIAUX,
Avatar Traducteurs

Bonjour,

Deux réponses.

Pour ce qui est de la modification du CSS, si cette modification est opérée dans le formulaire du thème prévu à cet effet, les modifications seront prises en compte d'une mise à jour à l'autre (pour autant que les classes et identificateurs restent les mêmes). Ce n'est donc pas un (gros) souci.

Pour le menu burger, c'est plus compliqué car étroitement lié aux options du thème.

Clean burguerise les menus ajoutés à l'entête du site via "Présentation > Thèmes > Réglages thèmes > Eléments du menu personnalisé".

Adaptable, de son coté, permet soit l'affichage de ce menu personnalisé (en bas du header et non pas à coté du profil utilisateur, important), soit le masquage de ce dernier. Pour compliquer le tout, le thème permet également la création d'un menu personnalisé (visible uniquement avec ce thème) qui lui est placé en haut à droite du header, d'où la confusion possible avec le menu personnalisé "générique" .

Tout le monde suit ?

Bref Adaptable ne réduit façon burger QUE le menu générique, accompagné (ou pas) d'une liste d'éléments prédéfinis (mes cours, mes messages ...) que l'on trouve sur le formulaire "Présentation > Thèmes > Adaptable > Header Navbar" (voir aussi le menu suivant Navbar Tools Menu)

Jérôme.


Annexe menus.jpg
Moyenne des évaluations Utile (2)
En réponse à jacky lepeintre

Re: Responsive

par Daniel Méthot,
Avatar Moodleurs particulièrement utiles

Bonjour,

A tout hasard, le thème Essential (valable à présent pour Moodle 3.2) réagit assez bien sur les navigateurs des tablettes.

Par exemple essayez de visualiser avec votre tablette mon site qui utilise ce thème (hautement configurable également).

C'est celui que j'installe encore "par défaut" pour l'instant chez tous mes clients.

Pour ce qui concerne les smartphones je préconise plutôt d'utiliser l'application Moodle.

Mais même avec le navigateur smartphone, et malgré la taille réduite de ces appareils, mon site est assez bien rendu avec ce thème.

Daniel

En réponse à sandrine glineur

Re: Responsive

par Séverin Terrier,
Avatar Documentation writers Avatar Moodleurs particulièrement utiles Avatar Testeurs Avatar Traducteurs

Bonjour Sandrine,

Beaucoup de personnes de la communauté ont déjà passé du temps pour essayer de t'aider, mais nous sommes dans le cas "type" du manque d'information et de précision, ce qui fait perdre du temps en vain...

Il faudrait déjà nous dire clairement :

  • quelle version exacte de Moodle tu utilises
  • quel thème tu utilises (tu as parlé de Adaptable, Essential et Boost), et quelle version exacte
  • ce qui pose problème exactement (qui n'apparait pas)

Attention : lors de l'utilisation sur Mobile, plusieurs blocs sont généralement affichés en bas de page...

Séverin

En réponse à Séverin Terrier

Re: Responsive

par sandrine glineur,
Bonjour Séverin,

Nous travaillons actuellement sur le thème adaptable 3.2.

Sandrine
En réponse à sandrine glineur

Re: Responsive

par Stephan Sengupta,

Bonjour,

De l'adaptabilité (responsiveness) des thèmes.

Voici un sujet qui AMHA va gagner en importance.

Je me permet d'y mettre mon grain de sel et de faire un retour sur notre expérience.

Nous avons pour stratégie d'être "mobile first" en d'autres termes le media qui sera le plus utilisé est le smartphone.

Nous avons testé plusieurs thèmes, aucun n'a une approche "mobile first" et la plupart semble apporter bcp de "fioritures" sur la page d'accueil dont nous n'avons pas grande utilité puisque notre accueil est paramétré sur "Tableau de bord" et que la connexion est obligatoire. De plus, le point d'entrée naturel depuis un smartphone sur notre instance Moodle est la messagerie personnelle (on se fait un raccourcis sur le bureau du smartphone).

En fait la page d'accueil public est un WordPress et Moodle est utilisé comme une sorte d'intranet avec des intégrations par RSS.

Nous pourrions partir avec un thème basé sur "Boost" et le remastériser. Mais Boost est encore trop immature et non terminé (pour la 3.2) et évolue à chaque nouvelle version. Ce qui implique que le thème basé sur "Boost" évolue lui aussi (eg: Fordson). Du coup on serait obligé de revoir notre travail de masterisation à chaque mise-à-jour.

Donc, on s'est dit qu'on va partir sur un thème basique, officiel, mature, simple, perenne et qui évolue peu = le thème Clean.

On le clone et on remastérise les layouts et la CSS pour un usage "mobile first". Bien que l'on fait au plus simple, il est vrai que ça reste un gros travail, car il faut revisiter toutes les pages, les modules et plugins, d'où l'importance de partir sur un thème mature qui n'évolue que peu.

Une astuce consiste à placer le code CSS suivant, qui permet de visualiser la structure ou squelette du thème et de sélectionner de manière très précise les objets à adapter :

* {
    border: 1px solid grey !important; /* met en évidence le squelette */
    box-shadow: none !important; /* pour avoir des bordures nettes */
    background: none !important; /* pour plus de clarté */
    border-radius: 8px !important; /* pour révéler l'imbrication des objets */
}


Partant de là, on retravaille le squelette en fonction de la largeur média.

Le reste n'étant que décorations. Quoique ! Car dans notre stratégie nous voulons que la décoration soit une valeur ajoutée, càd ne pas en mettre plein les "mirettes", mais une réelle aide la lecture. Donc pas de fioritures qui distraient l’œil.

Comme nous le savons tous, faire simple c'est parfois compliqué. Mais ça reste faisable par les amateurs du dimanche que nous sommes.

Je crois que c'est là une des grandes forces de Moodle. On peut encore aisément soulever le capot moteur et y mettre ses doigts dans le cambouis.

Une des heureuses conséquences de notre approche est de pouvoir se dispenser d'une application mobile (sauf hors connexion).

Je ne sais pas si mon post est utile, mais j'avais simplement envie de partager notre expérience en lien avec le sujet de l'adaptabilité et du "mobile first".

Cordialement
Stephan

Moyenne des évaluations Utile (1)