[MC:TERMINE]Design du site pour les mobiles
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
[MC:TERMINE]Design du site pour les mobiles
Help !
Je suis en train de regarder pourquoi WRI a un affichage si erratique sur les mobiles.
Je découvre avec effarement que le rendu des butineurs a un fonctionnement sur mobile complètement différent de ceux sur ordinateur (et totalement incompréhensible pour moi):
- Le flux "normal" (la plupart des balises) suit les règles de redimensionnement habituel, ce qui donne par exemple pour la page "nouvelles" quelque chose d'assez agréable,
- Par contre, les flux taggés "position: absolute" et "float:*" ne sont plus "considérés comme primaires" et sont rapetissés à une taille supposée permettre de tenir toute la page sur le tout petit écran du mobile.
Alors, je veux bien l'un ou l'autre mais les 2 ensembles donne certains textes minuscules en 1 seule ligne sortant de l'écran et d'autres d'une taille bien lisible et bien formatés, le tout mélangé dans la même page !!
Il ya bien une commande CSS "text-size-adjust" (syntaxe dépendant de l'explorateur et non démunie d'effet de bords sur certains explorateurs d'ordinateurs ) qui donne toute la page au format habituel WRI mais toute petite ou sortant de l'écran si on zoome.
La seule solution que j'ai trouvé est de réécrire le CSS de wri en évitant les float et position:absolute.
Des idées ?
Je suis en train de regarder pourquoi WRI a un affichage si erratique sur les mobiles.
Je découvre avec effarement que le rendu des butineurs a un fonctionnement sur mobile complètement différent de ceux sur ordinateur (et totalement incompréhensible pour moi):
- Le flux "normal" (la plupart des balises) suit les règles de redimensionnement habituel, ce qui donne par exemple pour la page "nouvelles" quelque chose d'assez agréable,
- Par contre, les flux taggés "position: absolute" et "float:*" ne sont plus "considérés comme primaires" et sont rapetissés à une taille supposée permettre de tenir toute la page sur le tout petit écran du mobile.
Alors, je veux bien l'un ou l'autre mais les 2 ensembles donne certains textes minuscules en 1 seule ligne sortant de l'écran et d'autres d'une taille bien lisible et bien formatés, le tout mélangé dans la même page !!
Il ya bien une commande CSS "text-size-adjust" (syntaxe dépendant de l'explorateur et non démunie d'effet de bords sur certains explorateurs d'ordinateurs ) qui donne toute la page au format habituel WRI mais toute petite ou sortant de l'écran si on zoome.
La seule solution que j'ai trouvé est de réécrire le CSS de wri en évitant les float et position:absolute.
Des idées ?
Modifié en dernier par Dominique le 26 janv. 2015, 22:18, modifié 4 fois.
Dominique http://chemineur.fr
-
- Messages : 5041
- Enregistré le : 29 févr. 2004, 17:59
- Localisation : Chambéry - Savoie
Je suis nul en css donc je n'ai aucune idée et je laisse faire ceux qui savent.
Toutefois, si ça peut faire avancer le schmilblick, l'affichage de wri sur firefox sur android se passe plutôt bien et je ne note rien d'anormal ou buggé.
== Limite hors sujet : ==
Certes, c'est parfois écrit vraiment petit mais ça se règle en zoomant.
C'est écrit vraiment trop petit sur : le forum
C'est écrit petit dans le menu d'en haut, et lors de l'ajout d'un nouveau point.
A noter que pour le forum (mais c'est peut-être l'âge ?) je trouve que c'est écrit petit même sur mon firefox de bureau. Je suis obligé d'augmenter la police de tout le site pour ne pas m'user les yeux sur ces si petits caractères. Etant donné l'augmentation assez générale de la taille des écrans, je suggère, si cela va à tout le monde, d'augmenter les polices du forum.
Le menu global du haut pourrait lui aussi utiliser une police un poil plus large que je ne m'en porterais pas plus mal, c'est pas que c'est pas lisible, mais on dirait qu'il a la même police que tout le reste alors qu'il sert assez souvent finalement.
Toutefois, si ça peut faire avancer le schmilblick, l'affichage de wri sur firefox sur android se passe plutôt bien et je ne note rien d'anormal ou buggé.
== Limite hors sujet : ==
Certes, c'est parfois écrit vraiment petit mais ça se règle en zoomant.
C'est écrit vraiment trop petit sur : le forum
C'est écrit petit dans le menu d'en haut, et lors de l'ajout d'un nouveau point.
A noter que pour le forum (mais c'est peut-être l'âge ?) je trouve que c'est écrit petit même sur mon firefox de bureau. Je suis obligé d'augmenter la police de tout le site pour ne pas m'user les yeux sur ces si petits caractères. Etant donné l'augmentation assez générale de la taille des écrans, je suggère, si cela va à tout le monde, d'augmenter les polices du forum.
Le menu global du haut pourrait lui aussi utiliser une police un poil plus large que je ne m'en porterais pas plus mal, c'est pas que c'est pas lisible, mais on dirait qu'il a la même police que tout le reste alors qu'il sert assez souvent finalement.
-
- Messages : 4233
- Enregistré le : 16 févr. 2005, 01:00
- Localisation : Isére
Perso, je ne suis pas gêné actuellement, alors un chouia plus grand ça me va aussi.sly a écrit :Certes, c'est parfois écrit vraiment petit mais ça se règle en zoomant.
C'est écrit vraiment trop petit sur : le forum
C'est écrit petit dans le menu d'en haut, et lors de l'ajout d'un nouveau point.
A noter que pour le forum (mais c'est peut-être l'âge ?) je trouve que c'est écrit petit même sur mon firefox de bureau. Je suis obligé d'augmenter la police de tout le site pour ne pas m'user les yeux sur ces si petits caractères. Etant donné l'augmentation assez générale de la taille des écrans, je suggère, si cela va à tout le monde, d'augmenter les polices du forum.
Le menu global du haut pourrait lui aussi utiliser une police un poil plus large que je ne m'en porterais pas plus mal, c'est pas que c'est pas lisible, mais on dirait qu'il a la même police que tout le reste alors qu'il sert assez souvent finalement.
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Ben non, msieur: il y a des templates (y compris PBPbb ) qui sont très agréables sur mobiles : http://chemineur.cavailhez.fr/?mobile=mobilesly a écrit :Certes, c'est parfois écrit vraiment petit mais ça se règle en zoomant
Le concept semble s'appeler "responsive framework" (sous réserve que j'ai bien tout compris) et est développé par certaines librairies telles JqueryMobile, Fondation, Bootstrap, ...
Faut être exigeant, j'aimerais le même confort quand je fais du WRI sur mon smartphone.
J'ai fait une première tentative ici: http://dom.refuges.info/ (réduire la largeur de la fenêtre pour voir le menu du haut se transformer en un style "responsive framework")
Ben oui, c'est ça le pb. Mais le template de PBPbb, je ne le changerai sontre un template mobile qu'avec PHPBB3. Je ne vais pas me payer le portage du template mobile PHPbb3 vers PHPbb2 !C'est écrit vraiment trop petit sur : le forum
C'est écrit petit dans le menu d'en haut, et lors de l'ajout d'un nouveau point.
Attention: ce menu est déjà très large et se replie mal. C'est peut être bien sur un écran panoramique mais peut poser des pb à de plus petits écrans.Le menu global du haut pourrait lui aussi utiliser une police un poil plus large que je ne m'en porterais pas plus mal...
Dominique http://chemineur.fr
-
- Messages : 5041
- Enregistré le : 29 févr. 2004, 17:59
- Localisation : Chambéry - Savoie
Tu as dis "erratique"
or : erratique :
"Qui est instable, ne manifeste aucune tendance cohérente ; aléatoire."
Ce n'est donc pas le cas. Que la police soit petite, très bien, mais si elle est tout le temps petite, ça n'a rien d'erratique ?
Bon, je comprends donc mieux maintenant. Sinon, le terme que tu cherches est "responsive design" et ce traite en grande partie dans le css il me semble.
J'en conclus pour l'instant, dans une version à pas cher et sans contre indications, qu'on peut quand même augmenter la police sur le forum ;-)
Pour le reste, je n'ai rien contre
or : erratique :
"Qui est instable, ne manifeste aucune tendance cohérente ; aléatoire."
Ce n'est donc pas le cas. Que la police soit petite, très bien, mais si elle est tout le temps petite, ça n'a rien d'erratique ?
Bon, je comprends donc mieux maintenant. Sinon, le terme que tu cherches est "responsive design" et ce traite en grande partie dans le css il me semble.
J'en conclus pour l'instant, dans une version à pas cher et sans contre indications, qu'on peut quand même augmenter la police sur le forum ;-)
Pour le reste, je n'ai rien contre
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Je voulais dire que la taille semble aléatoire (sans raison apparente) suivant la position du texte dans la page (pas dans le temps).sly a écrit :Tu as dis "erratique"
or : erratique :
"Qui est instable, ne manifeste aucune tendance cohérente ; aléatoire."
Ce n'est donc pas le cas. Que la police soit petite, très bien, mais si elle est tout le temps petite, ça n'a rien d'erratique ?
Mais tu as raison, le terme n'est pas le plus approprié.
Oui, tout à fait. Je pense uniquement à du CSS (bien que quelques framework y aient ajouté une tonne de JS).Bon, je comprends donc mieux maintenant. Sinon, le terme que tu cherches est "responsive design" et ce traite en grande partie dans le css il me semble.
Ho ben oui. De toute façon, je ne toucherai pas aux templates du PBPbb2.J'en conclus pour l'instant, dans une version à pas cher et sans contre indications, qu'on peut quand même augmenter la police sur le forum
Mais je vais essayer de faire un HTML + CSS propre aussi bien sur mobile que sur écran (c'est à dire avec une taille de police lisible agréablement sans zoom ni déplacement horizontal).
Le plus dur est d'éviter les float
Dominique http://chemineur.fr
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Après avoir ingurgité une dizaine de tutoriels sur le "responsive design", j'ai fini par comprendre l'effet de la balise:
Le résultat est spectaculaire sur un petit smartphone !
Allez voir sur http://dom.refuges.info/leaflet/
Bon, il reste encore quelques petits réglages sur quelques pages (la pub et la carte nav par exemple) mais le plus gros est fait.
Dispo dans GIT master.
Code : Tout sélectionner
<meta name="viewport" content="width=device-width"/>
Allez voir sur http://dom.refuges.info/leaflet/
Bon, il reste encore quelques petits réglages sur quelques pages (la pub et la carte nav par exemple) mais le plus gros est fait.
Dispo dans GIT master.
Dominique http://chemineur.fr
-
- Messages : 5041
- Enregistré le : 29 févr. 2004, 17:59
- Localisation : Chambéry - Savoie
C'est génial !
Je n'ai pas tout testé, mais c'est vraiment + lisible.
Seul bémol, la carte http://www.refuges.info/nav dont le menu de gauche est certes très lisible, mais cache complètement l'espace à la carte en mode portrait.
En mode paysage, ça va mieux.
Je n'ai pas tout testé, mais c'est vraiment + lisible.
Seul bémol, la carte http://www.refuges.info/nav dont le menu de gauche est certes très lisible, mais cache complètement l'espace à la carte en mode portrait.
En mode paysage, ça va mieux.
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Oui, il faut que je reprenne un peu le CSS et/ou HTML de cette page.sly a écrit :Seul bémol, la carte http://www.refuges.info/nav dont le menu de gauche est certes très lisible, mais cache complètement l'espace à la carte en mode portrait.
De même que la saisie des états du formulaire de point.
Il y a aussi un menu haut adaptatif déroulable à partir d'une simple ligne.
Et enfin le pb de la pub pour les non connectés. A ce propos, je peux masquer la pub en dessous de 970 pixels de large. Qu'en penses tu ?
Sinon, je n'ai pas trouvé de moyen de forcer la largeur donnée par GGads
Dominique http://chemineur.fr
-
- Messages : 5041
- Enregistré le : 29 févr. 2004, 17:59
- Localisation : Chambéry - Savoie
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
J'ai simplifié le menu pour les écrans de largeur inférieure à 640 pixels (mobiles).
A vos claviers pour les avis et remarques.
Note: il faut recharger la page pour avoir la nouvelle feuille de style.
A vos claviers pour les avis et remarques.
Note: il faut recharger la page pour avoir la nouvelle feuille de style.
Modifié en dernier par Dominique le 23 nov. 2014, 22:23, modifié 1 fois.
Dominique http://chemineur.fr
-
- Messages : 539
- Enregistré le : 28 févr. 2013, 17:28
- Localisation : Montagne noire
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Aujourd'hui: modification de la position de la carte en cas d'affichage sur mobile.
Effet de bord: en mode écran, la carte descend un peu.
Effet de bord: en mode écran, la carte descend un peu.
Dominique http://chemineur.fr
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Un petit point au passage: j'ai considérablement travaillé la présentation sur les mobiles: voir ce petit test google
https://www.google.com/webmasters/tools ... fuges.info
https://www.google.com/webmasters/tools ... /nouvelles
https://www.google.com/webmasters/tools ... point/4590
Par contre, le forum ne passe pas:
https://www.google.com/webmasters/tools ... info/forum
Pour la création de points, vous noterez le positionnement en 1 click de la page création en utilisant le GPS du mobile (bien sur, il faut être devant la cabane !)
Etape suivante: la carte NAV et son éditeur: je suis assez prés d'un résultat, ce qui nous permettra éradiquer OL
https://www.google.com/webmasters/tools ... fuges.info
https://www.google.com/webmasters/tools ... /nouvelles
https://www.google.com/webmasters/tools ... point/4590
Par contre, le forum ne passe pas:
https://www.google.com/webmasters/tools ... info/forum
Pour la création de points, vous noterez le positionnement en 1 click de la page création en utilisant le GPS du mobile (bien sur, il faut être devant la cabane !)
Etape suivante: la carte NAV et son éditeur: je suis assez prés d'un résultat, ce qui nous permettra éradiquer OL
Dominique http://chemineur.fr
-
- Messages : 3705
- Enregistré le : 08 avr. 2006, 21:58
Avec la nouvelle carte NAV sous Leaflet, le site est entièrement redessiné pour les mobiles et tablettes.
Le design est "responsive" fluide, c'est à dire qu'il s'adapte à la largeur de l'écran utilisé.
Le design est "responsive" fluide, c'est à dire qu'il s'adapte à la largeur de l'écran utilisé.
Dominique http://chemineur.fr