trop stylé en mobilité !

Posté par  (site web personnel) . Édité par baud123 et Benoît Sibaud. Modéré par claudex. Licence CC By‑SA.
Étiquettes :
38
30
juil.
2012
LinuxFr.org

LinuxFr.org est en perpétuelle évolution. Parmi les dernières modifications, l'une mérite un peu plus d'attention : la feuille de style par défaut de LinuxFr.org passe maintenant mieux sur les mobiles. Vous devriez ainsi pouvoir consulter avec plus de facilité votre site préféré lorsque vous n'êtes pas devant le grand écran de votre ordinateur.

Dans les autres changements, notons la possibilité d'uploader sa propre feuille de style, l'ajout d'une icône à côté du lien « Mon tableau de bord » pour notifier d'une nouvelle réponse à l'un de vos commentaires, la disparition du corps des contenus avec un score négatif sur les pages de listes ou encore l'affichage du sommaire pour les dépêches en cours de rédaction collaborative.

N'oubliez pas de contribuer, LinuxFr.org vit pour vous et par vous ! En particulier, vous pouvez remonter bugs et demandes d'évolution dans le suivi.

Aller plus loin

  • # cool

    Posté par  (site web personnel) . Évalué à 3.

    Vraiment cool toutes ces nouveautés !

    Entre autre l'ajout de la balise de viewport est vraiment bien pour les mobiles.

    <meta content="width=device-width" name="viewport">
    
    

    Si je ne me trompe, le fait d'héberger les CSS devraient permettre de servir ces CSS en https, non ? Dans ce cas, fini les navigateurs qui râlent si on navigue en https et que la css perso est en http !

    Merci pour ces améliorations !

    • [^] # Re: cool

      Posté par  (site web personnel) . Évalué à 5.

      Si je ne me trompe, le fait d'héberger les CSS devraient permettre de servir ces CSS en https, non ? Dans ce cas, fini les navigateurs qui râlent si on navigue en https et que la css perso est en http !

      Effectivement, les feuilles de style hébergées sur LinuxFr.org sont servies via une URL en protocol relative (cf RFC 1808 partie 2.2 et RFC 3986 partie 4.2), donc en HTTPS quand on navigue sur le site en HTTPS.

      • [^] # Re: cool

        Posté par  . Évalué à 2.

        Pour les CSS hébergées ailleurs, avez-vous déjà pensé à utiliser img.linuxfr.org ?

        • [^] # Re: cool

          Posté par  (site web personnel) . Évalué à 4.

          Dans quel sens ? Le sous-domaine ou le reverse-proxy cache ?

          Actuellement, c'est déjà ce sous-domaine qui sert pour les utilisateurs qui uploadent leurs CSS. Par contre, ça ne passe par le mécanisme de reverse-proxy cache, ce sont juste des fichiers statiques qui sont servis.

          Si c'est bien du reverse-proxy cache dont on parle, quel serait l'intérêt de le faire ?

          • [^] # Re: cool

            Posté par  . Évalué à 2.

            Je parlais effectivement du reverse-proxy, pour les utilisateurs qui n'uploadent pas explicitement leur css.

            • [^] # Re: cool

              Posté par  (site web personnel) . Évalué à 4.

              Et du coup, tu verrais quel intérêt à le faire ?

              • [^] # Re: cool

                Posté par  (site web personnel) . Évalué à 4.

                J'imagine si la css d'origine devient indisponible pour une raison x ou y :

                • hébergeur indisponible
                • fichier retiré…

                => cela permet que cela continue de fonctionner

                Bon, avec des effets de bords pas forcément évidents : si mise à jour du fichier d'origine, cela pourrait dans certains cas ne pas être pris en compte immédiatement.

      • [^] # Re: cool

        Posté par  . Évalué à 3.

        D’ailleurs, je me demandais (j’ai même pas vérifié), HSTS est implémenté sur le site ?

  • # Bravo !

    Posté par  . Évalué à 8.

    Je viens de tester le rendu de la feuille de style sur un mobile, et ca rend vraiment tres tres bien. Felicitations!

    Je vois aussi que tu as un peu revu la barre de liens en haut, en deplacant la zone de recherche et en virant l'arrondi, je trouve egalement ca plus clair maintenant.

    Si je peux me permettre deux petites remarques:

    • il y a toujours ces deux rectangles blancs en haut a gauche et en haut a droite, qui ne font qu'alourdir la page sans rien apporter, ca serait possible de les virer ou il y a une raison technique?
    • les avatars prennent beaucoup de place dans les commentaires sur un mobile. Je sais qu'on peut les supprimer globalement, mais est-ce que ca serait possible de les virer si la largeur d'ecran est vraiment petite?

    Merci et bravo encore.

    Excusez l'absence d'accents dans mes commentaires, j'habite en Australie et n'ai pas de clavier francais sous la main.

    • [^] # Re: Bravo !

      Posté par  (site web personnel) . Évalué à 4.

      il y a toujours ces deux rectangles blancs en haut a gauche et en haut a droite, qui ne font qu'alourdir la page sans rien apporter, ca serait possible de les virer ou il y a une raison technique?

      On parle bien de la CSS telle qu'elle est affichée sur un desktop, pas des optimisations pour les mobiles ? Si oui, ces rectangles sont là depuis que l'auteur original de la CSS a proposé cette feuille de style au site. J'imagine qu'ils sont là pour donner un certain style. Comme je me méfie de mes choix en termes de bon goût, j'aimerais bien avoir l'avis d'autres personnes avant d'y toucher.

      les avatars prennent beaucoup de place dans les commentaires sur un mobile. Je sais qu'on peut les supprimer globalement, mais est-ce que ca serait possible de les virer si la largeur d'ecran est vraiment petite?

      J'ai forcé la taille en 50x50 pour les mobiles. Est-ce mieux ?

      • [^] # Re: Bravo !

        Posté par  . Évalué à 2.

        On parle bien de la CSS telle qu'elle est affichée sur un desktop, pas des optimisations pour les mobiles ? Si oui, ces rectangles sont là depuis que l'auteur original de la CSS a proposé cette feuille de style au site. J'imagine qu'ils sont là pour donner un certain style. Comme je me méfie de mes choix en termes de bon goût, j'aimerais bien avoir l'avis d'autres personnes avant d'y toucher.

        Personnellement ça m'a toujours évoqué un bug.

        • [^] # Re: Bravo !

          Posté par  (site web personnel) . Évalué à 4.

          ah, je dois faire partie de ceux qui n'y ont jamais fais gaffe o_O Je viens de les découvrir :)

  • # plus ou plus

    Posté par  . Évalué à 2.

    Suis-je le seul en lisant le titre à se demander s'il y a plus [plusse] de style en mobilité ou s'il n'y a plus [plu] de style en mobilité?

    Au passage, je salue aussi les évolutions du site. :)

    • [^] # Re: plus ou plus

      Posté par  (site web personnel) . Évalué à 1.

      ah oui, je m'étais justement demandé comment faire apparaître la non-négation - l'affirmative donc - permettant d'affirmer qu'il y a plus de style en mobilité (donc +).

      Si cela convient à NoNo< autant modifier le titre pour « Il y a plus de style en mobilité sur LinuxFr.org » (ajout des majuscules en début + précision que cela concerne bien le site LinuxFr.org, même si cela fait redondant).

      • [^] # Re: plus ou plus

        Posté par  . Évalué à 5.

        "Davantage" est peut-être plus explicite de "Plus" ?

        • [^] # Re: plus ou plus

          Posté par  . Évalué à 7.

          tu veux dire que "davantage" est davantage explicite ?

          Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

          • [^] # Re: plus ou plus

            Posté par  . Évalué à 3.

            Bonne question, je davantageoye ! :)

            Il se prend pour Napoléon, son état empire.

      • [^] # Re: plus ou plus

        Posté par  (site web personnel) . Évalué à 2.

        Si cela convient à NoNo< autant modifier le titre pour « Il y a plus de style en mobilité sur LinuxFr.org »

        Heu, ça ne règle pas le problème, on peut toujours interpréter le plus des deux façons.

        • [^] # Re: plus ou plus

          Posté par  . Évalué à 5.

          Non, c'est logique :
          il y a plus = davantage
          il n'y a plus (négation) apu !

          En fait la phrase n'est pas ambiguë.

          Il se prend pour Napoléon, son état empire.

          • [^] # Re: plus ou plus

            Posté par  . Évalué à 3.

            à mon avis ça serait mieux clair d'écrire "davantage" ici.

            Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

            • [^] # Re: plus ou plus

              Posté par  . Évalué à 0.

              Perso, c'est un problème auquel je fais de plus en plus attention. Du coup, dés que je sens que cela risque de porter à confusion, je n'hésite plus à remplacer plus par pluss ou plû.
              Bon ok,
              1) avec 4 "plus", la phrase ci-dessus prouve que je ne le fais pas tout le temps ^^
              2) c'est 2 mots ne sont pas dans le dictionnaire.

              Ce à quoi je réponds : C'est une langue vivante! Et le but de la langue est avant tout d'être une aide à la bonne compréhension entre nous, pas un frein. Donc la faire évoluer à notre convenance tout en sachant ce qu'on fait et pourquoi on le fait, ne me semble pas un sacrilège, au contraire.

        • [^] # Re: plus ou plus

          Posté par  (site web personnel) . Évalué à 5.

          Voilà maintenant on a un titre qui cause plus le jeune.

  • # Barre parasite

    Posté par  . Évalué à 2. Dernière modification le 30 juillet 2012 à 19:13.

    Beau boulot, c'est particulièrement lisible sur un téléphone, merci beaucoup.

    En revanche il reste un truc gênant, en tout cas sur mon smartphone, la barre du bas (seuil, contenus avec + de commentaires…) apparaît en travers du premier article et n'est pas cliquable…

    GTI 9100 P (Galaxy S2) Androïd 2.3.4 (gingerbread)

    Ça le fait à d'autres ?

    Edit :
    Oubliez c'est uniquement avec dolphin browser, avec firefox tout roule, désolé pour le bruit :)

    Il se prend pour Napoléon, son état empire.

    • [^] # Re: Barre parasite

      Posté par  (site web personnel) . Évalué à 2. Dernière modification le 30 juillet 2012 à 20:12.

      Ça le fait à d'autres ?

      oui, avec Zirco Browser 0.4.4 sur HTC Desire Z, Android 2.3 iirc

      mais bon, tant que les touches h j k l fonctionnent - pour naviguer de contenu en contenu ou nouveau commentaire en nouveau commentaire, ainsi que g pour revenir en début de page - moi ça me va.

  • # Nouvelle fonctionnalité : avoir une CSS différente pour juste une session

    Posté par  (site web personnel) . Évalué à 8.

    On peut maintenant choisir une feuille de style pour juste une session depuis la page Changer de style (pour les utilisateurs authentifiés donc). L'adresse de la feuille de style est enregistrée dans le cookie stylesheet, donc même les anonymes peuvent créer à la main le cookie pour avoir une feuille de style spécifique pour un navigateur donné.

    Cf https://github.com/nono/linuxfr.org/commit/435d8c18e66ddd62db70591027cf0e443ca81ae1

  • # Media handheld

    Posté par  (site web personnel, Mastodon) . Évalué à 2.

    Hello,

    Il manque le media handheld dans la CSS, il faudrait faire :

    @media screen and (max-width: 400px), handheld
    
    

    C'est notamment utilisé dans Opera Mini et UCBrowser.

    « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)

    • [^] # Re: Media handheld

      Posté par  (site web personnel) . Évalué à 4.

      C'est ajouté. Cf https://github.com/nono/linuxfr.org/commit/917bb1dcd717f780ac6b43baeb7a35d7bc9d122e

      C'est notamment utilisé dans Opera Mini

      Bizarre, j'avais testé avec Opera Mini Emulator et ça marchait bien sans ça.

      et UCBrowser

      Lui, par contre, je ne le connaissais même pas.

      • [^] # Re: Media handheld

        Posté par  (site web personnel, Mastodon) . Évalué à 2.

        Merci !

        UCBrowser est genre le navigateur le plus utilisé en chine (56% de part de marché, 70% sur Android), et commence à bien percer dans les restes du monde.

        J'aurais aussi pu citer le Nokia Browser qui équipe les 1,5 milliards (!) de téléphones Nokia Series 40, qui comme UCWeb et Opera Mini utilise un proxy qui compresse les pages, sauf que UCWeb a son propre moteur de rendu et Nokia Browser utilise Gecko (alors que Series 40 fournit déjà du Webkit pour les web-apps, mais pour une raison incompréhensible il est impossible de l'utiliser pour naviguer sur le web…).

        Sinon je crois que la gestion de handheld est désactivée par défaut sur Opera Mini depuis quelques temps, il faut aller activer l'option "Affichage colonne unique" qui reformatte le contenu et évite cet horrible système de zoom recopié des interfaces tactiles.

        « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)

  • # score négatif des journaux

    Posté par  . Évalué à 3.

    …la disparition du corps des contenus avec un score négatif sur les pages de listes…

    Je trouve ça embêtant comme changement. Perso, je navigue toujours à -42 pour voir tous les commentaires. Mais dans le cas des journaux négatifs, le seuil ne marches pas (on ne voit que le titre).

    Du coup, j'ouvre systématiquement les journaux négatifs … pour m’apercevoir qu'effectivement c'est inintéressant (mais bon, on sait jamais).

    J'ai rien contre le système de notation mais uniquement à partir du moment où le lecteur a le choix (ou alors y'a une option qui m'a échappé).

  • # Rendu sur Nokia N9 ...

    Posté par  (site web personnel) . Évalué à 1.

    Bonjour,

    Sympa l'initiative.

    Voici le rendu sur un Nokia N9 :

    Photo 1 et 2, rendu de la page principale en pointant simplement sur http://www.linuxfr.org :

    Photo 1

    Photo 2

    Photo 3 rendu de l'article après avoir cliqué sur 'Lire la suite' :

    Photo 3

    L'ajustement automatique en largeur fonctionne bien lors de l'arrivée sur la page d'accueil, mais pas après avoir cliqué sur 'Lire la suite'.

    A++

Suivre le flux des commentaires

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