[MC:TERMINE]Design du site pour les mobiles

Problèmes, bugs et difficultés rencontrés sur le site.
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

[MC:TERMINE]Design du site pour les mobiles

Message par Dominique »

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 ?
Modifié en dernier par Dominique le 26 janv. 2015, 22:18, modifié 4 fois.
Avatar du membre
sly
Messages : 5041
Enregistré le : 29 févr. 2004, 17:59
Localisation : Chambéry - Savoie

Message par sly »

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.
Avatar du membre
Claude Mauguier
Messages : 4233
Enregistré le : 16 févr. 2005, 01:00
Localisation : Isére

Message par Claude Mauguier »

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.
Perso, je ne suis pas gêné actuellement, alors un chouia plus grand ça me va aussi.
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

sly a écrit :Certes, c'est parfois écrit vraiment petit mais ça se règle en zoomant
Ben non, msieur: il y a des templates (y compris PBPbb :satan:) qui sont très agréables sur mobiles : http://chemineur.cavailhez.fr/?mobile=mobile
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")
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.
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 !
Le menu global du haut pourrait lui aussi utiliser une police un poil plus large que je ne m'en porterais pas plus mal...
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.
Avatar du membre
sly
Messages : 5041
Enregistré le : 29 févr. 2004, 17:59
Localisation : Chambéry - Savoie

Message par sly »

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
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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 ?
Je voulais dire que la taille semble aléatoire (sans raison apparente) suivant la position du texte dans la page (pas dans le temps).
Mais tu as raison, le terme n'est pas le plus approprié.
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.
Oui, tout à fait. Je pense uniquement à du CSS (bien que quelques framework y aient ajouté une tonne de JS).
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 ;-)
Ho ben oui. De toute façon, je ne toucherai pas aux templates du PBPbb2.
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 :evil: :blue: :calimero:
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

Après avoir ingurgité une dizaine de tutoriels sur le "responsive design", j'ai fini par comprendre l'effet de la balise:

Code : Tout sélectionner

<meta name="viewport" content="width=device-width"/>
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.
Avatar du membre
sly
Messages : 5041
Enregistré le : 29 févr. 2004, 17:59
Localisation : Chambéry - Savoie

Message par sly »

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.
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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.
Oui, il faut que je reprenne un peu le CSS et/ou HTML de cette page.
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 :calimero:
Avatar du membre
sly
Messages : 5041
Enregistré le : 29 févr. 2004, 17:59
Localisation : Chambéry - Savoie

Message par sly »

Dominique a écrit : 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 ?
Si c'est plus simple, go.
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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.
Modifié en dernier par Dominique le 23 nov. 2014, 22:23, modifié 1 fois.
Avatar du membre
leosw
Messages : 539
Enregistré le : 28 févr. 2013, 17:28
Localisation : Montagne noire

Message par leosw »

Je trouve ça parfait !!!!
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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.
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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 :)
Avatar du membre
Dominique
Messages : 3704
Enregistré le : 08 avr. 2006, 21:58

Message par Dominique »

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é.