Suivi — Feuilles de style (CSS) Compilation des problèmes sur mobile

#1294 Posté par  . État de l’entrée : corrigée. Assigné à Bruno Michel. Licence CC By‑SA.
Étiquettes :
2
18
mar.
2014

Au lieu de multiplier les rapports de bug, je met tout ici et je noterais au fur et à mesure ce qui a été corrigé.

Régressions

  • [Corrigé] Dans les dépêches en rédaction, la date est affichée dans un encart à droite mais pas ailleurs (dépêches publiées, journaux…)
  • [Corrigé] Plus de barre de navigation (celle qui permet de naviguer de commentaires en commentaires) sur certains téléphones en mode portrait.
  • [Corrigé] Plus d'indentation pour suivre les fils de discussion ni d'avatars en mode portrait?
  • Avec le navigateur par défaut d'Android (en 4.3) depuis la dernière grosse mise à jour de la CSS (voir plus bas), les icônes:
    • [Corrigé] sont bien plus grosses que les bordures de leur bouton
    • [Corrigé] se répètent sur toute la largeur du bouton (à part le bouton «Envoyer un commentaire»).
  • [Corrigé] Polices un peu trop petites dans certains navigateurs (ex: Firefox Mobile).
  • [Corrigé] Certaines icônes sont aplaties (ex: le cadenas au-dessus de «proposer un contenu», problème présent également sur PC), d’autres allongées (ex: icônes qui représente des bulles qui indique un nouveau message dans la tribune de rédaction d’une dépêche).
  • Les puces des listes sont légèrement coupées à gauche sur le navigateur Android.
  • Avec Firefox mobile et le navigateur Android (au moins), pour la plupart des contenus on voit « Ce contenu est-il ou ? » (il n'affiche pas les boutons Pertinent et Inutile). Pas de souci sur les commentaires par contre.

Trucs à améliorer:

  • [Corrigé] Le titre des dépêches passe en-dessous que les deux encarts «date» et «nombre de commentaire».
  • Marges beaucoup trop grandes:
    • [Partiellement corrigé] lors de la rédaction de commentaires (et marges inutiles et inégales autour de la zone de texte),
    • [Corrigé] dans les paramètres du compte,
    • dans les dépêches en rédaction,
    • [Partiellement corrigé] pour le texte de l'aide sur Markdown.
  • [Corrigé] Listes trop indentées (cf. sommaires un peu touffus comme là).
  • [Corrigé] La barre de navigation devrait prendre toute la largeur de l’écran avec les zones des boutons cliquables bien indiquées.
  • La tribune de l’accueil de la rédaction a une marge à peu près deux fois plus grande que la tribune d’une dépêche en cours de rédaction.
  • [Corrigé] Dans l’interface de rédaction, que ça soit sur la page d’accueil ou pour une dépêche en rédaction, il y a des marges entre l’en-tête et le contenu.
  • [Corrigé] En mode paysage, le logo Linuxfr ne devrait pas dépasser la taille de l’en-tête (afin de ne pas laisser de vide en-dessous du bouton «Rédaction» et de ne pas avoir un logo trop gros).
  • Enlever les marges droite et au gauche de tous les élément qui entourent des blocs du site lorsque la largeur est à 100%. C'est déjà fait sur certains blocs comme pour les dépêches mais pas les commentaires…
  • Aligner les boutons «Réorganiser» et «Soumettre la dépêche» avec «Marquer comme urgent» etc.

Pistes d’améliorations

  • En mode paysage, L’en-tête du site est vide entre les liens du compte et le logo.
  • Unifier les marges entre les différentes parties du site (dépêche publiée/en rédaction par exemple)
  • | et les bordures des boutons de la barre de navigation (droite du bouton précédent, gauche du bouton suivant) font doublon.

  • # Du mieux

    Posté par  (site web personnel) . Évalué à 3 (+0/-0).

    Voici un premier commit qui devrait déjà aider un peu : https://github.com/nono/linuxfr.org/commit/81fbc35e087b8597f6526bf82b068d1e8bacb464.

    • [^] # Re: Du mieux

      Posté par  (site web personnel) . Évalué à 3 (+0/-0).

      La suite : https://github.com/nono/linuxfr.org/commit/e9d45ebc6b7ad220dec9abda92403cc3c7bcf144.

      • [^] # Re: Du mieux

        Posté par  . Évalué à 2 (+0/-0).

        J’ai noté tous les changements que j’ai trouvé, dis-moi si j’ai oublié quelque chose. Merci beaucoup pour les modifications, c’est beaucoup mieux comme ça!

        Écrit en Bépo selon l’orthographe de 1990

        • [^] # Re: Du mieux

          Posté par  (site web personnel) . Évalué à 3 (+0/-0).

          Encore un pour le logo en mode paysage : https://github.com/nono/linuxfr.org/commit/04582ea087612362039e4c8c3e945738cc7fa83f

          Sinon :

          Plus d'indentation pour suivre les fils de discussion ni d'avatars en mode portrait?

          Je pensais avoir réglé ça lors d'un précédent commit. C'est toujours pas bon ?

          On peut voir un rectangle gris en haut de la page, au dessus des liens de navigation qui ne sert à rien (d’ailleurs même sur la version bureau on peut voir ce rectangle gris avec du vide juste au dessus!).

          C'est voulu, ça fait parti du thème original. Mon sens de l'esthétisme étant ce qu'il est, je préfère ne pas trop y toucher.

          Listes trop indentées (cf. sommaires un peu touffus comme là).

          Là aussi, je pensais avoir réglé le problème.

          La tribune de l’accueil de la rédaction a beaucoup de marge sur les côtés alors que la tribune d’une dépêche en cours de rédaction n’en a pas beaucoup.

          Idem

          • [^] # Re: Du mieux

            Posté par  . Évalué à 2 (+0/-0).

            Le logo dépasse toujours en mode paysage pour le moment, toujours plus d'indentation ni d'avatars en mode portrait sur mon S2, les listes sont trop indentées à mon gout (la puce d'une liste imbriquées est alignée avec la deuxième lettre de l'élément aussi, je pense que ça serait mieux si elle était située en-dessous de la première lettre), et la tribune de rédaction a le double de marge que la tribune d'une dépêche (pas très gênant vu la taille cependant).

            Je précise que j'ai essayé de vider le cache sur le navigateur Android et Firefox Mobile, mais pas de changements.

            Écrit en Bépo selon l’orthographe de 1990

  • # Capture d'écran

    Posté par  (site web personnel) . Évalué à 3 (+0/-0).

    Avec le navigateur par défaut d'Android (je suis en 4.3), les icônes sont bien plus grosses que les bordures de leur bouton et se répètent sur toute la largeur du bouton (à part le bouton «Envoyer un commentaire»), et ce depuis la dernière grosse màj de la CSS. Je peux fournir une capture d'écran si nécessaire.

    Oui, je veux bien une capture d'écran. Le navigateur par défaut sur mon android (un modeste 2.3) n'affiche juste pas l'icône.

    • [^] # Re: Capture d'écran

      Posté par  . Évalué à 2 (+0/-0). Dernière modification le 23 mars 2014 à 21:51.

      Première capture:
      Capture 1

      Deuxième capture:
      Capture 2

      Note également le «Ce contenu est-il ou ?». Les mots «pertinent» et «inutile» ont disparu depuis 1 ou 2 jours (je suppose depuis la dernière modification que tu mentionnes), que ça soit sur le navigateur d’Android ou Firefox mobile (mais même en redimensionnant la vue sur bureau je n’ai pas ce comportement).

      Note: sur les captures ce n’est pas le navigateur par défaut d’Android mais c’est il utilise le même moteur, de ce fait les comportements sont identiques (j’ai testé).

      Écrit en Bépo selon l’orthographe de 1990

  • # Police pattes de mouches

    Posté par  . Évalué à 2 (+0/-0).

    Un des problèmes que j'ai rencontré dans mon utilisation de linuxfr sur mobile c'est aussi la taille "pattes de mouches" de la police. J'ai remarqué que la police semble plus petite sous firefox mobile beta que sous chrome mais je pense que c'est dû à une police par défaut différente (c'est dûr de vérifier…). Pour moi la police est vraiment à la limite inférieure du lisible sans mettre mon nez sur l'écran, et ça ne doit pas arranger les problèmes de vue des utilisateurs…

    J'utilise un Sony Xperia P dont les spécifications d'écran sont:

    • Résolution: 540x960 pixels
    • Taille physique: 4.0 inches
    • Densité de pixels: ±275 ppi

    Je ne peux en toute honnêteté pas dire que le problème est généralisé car la lisibilité dépend probablement de la densité de pixels des différents modèles de téléphones et de tablettes. Cependant je crois qu'une taille un peu plus grande sur mobile ne pourrait faire que du bien. Par ailleurs le paramètre "text size" dans Firefox mobile n'a absolument aucune influence sur la taille du texte sur le site malgré que les tailles soient définies en em…

    • [^] # Re: Police pattes de mouches

      Posté par  . Évalué à 2 (+0/-0).

      Je n'ai pas rencontré ce problème avec un Samsung Galaxy S2. Pour Firefox, je pense que c'est dû à la police par défaut, Clear Sans.

      Tu peux fournir une capture d'écran, qu'on se fasse une idée de la taille du texte?

      Écrit en Bépo selon l’orthographe de 1990

      • [^] # Re: Police pattes de mouches

        Posté par  . Évalué à 2 (+0/-0).

        Voici:

        Capture

        Il faut aussi se souvenir que l'écran fait environ 5cm sur 8.5 pour pouvoir se rendre compte. La police est certes nette, mais fort petite sur l'écran.

        • [^] # Re: Police pattes de mouches

          Posté par  . Évalué à 2 (+0/-0). Dernière modification le 27 mars 2014 à 14:54.

          Effectivement c'est plus petit que chez moi.

          Je note que tu as la barre de navigation en mode portrait, mais pas moi (alors que j'aimerais bien).

          Écrit en Bépo selon l’orthographe de 1990

          • [^] # Re: Police pattes de mouches

            Posté par  . Évalué à 2 (+0/-0). Dernière modification le 27 mars 2014 à 16:03.

            C'est avec Firefox mobile. Avec Chrome j'ai à peu près le même rendu que toi.

            D'ailleurs pour la barre je suggèrerais de l'avoir en width:100% et avec des boutons < et > bien carrés avec des bordures (pour bien montrer où on doit mettre les doigts, c'est parfois un peu fastidieux)

            • [^] # Re: Police pattes de mouches

              Posté par  . Évalué à 2 (+0/-0).

              J’ai ajouté tes suggestions dans le ticket.

              Écrit en Bépo selon l’orthographe de 1990

              • [^] # Re: Police pattes de mouches

                Posté par  . Évalué à 2 (+0/-0). Dernière modification le 28 mars 2014 à 17:15.

                Oui par contre je suis pas très d'accord avec "La barre de navigation devrait prendre toute la largeur de l’écran et être plus petite (à l’image de la «version bureau» ou elle est très fine)." parce que si je demande des boutons bien carrés avec bordures et clicables c'est justement parce que j'ai du mal à cliquer dessus avec mes gros doigts actuellement.

                Je crois qu'il faut que ça prenne tout l'écran pour éviter de pousser sur ce qu'il y a derrière, et qu'on s'assure que toute la hauteur de la barre est clicable (pas de marges inutiles) pour simplifier l'utilisation au doigt. Sur le desktop personne n'utilise les boutons sur la barre, tout le monde utilise son clavier je pense.

                Et mon screenshot n'est pas chrome mais firefox mobile…

  • # Pertinenter et inutiler.

    Posté par  (site web personnel) . Évalué à 2 (+0/-0).

    Sur mon Galaxy S2 en utilisant Firefox, je ne peux pas “plusser” ou “moinsser” les journaux, dépêches ou entrées de forum. En bas de la dépêche/journal/forum j'ai :

    Ce contenu est-il ou ? Il en manque un bout.

    Je peux le faire pour les commentaires par contre.

    « Il vaut mieux mobiliser son intelligence sur des conneries que mobiliser sa connerie sur des choses intelligentes. »

Envoyer un commentaire

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.