Vincent De Oliveira Retour accueil

Header fixe et media-queries verticales

Blog

Lecture : 4min

Les headers fixes sont tendances. Pourtant, ce n'est pas toujours très bien réalisé et cela peut vite devenir insupportable, voire rendre un site inutilisable, surtout sur mobile. Il n'est pas rare de voir des headers fixes occuper plus d'un tiers de la hauteur d'une page. De plus, si la navigation se trouve repliée au sein du header, lors du dépliage, des éléments peuvent être masqués.

Un cas critique de header et de popin fixe
Un cas critique de header et de popin fixe

La règle actuelle en matière de responsive webdesign, c'est d'adapter le site en fonction de la largeur de la fenêtre. Malheureusement, ce n'est pas toujours suffisant, surtout si par méconnaissance on se base sur les valeurs des écrans de smartphones connus (iPhone pour ne pas le citer), sans penser réellement au contenu. Par exemple, baladons-nous sur le site Awwwards, dans la catégorie Responsive, et prenons le premier site sympa à l’œil. Hum celui là: http://murmure.me

Vérifions alors l'affichage de ce site sur un iPhone 5 en mode paysage:

Affichage sur un iPhone 5 en mode paysage
Affichage sur un iPhone 5 en mode paysage

Le site s'affiche avec le menu replié au sein de la fameuse icone hamburger. Parfait. Ajoutons 1px à la largeur à présent:

Affichage avec 1px de plus en largeur en mode paysage
Affichage avec 1px de plus en largeur en mode paysage

Aie. Le header se transforme, occupe une bonne partie de la hauteur, et devient fixe. De plus, les éléments du menu réapparaissent côte à côte, ce qui dépasse de la fenêtre. Cela est du à la media-query qui ne teste que la largeur de l'appareil, à savoir 568px.


Note: Je ne critique pas ce site en particulier, c'est juste le premier exemple que j'ai trouvé. :)


Pourtant, une technique très simple à mettre en place existe: les media-queries verticales! Il suffit d'appliquer des styles en fonction de la hauteur de la fenêtre au lieu de la largeur, tout simplement. Voici un exemple pour un header fixe:

.header {
    /* styles par défaut */
}

@media (min-height: 20em) {
    .header {
        position: fixed;
        top: 0; left: 0; right: 0;
    }
}

Dans ce cas précis, le positionnement du header n'est pas modifié par défaut. Si la hauteur actuelle de la fenêtre est supérieure à 20em, alors le header devient fixe et se trouve positionné en haut! Et cela, sans se soucier de la largeur.

Cette astuce peut s'avérer très pratique, notamment sur des écrans peu large et long, en mode paysage. De plus, si le viewport est réglé pour être égal à device-width, la différence d'agrandissement en mode paysage peut alors aller jusqu'à 44% sur un iPhone comme le précise Raphaël Goetter sur son blog. Cela provoque très souvent des débordements de contenus en hauteur.

Bien entendu, tout cela doit être à adapter au cas par cas. Les valeurs utilisées ici n'ont qu'un but de présentation du problème.

Voici un CodePen illustrant ce principe et une page de test dédiée:

See the Pen rbype by iamvdo (@iamvdo) on CodePen

 

See the Pen rbype by iamvdo (@iamvdo) on CodePen

Et vous, avez-vous déjà utilisé des media-queries verticales (ou autre) ?

Si vous avez aimé cet article, pensez à Flattr !

Nouveau blog, nouveau design! Brunch, un workflow front-end simplifié