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

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

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

→ 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

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

960px (tablettes larges)

Espace privé fluide - 960px

1200px (bureaux)

Espace privé fluide - 1200px

1920px (bureaux larges)

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.

Notes

[1Selon de nombreux articles : 1, 2

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom