Une option pour fixer le header

Salut,

Petit sujet qui va peut-être en fâcher quelques un, c'est pourquoi j'ai cherché un compromis pour accorder tout le monde.

Je ne suis sûrement pas le seul dans ce cas, mais personnellement j'aime beaucoup avoir toujours le header à portée de clics à tout moment, sans devoir remonter tout en haut de la page.

Comme je sais qu'il y a aussi des gens qui détestent ce genre de fonctionnalité (ce qui est compréhensible), on pourrait mettre ça sous la forme d'une option dans les paramètres, désactivée par défaut dans un soucis d'accessibilité.

Et peut-être également faire cela tout le temps sur la version mobile ?

Oui, ou alors par défaut il est en haut, mais lorsque qu'on passe la souris en haut, il apparaît. Après je sais pas si c'est faisable.

Hum, là par contre, je ne sais pas si c'est une bonne idée : ne risque-ton pas des erreurs de manip si on clique par erreur sur le header alors qu'on voulait cliquer sur un lien qui se trouvait juste en-dessous ? :/

Le problème sur mobile c'est que certains Android (surtout les < 3.0) gèrent très mal la position fixed.

Mais j'avoue qu'un header facilement accessible serait le bienvenu, surtout si les notifications sont mises à jours automatiquement…

Oui, je me doute que certains OS mobiles ne gèrent pas bien cela. Mais on peut détecter cela avec le User-Agent, non ?

Un truc du genre : si le User-Agent est un Android antérieur à la 3.0 (ou d'autres OS posant problèmes), alors on ne met pas en position fixed ?

Après faut pas qu'une telle fonctionnalité soit trop lourde à mettre en place, évidemment…

Plutot que de gérer ça avec le User-Agent, on pourrait gérer ça avec la version CSS prise en charge, non ? (Si CSS3 pris en charge, on active la fonctionnalité, sinon, on la désactive)

@Situphen : les portables Android prennent en charge CSS3, seulement pas forcément toutes les fonctionnalités (ni les specs les plus récentes). Et position: fixed n'est lié en rien à CSS3, c'est bien plus vieux, juste mal géré sur certains périphériques.

@Jérôme Deuchnord : utiliser le User-Agent pour de la détection est une mauvaise idée, c'est pourtant bien connu…

c'est pourtant bien connu…

Non, Pas pour qqun qui fait du dev web en dilettante.

Quand tu parles de User-Agent, en général tu sais à quoi ça correspond, donc tu comprends les risques associés…

Je sais ce qu'est un user-agent, je sais faire un peu de dev web, je sais pas pourquoi il est "une mauvaise idée, c'est pourtant bien connu" .

Je ne veux pas être méchant ou désagréable hein, je veux juste préciser que ce qui est évident pour l'un ne l'est pas forcement pour l'autre

Je me doute bien que tout le monde ne connait pas, mais je précise que c'est une mauvaise idée et que c'est connu. J'ai pas non plus dit que ceux qui ne connaissent pas étaient ignares ou incompétents, hein !

Un peu de lecture : http://farukat.es/journal/2011/02/499-lest-we-forget-or-how-i-learned-whats-so-bad-about-browser-sniffing

En gros ce n'est pas une info fiable : les navigateurs mentent et l'utilisateur peut facilement la modifier. Et en plus, se fier à ça peut facilement causer des problèmes pour l'avenir (penser au fait que Windows 10 ne s'appelle pas Windows 9 à cause du code d'applis tierces qui se basaient sur "Windows 9" pour détecter 95 et 98…).

Effectivement, je savais qu'il y avait des méthodes plus fiables que le User-Agent, mais ce n'était qu'une proposition (qui avait, après tout, toute sa place dans cette discussion… je crois ).

Par contre, je ne savais pas que le nom commercial du prochain Windows était lié à une histoire de confusion avec Windows 95 et 98 (ce qui, maintenant que tu le dis, est effectivement évident)…

Sinon, pour les smartphones, le plus simple est finalement de ne pas l'activer par défaut, non ?

Effectivement, ça peut être désactivé en CSS sur certaines tailles d'écran et du tout éviter certains conflits…

Ou alors avec un peu de JS, à la limite, pour parer certains bugs.

Hello !

La possibilité d'un header fixe me titille depuis le début. Seulement c'était pas prioritaire et sujet à d'éventuels bugs. Comme le dit viki53, ça fonctionne pas très bien sur certaines versions d'Android, mais je filtre déjà tout ça avec le User Agent pour le menu latéral, pas le choix.

En somme je pense activer ça pour ceux qui peuvent l'avoir, au moins sur mobile. Sur ordinateur la question est de savoir si on garde le header tel quel ou si on le réduit de moitié en hauteur après le scroll histoire de gagner de la place sur les petites résolutions (tablettes, notebook, etc). Qu'en pensez-vous ?

Je vais essayer d'aller sur ZdS avec mon netbook pour voir la hauteur du header, mais pour la part je suis plutôt d'accord avec ta proposition… Tant que les visiteurs n'aimant pas cette fonctionnalité peuvent la désactiver, bien évidemment

Ça mérite complément d'information quand même.

En gros : ça dépend ce que tu en fais.

1. Les browsers qui mentent, oui, ça a été le cas d'IE pendant un certain temps.

2. L'utilisateur qui trafique : oui, mais là on est en train de parler d'apporter des modifs visuelles au site pour l'adapter au mieux à son navigateur. Si le mec trafique tant pis pour lui…

3. Oui c'est une rumeur insistante pour Windows 10, mais d'une part c'est pas vraiment l'User-Agent c'est plus l'OSName, et c'est surtout parce que les développeurs en question (notamment l'OpenJDK) sont un peu couillons. D'une part ils auraient du détecter l'OS différemment (numéro de build du noyau) d'autre part, même si on prend l'OSName, on évite d'écrire startsWith("Windows 9") c'est particulièrement crade…

Donc "c'est connu" qu'on essaie d'éviter pour des fonctionnalités sensibles ou alors quand il est possible de faire autrement (typiquement : "je teste si je peux utiliser la fonctionnalité" plutôt que de tester "de quel browser il s'agit"), ça explique notamment pourquoi jQuery.browser.version a été déprécié, entre autres.

Pour moi, s'il s'agit juste de trouver le layout le mieux adapté au navigateur qui visite la page, je pense que ça reste une solution tout à fait acceptable.

Je vais me répéter, mais après on est pas tellement là pour parler des solutions techniques. Il faut avant tout savoir vers quoi on veut aller niveau visuel et comportement/interaction.

Donc a priori la seule question qui reste est :

Est-ce qu'on diminue la hauteur du header lorsqu'il est fixé sur ordinateur ? Actuellement il fait 60px de haut. On peut imaginer le ramener à 30-40px.

Selon moi oui.

Faudrait voir les stats : est-ce qu'il y a beaucoup de petits écrans ?

Perso sur un écran full-HD classique le header de 60px est pas trop grand, donc réduire aurait pas grand intérêt…

Oui, mais encore une fois, on pense à tous les supports. Sinon moi aussi je dis "je suis en triple écran full HD, osef de la hauteur du header", vois-tu ? Et même si ton écran est haut, ça peut faire la différence.

Penser à tous les supports si ceux auxquels on tente de s'adapter ne sont pas utiliser, c'est perdre du temps pour rien.

On peut déjà voir ce que ça donne avec un header fixé classique et voir à l'usage si le réduire est une idée à approfondir ou non. Progressive enhancement