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

Footnotes

[1Selon de nombreux articles : 1, 2

updated on 7 November 2019

Discussion

3 discussions

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

    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