L’entête à l’envers

Après quelques semaines d’interruption, le redesign permanent (et désormais documenté) de Zinzolin 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, Zinzolin — qui s’appelait alors 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 orange¹, 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éthorique².

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

L’enpied³, 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 la femme qui est devenue 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.

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érique⁴. Pourquoi compter les pixels ? Pourquoi l’entête devrait-il être en tête ? Renversons — littéralement — l’entête !

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

métro[zen]dodo en 2020.