L’entête à l’envers

Après quelques semaines d’interruption, le redesign permanent (et désormais documenté) de métro[zen]dodo reprend, la faute à Frank Chimero :

When it comes to websites, I’m a caboose guy—I will happily design footers all day. But headers? I would prefer not to. More hassle than they are worth. Let a young, eager designer who wants glory and visibility have at it. Navigation at the top of the page turns a lack of conviction and corporate incohesiveness into a real estate problem. What a nightmare. […] But down low? Yes, please. Footers are magic, because they can be as big as they need to be—there’s enough room for everyone.

Même lorsque j’utilisais un thème WordPress prêt à l’emploi, métro[zen]dodo ne possédait pas d’autre entête que le logo le plus caricatural de l’histoire de l’humanité. La première version « faite maison » possédait une barre de navigation, mais avec son lien vers Google+ et son logo orange1, je crois qu’il vaut mieux qu’elle croupisse dans les archives du web. Depuis, l’entête du site n’a jamais compté plus de quatre liens, faute d’avoir trouvé une manière élégante d’arranger une navigation pléthorique2.

Capture de métro[zen]dodo en 2013
La version « classique » de métro[zen]dodo, en 2013, sans entête mais avec un enpied.

L’enpied3, au contraire, s’est alourdit au fil des années. D’une demi-douzaine de liens en 2012, il a dépassé la cinquantaine d’éléments en 2019. Plus l’enpied enflait, moins les problèmes posés par l’entête importaient. La solution était simple : il suffisait de cacher la poussière numérique sous le tapis, below the fold comme disent les markéteux, j’en lève les yeux au ciel rien qu’en l’écrivant.

Or depuis quelques mois, je souffre d’une étrange nostalgie pour Cartel mère, le blog consacré à l’intersection entre l’art et la technique que j’ai tenu avec mon épouse entre juillet 2014 et avril 2015. La stérilité du web contemporain m’ennuie au plus haut point. Je veux à nouveau m’étaler sur l’axe horizontal, alors que le responsive design favorise l’empilement des blocs les uns au-dessus des autres au-dessus des uns au-dessus des autres.

Capture de Cartel mère en 2015
Le site de Cartel mère, tout en largeur, en 2015.

Aux grands maux les grands remèdes : un jour où j’étais ivre de café, j’ai supprimé l’enpied. Sans pied pour ancrer la page, la navigation a dérivé vers le côté gauche, et les mots-clés ont couru vers la page d’archives. Mais comment caler le logo ? Comme le dit Chimero :

Space comes cheap at the bottom of a page, so why not get the three car garage, honey? Pixels are free! Build it out and fill it up. But up top? Difficult. Tight quarters. Each pixel counts, and any vacillation about a visitor’s needs pushes everything further down the page.

Le déclic est venu en retrouvant des captures du site de Chris Shiflett dans ma boite à chaussures numérique4. Pourquoi compter les pixels ? Pourquoi l’entête devrait-il être en tête ? Renversons — littéralement — l’entête !

Capture du site de Chris Shiflett en 2020
Le site de Chris Shiflett.

Sur les écrans étroits, le logo et le menu forment un bloc compact et dense, comme une table des matières du site. Dès que l’affichage s’élargit, les éléments prennent leurs aises sur l’axe horizontal. Après un quart de tour, le logo vient ancrer la page, comme la tranche d’un livre. L’entête reste fixe, tandis que le contenu défile. La colonne de texte s’élargit progressivement, jusqu’à atteindre environ 75 caractères.

@media screen and (min-width: 50rem) and (min-height: 30rem) {
	.header_brand_title {
		writing-mode: vertical-rl;
		text-orientation: sideways;
	}
}

Il ne s’agit pas seulement de réarranger les éléments comme les pièces d’un puzzle, mais aussi d’interroger les pratiques établies. Pourquoi la navigation devrait-elle nécessairement prendre la forme d’un « menu hamburger » ou d’une barre, c’est-à-dire d’un bloc monolithique, dans un élément <nav> ?

La navigation vers les pages qui permettent de poursuivre la lecture, ici ou ailleurs, prend désormais la forme de questions à la fin des articles. Sans « menu hamburger » ni « fat footer », les éléments de navigation apparaissent là où ils sont pertinents. L’entête n’est pas forcément en tête, la navigation n’est pas forcément un plan de site simplifié.

Capture de métro[zen]dodo en 2020
métro[zen]dodo en 2020.

  1. Depuis le début des années 2000, mes sites personnels ont souvent comporté une touche de pourpre, qui reste ma couleur favorite. Avant de virer définitivement vers le violet, j’avais tourné de l’autre côté de la roue chromatique, et joué avec différentes teintes orangées. Une déformation professionnelle, probablement. ↩︎

  2. Pour les mêmes raisons mon site personnel ne possède pas d’entête, et celui de MacGeneration est réduit à sa plus simple expression. Mes premières maquettes du Club iGen étaient même conçues autour de la disparition de l’entête et de la dissémination des éléments de navigation. ↩︎

  3. Oui, enpied. Et je vous em… ↩︎

  4. Au hasard de Hacker News, j’ai découvert Believer pendant la rédaction de cet article. Conçu par l’agence CMYK, le site du magazine emploie une approche similaire avec des icônes latérales, mais possède tout de même un enpied et un « menu hamburger ». ↩︎

Vous avez envie de discuter ? Envoyez-moi un courrier électronique.
Vous voulez poursuivre la lecture ? Commencez ici.
Vous vous sentez l’âme généreuse ? Offrez-moi un livre !
Vous préférez allez voir ailleurs ? Voici quelques recommandations.