[Fait] Un bandeau fixe ?

[Dominique]

Bonjour,

Je vous propose de figer le bandeau en haut des fenêtres suffisamment hautes (> 500 pixels) afin de rendre plus fluide la navigation
Ce bandeau a aussi été optimisé pour les différents affichages sur mobiles.

Prototype : https://dom.refuges.info/

En attente de vos avis, propositions, bugs, ...

[sly]

Hello,

Je n'ai pas trop compris ce que tu essayais de réparer ? en quoi c'est "plus fluide" que maintenant ?

Sinon oui, ça fonctionne, je ne vois pas de problème (sauf "nouvelles" qui a été oubliée)
On perd un tout petit peu d'espace en haut, mais sur grand écran ça gêne pas, c'est juste que je n'ai pas vu le gain ergonomique, mais comme je ne vois pas non plus d'inconvénients, je voudrais pas être rabat joie, alors go !

[Dominique]

en quoi c'est "plus fluide" que maintenant ?

Je pense à la consultation de pages longues (par exemple une fiche ou un sujet de forum bien pourvu en commentaires, photos, ...
Le scroll vers le haut pour accéder à une autre partie du site peut être fastidieux, notamment sur mobile à cause de la faible hauteur et de l'absence de barre de scrool.

Je pense aussi à une meilleure vision du plan du site pour ceux qui n'en ont pas une grande habitude.

je ne vois pas de problème (sauf "nouvelles" qui a été oubliée)

Oups merci, je regarde !

[Pascal 74]

Si j'ai saisi, les menus déroulants se retrouvent en dessous avec une largeur optimisée entre eux pour occuper la largeur de la page, le bandeau du lien de la page d'accueil au dessus à gauche et celui de la fenêtre de recherche du site à droite pour un affichage de type écran d'ordinateur. le texte des menus déroulants est plus gros aussi
pas vu de différence, par contre, sur un mobile.

J'ai une préférence pour l'ancien modèle, plus compact. Mais c'est sur mon écran d'ordinateur avec la résolution avec laquelle j'ai l'habitude de fonctionner. Par sûr que ce soit un bon exemple. Je te laisse décider.

sly a écrit : 29 mai 2026 17:47
en quoi c'est "plus fluide" que maintenant ?

Je pense à la consultation de pages longues (par exemple une fiche ou un sujet de forum bien pourvu en commentaires, photos, ...
Le scroll vers le haut pour accéder à une autre partie du site peut être fastidieux, notamment sur mobile à cause de la faible hauteur et de l'absence de barre de scrool.

Je pense aussi à une meilleure vision du plan du site pour ceux qui n'en ont pas une grande habitude.

?
Pour mon utilisation, je ne vois pas la différence.

[Dominique]

Si j'ai saisi, les menus déroulants se retrouvent en dessous avec une largeur optimisée entre eux pour occuper la largeur de la page, .

tiens, je ne vois pas ça ?

Pour mon utilisation, je ne vois pas la différence.

C'est normal, le "cahier des charges" stipule qu'on ne doit pas perturber l'utilisation traditionnelle.
Je pense en effet aux petits mobiles et à ceux qui découvrent le site.
Effectivement, ce n'est pas une grande révolution mais cela inclut une simplification de la feuille de style qui devenait difficile à gérer.
Cela corrige aussi quelques bugs dans des cas tordus, par exemple le mobile en position horizontale.

Le principal avantage ergonomique est la disponibilité d'un bandeau permanent donnant le plan du site et les liens simples pour y naviguer.
Je conçois que ça ne soit pas spectaculaire pour les chevronnés.

[Pascal 74]

tiens, je ne vois pas ça ?

Site test de Dom

dombandeau.JPG (23.94 Kio) Vu 995 fois

Site Refuges.info

wribandeauJPG.JPG (21.5 Kio) Vu 995 fois

[sly]

Je pense à la consultation de pages longues

Ho punaise, je viens tout juste de comprendre quel était "vraiment" le changement, c'est que sur les pages longues, le bandeau reste présent de manière permanente.
Là, ok, je comprend mieux.

L'idée est séduisante et me plait, mais question, pourquoi l'avoir fait plus haut que le précédent ? Puisqu'il va être présent de manière permanente, autant qu'il soit le moins haut non ?
edition : en gros voir les captures d'écran de Pascal

[Dominique]

L'idée est séduisante et me plait, mais question, pourquoi l'avoir fait plus haut que le précédent ? Puisqu'il va être présent de manière permanente, autant qu'il soit le moins haut non ?

Bonne remarque. J'ai voulu faire des jolies icônes unicodes pour les mobiles mais on peut aussi faire un bandeau rétréci.

Je suis plus en plus dubitatif sur la pertinence d'avoir un style adapté aux téléphones tenus horizontalement.
C'est très compliqué et complexifie considérablement le CSS "responsive".
Ils n'ont qu'à basculer le téléphone.

Il y a aussi un problème avec la largeur de la carte de l'accueil qui devrait coller à la place restante, barre de scroll comprise.
Il faudrait aussi que la carte ne soit pas plus haute que la fenêtre, sans ça, ça patine dans le scroll vertical.

Puisque ça ne vous a pas rébuté, je vais peaufiner.
Il faut que ça soit nickel et simple.

[sly]

Bonne remarque. J'ai voulu faire des jolies icônes unicodes pour les mobiles mais on peut aussi faire un bandeau rétréci.

Je ne parlais que du bandeau sur écran large :

xx.png (53.75 Kio) Vu 879 fois

Puisque l'idée semble germer de le rendre "affiché en permanence" pour fluidifier la navigation du site sans devoir remonter son curseur jusqu'en haut sur les longues pages, alors il me semblerait préférable qu'il prenne le moins de place possible an allant à l'essentiel des menus.

Ce qui m'amène d'ailleurs, dans notre volonté ces dernières années de réduire les éléments inutiles, à interroger la pertinence du... "truc" en haut à gauche. C'est pas un logo, c'est plus trop d'actualité, et c'est "juste" un lien vers l'accueil : a-t-il encore son utilité ? Ou alors si c'est décoratif, rendons le très fortement transparent, comme trame d'arrière plan du bandeau ?

Je suis plus en plus dubitatif sur la pertinence d'avoir un style adapté aux téléphones tenus horizontalement.

ça ne va pas concerner les petites tablettes ? (d'écran raisonnable, de l'ordre de 1000px de large ?)

[Dominique]

... dans notre volonté ces dernières années de réduire les éléments inutiles, à interroger la pertinence du... "truc" en haut à gauche. C'est pas un logo, c'est plus trop d'actualité, et c'est "juste" un lien vers l'accueil : a-t-il encore son utilité ? Ou alors si c'est décoratif, rendons le très fortement transparent, comme trame d'arrière plan du bandeau ?

Je suis pour simplifier le bandeau et ne laisser que la ligne de sous-menus que l'on a aujourd'hui pour les fenêtres de moins de 600px de haut.

ça ne va pas concerner les petites tablettes ? (d'écran raisonnable, de l'ordre de 1000px de large ?)

Attention à la différence entre:
* les pixels physiques (petits points lumineux donnant une netteté à l'image) - celle qu'on nous vend,
* les pixels logiques (taille d'affichage) dèfinissant une taille voulue d'affichage (Police 12px, ...)
Le rapport entre les deux étant le pixel-ratio qui peut varier pour un même terminal ("Version ordinateur" sur votre portable).

Le développeur ne peut pas tenir compte d'un type de terminal (non inventoriable et non détectable par le programme) mais exprimer ce qu'il veut montrer sur l'écran en pixels logiques en fonction du nombre de pixels logiques de la fenêtre et non de l'écran.
Par exemple, je vais passer du bandeau avec sous-menus en bandeau "hamburger" en dessous d'une certaine largeur logique de fenêtre suivant son contenu.

[Dominique]

le texte des menus déroulants est plus gros aussi
pas vu de différence, par contre, sur un mobile.

Je crois avoir identifié le problème de taille : c'est en fait un problème de polices de caractères.
Nous avons un florilège de polices 'Open Sans', 'Liberation Sans', sans-serif, 'Liberation Mono', monospace, Verdana, Arial, Helvetica, sans-serif, Times New Roman (plus celles de PhpBB), ce qui est vivement déconseillé par tous les spécialistes en ergonomie.
Or, la taille de rendu des polices dépend de celles téléchargées, non au niveau de l'explorateur, mais du système (Linux, Windows, Ios, Android, ...) et du fabriquant du terminal.
Ainsi, les caractères Verdana du bandeau sont plus grands que les Times New Roman des textes sur mon PC mais plus petits sur mon mobile Android.
On ne résoudra pas ce problème de taille comparée de caractères sans une remise à plat des polices utilisées sur refuges.info, forum compris.
Je vais voir ce que je peux faire sans trop de chamboulement, en me calant sur PhpBB.

[Dominique]

J'ai pris en compte vos remarques : https://dom.refuges.info/

Pour la taille des caractères, j'ai dit une énorme bêtise :
Les fontes des polices sont les mêmes pour tous les terminaux et explorateurs, c'est la police par défaut qui est paramétrable et, comme je n'avais pas défini la police à utiliser pour le bandeau, il se retrouvait avec des polices et un rendus différents.
Je n'ai donc pas eu à remettre en cause les polices des pages, qui sont en fait très simples

[sly]

moi je valide : sobre, efficace et ne prend pas trop de place, top.

Si on valide la philosophie globale qui est que refuges.info est un outil fonctionnel et efficace alors inutile qu'il ressemble à une gallerie d'art.

L'un n'empêche certe pas l'autre, mais si un arbitrage doit être fait, je vote pour qu'il devienne un marteau

[Dominique]

J'ai rajouté quelques icônes dans le bandeau des mobiles qui était un peu spartiate.

https://dom.refuges.info/

[Dominique]

Le nouveau bandeau est en service