"responsive design" et optimisation pour un smartphone

[alpheratz]

Bonjour !

Je voudrais "travailler" un peu l’efficacité d'un site vis à vis des clients smartphone.

L'architecture du site est classique , avec des liens, présentés dans différents modules, qui pointent sur des articles ...
Sur un écran d'ordinateur , pas de problème.
Sur un smartphone, ça se gâte : si on pointe sur un lien, le module principal qui va afficher le contenu de l'article se retrouve (par empilement) tout en bas de la pile, et l'utilisateur doit faire défiler son écran vers le bas pour trouver le contenu ... par ergonomique du tout !

Je redoute que la gestion de l'ordre d'affichage des blocs ne soit gérable qu'à travers du code CSS personnalisé, qui change l'ordre d'empilement en fonction de la taille de l’écran. C'est probablement hors de ma portée en terme de compétence.

Une façon potentiellement plus facile (de mon point de vue) serait d'afficher les articles sur lesquels on active le lien dans une fenetre pop-up qui, par définition, serait immédiatement visible.
Par contre , je n'ai pas la moindre idée de savoir comment on peut diriger l'affichage d'un article vers un pop-up ?

Tous les avis, conseils, etc seraient bienvenus

liens du site : https://lescarnetsdusud.fr/portail/
le template a été crée avec Template Creator

[Colnem30]

Salut

Je suppose que ton module principal est à droite sur grand écran. Normal qu'il se place en bas sur un écran de smartphone puisque, en Europe tout au moins, on lit de gauche à droite.

Donc, 2 solutions:
1 - Placer le module principal à gauche.
2 - Contacter le fournisseur de ton template pour qu'il te donne la syntaxe CSS permettant d'inverser les positions gauche-droite sur Smartphone.

Pour ma part, c'est ce que j'ai fait avec un template de Joomshaper. Voici la solution qui m'a été retournée et qui fonctionne parfaitement:

@media (max-width: 991px){
#sp-main-body > .container > .container-inner > .row{flex-direction: column-reverse !important;}
}

A+

[RobertG]

Bonjour,

Le plus simple serait peut-être de migrer en version 4 de Joomla! et de profiter d'un template par défaut responsive.

[Colnem30]

Je ne pense pas qu'un template responsive fasse passer en haut sur les petits écrans ce qui est à droite sur les grands. En tout cas, ce n'est pas le cas sur mon template Joomshaper, compatible J4 et PHP8. Ce qui est à gauche passe en haut, ce qui est à droite passe en bas.

Mais peut-être qu'il y a une méthode sous Joomla 4 que je ne connais pas.