Espace privé fluide

Un peu à l’étroit dans l’interface d’administration de SPIP ? Textes pas assez lisibles ? Consultation difficile sur petits écrans ? Ayez le réflexe « Espace privé fluide » !

Objectif

L’objectif de ce petit plugin est d’améliorer le confort de lecture et d’utilisation de l’espace privé en exploitant au mieux la largeur disponible.

Pour ce faire, il charge une simple feuille de style CSS supplémentaire qui revoit sa disposition générale.

Principe

L’espace privé de SPIP est composé de 3 blocs principaux :

  • Le contenu principal
  • Une colonne de navigation
  • Une colonne optionnelle

En schématisant, voici ci-dessous ce que l’on obtient selon les écrans.

Dans l’espace privé de base, la largeur est fixe : elle est inadaptée aux petits écrans, le contenu étant tronqué.

Schéma espace privé fixe
Schéma espace privé fixe

Et voici ce que fait le plugin : toute la largeur est utilisée, et le nombre de colonnes s’adapte à celle-ci.

Schéma espace privé fluide
Schéma espace privé fluide

Et en vidéo :

Screencast Espace privé fluide
Aperçu de la disposition des blocs principaux en fonction del la largeur de l’écran

À cela s’ajoutent quelques ajustements :

→ Polices de caractère « Source Sans Pro » et « Source Serif Pro »

Source Sans Pro
Source Sans Pro
Source Serif Pro
Source Serif Pro

→ La taille du texte est proportionnelle à celle de l’écran : autour de 16px sur mobile, et 20px sur un écran large.

Taille du texte proportionnelle
Taille du texte proportionnelle

→ La largeur de certains contenus est limitée de façon à obtenir environ 75 caractères par ligne pour une meilleur lisibilité [1].

Largeur du texte limitée à environ 75 caractères
Largeur du texte limitée à environ 75 caractères

Nb : La préférence utilisateur « écran étroit/écran large » n’a plus aucun effet avec le plugin activé.

Une expérimentation

Un des objectifs initiaux du plugin était de tester concrètement une idée de direction possible pour les futures évolutions de l’espace privé de SPIP.

Son développement part d’un double constat :

  1. Pour les utilisateurs, la consultation s’avère peu pratique voire impossible sur certains écrans.
  2. Pour les développeurs, il est parfois compliqué de « faire rentrer » du contenu dans la largeur disponible.

Ses ajouts fonctionnent le mieux sur les pages disposant de colonnes latérales, à l’inverse les pages sans colonne peuvent sembler un peu disproportionnées, le contenu central s’étalant alors sur toute la largeur.

En l’état il ne s’agit que d’une expérimentation sous la forme d’une simple feuille de style. Faire « correctement » un espace privé de largeur fluide doit s’accompagner d’un remaniement des squelettes et de leur contenu, bref s’inscrire dans un projet de refonte. Mais ceci est une autre histoire !

En images

Quelques captures de la même page à différentes largeurs d’écrans.

480px (mobiles)

Espace privé fluide - 480px
Espace privé fluide - 480px

960px (tablettes larges)

Espace privé fluide - 960px
Espace privé fluide - 960px

1200px (bureaux)

Espace privé fluide - 1200px
Espace privé fluide - 1200px

1920px (bureaux larges)

Espace privé fluide - 1920px
Espace privé fluide - 1920px

Plugins apparentés

  • Plugin Espace privé plus large, une variante de ce plugin.
  • Plugin Agrandir la largeur de page. Attention! les paramétrages de ce plugin peuvent entrer en conflit avec ceux de Espace privé fluide: il est conseillé de ne pas les utiliser simultanément.
  • Plugin Affiche connexe très expérimental pour les plus téméraires : allège un composant de l’espace privé, prévu pour fonctionner de concert avec Espace privé fluide.

Footnotes

[1Selon de nombreux articles : 1, 2

updated on 26 November 2019

Discussion

6 discussions

  • Très bien !!... Utilisé sur trois sites !.... Je n’ai eu qu’à modifier un peu le css pour la page statistiques ! Parfait pour mon utilisation !

    Reply to this message

  • 2

    Lorsque je suis sur un mac écran très large avec firefox et ce plugin activé, il n’y a qu’une colonne et donc c’est très difficile d’avoir accès aux informations des colonnes gauche et droite car leur contenu est renvoyé tout en bas de la page (par exemple lorsqu’on édite un article).
    Est-ce que d’autres ont ce problème ?
    Merci

    • Hello,
      Quelle version de quel navigateur ?
      Il rest encore à implémenter un fallback pour les vieux navs (je suppose que c’est le cas pour toi).

    • Bonsoir, c’est probable mais là je ne peux dire (c’était dans une salle de formation).

    Reply to this message

  • 3

    Bonjour,

    merci pour ce plugin. Mon constat : sur un grand écran, la colonne du milieu devient trop grande, et donc difficilement lisible (photos sur le 1920 px). Je crois que cela a été dit sur la liste zone, mais au cas où : un texte trop large n’est plus lisible.

    • Je crois que cela a été dit sur la liste zone, mais au cas où : un texte trop large n’est plus lisible.

      Et c’est même mentionné dans l’article dis donc.
      Pour l’instant seuls les textes dans le #wysiwyg et dans les formulaires sont limités en largeur. Alors dans les pages en une seule colonne, on peut se retrouver avec certains textes très longs effectivement.
      Mais bon pour l’instant ce sont des compromis.

    • Effectivement, sur les formulaires c’est bon. J’avais pas vu que c’était noté dans l’article (que j’ai plus relu depuis la publication, il faut bien le dire).

      Mais même sur une page à 3 colonnes je peux avoir des textes qui font 120-130 caractères de large...

      c’àtait simplement un retour d’experience, pour le futur.

    • @maieul : tu as testé la branche “remix” ?
      Le comportement est un peu différent, avec une largeur max bloquée pour l’ensemble.

    Reply to this message

  • 4

    Je ne sais pas si “Prive Fluide Remix” est maintenu en parallèle, la page de documentation n’existe plus. À la dernière maj (v1.0.20, https://zone.spip.org/trac/spip-zone/changeset/117823/spip-zone/_plugins_/prive_fluide/branches/remix), le redimensionnement de l’affichage fait passer, pour les articles (et uniquement les articles), le bas de page (avec les indications SPIP version, mise à jour etc, :" SPIP 3.2.5 [24404] est un logiciel libre distribué sous licence GPL.+ écran de sécurité 1.3.12 Pour plus d’informations, voir le site https://www.spip.net/fr.") dans une colonne à gauche, qui se retrouve quasiment vide donc, au détriment de tout le reste. Il n’y avait pas ce problème avec la v1.0.15.

    • @Naema : je laisse nicod répondre, c’est lui qui maintient le remix.

      @nicod : je t’ai remis en auteur de l’article pour que tu aies les notifs

    • Merci @tcharlss

      @Naema : je maintiens ce plugin en parallèle de celui de tcharlss, je l’utilise en production sur plusieurs sites, et je ne constate pas le problème que tu évoques.
      De plus, en vérifiant les modifications entre la 1.0.15 et la 1.0.20, je ne vois pas ce qui causerait ce comportement.
      Je pourrais éventuellement jeter un oeil si tu peux me donner un accès temporaire à ton site, tu peux me contacter depuis ma page : https://contrib.spip.net/nicod_

    • Merci @nicod et @tcharlss. Je donne un accès sous peu à Nicod après avoir réactivé/réinstallé le pugin. En regardant le code sur la zone, j’ai l’impression que c’est un “float” ajouté dans les dernières maj (peut-être la 18 ou la 19, depuis la 20) qui cause ce pb. Je travaille sur pc grand écran en redimensionnant la fenêtre de navigateur aux 2/3 environ.

    • Problème résolu après réinstallation du plugin.
      Le float en question concernait juste les logos dans les listes d’articles, pas de rapport.

    Reply to this message

  • 4

    Bonjour,

    Je ne sais quoi prendre
    https://contrib.spip.net/Plugin-Agrandir-la-largeur-de-page
    ne fait il pas déjà le boulot

    et coté téléchargement je visionne

    • Espace privé fluide (1.0.9)
      (ZIP – 123.8 ko – stable) SPIP 3.0, SPIP 3.1, SPIP 3.2
    • Espace privé plus large (1.0.19)
      (ZIP – 541.9 ko – stable) SPIP 3.2, SPIP 3.1, SPIP 3.0

    Aider moi a faire le bon choix , merci

    • La principale différence c’est que celui-là fait un peu de responsive, et pas de configuration, voilà.

      En téléchargement, je ne vois que Fluide 1.0.9.

    • En téléchargement, je ne vois que Fluide 1.0.9.

      c’est parce qu’entre temps j’ai supprimé l’autre, qui avait été ajouté automatiquement par le script de syncro car il prétendait être documenté ici (ce qui n’est plus le cas, comme tu le sais !)

    • Merci pour la maintenance, top :)

    • arf thanks, sont toujours a donf les écureuils ;)

    Reply to this message

  • 2

    Bonjour,

    Merci pour la doc et le plugin.

    Dans la liste des plugins apparentés, il me semble que https://contrib.spip.net/makicatta aurait lui aussi sa place. Non ?

    • Hello RealET,

      Dans les apparentés je n’ai mis que ceux qui aggrandissent la largeur de la page (bon, excepté pour affiche connexe), je crois que Makicatta fait beaucoup plus que ça.

      Après pour voir les apparentés au sens large, c’est la rubrique « Apparence de l’espace privé » quoi.
      D’ailleurs cet article y aurait plus sa place en passant, je n’avais pas fait attention.

    • les rubriques sont en cours de recatégorisation par Eric, suite à la nouvelle typologie des plugins. A priori apparence de l’espace privé va sauter, et on aura un truc général “administration/espace-prive”

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom