L’entête d’un site internet ou header constitue la partie du thème visible tout en haut du site, et est commune à l’ensemble des pages et articles de votre site (sauf si vous décidez de créer un en tête différent pour certains contenus). C’est un élément clé pour la navigation et l’expérience utilisateur puisqu’il permet aux utilisateurs de naviguer et se repérer sur le site.
Bon nombre d’éléments importants figurent dans cette zone de votre site, voici une liste d’éléments sur laquelle il serait intéressant de se pencher lorsque vous réfléchissez à l’en tête de votre site:
Bien sur, ces éléments ne doivent pas obligatoirement tous figurer dans l’entête, le but n’est pas de surcharger ce dernier.
L’entête est une partie du thème de votre site, il n’appartient donc en aucun cas aux pages, il faut veiller à ce qu’il ne soit pas trop grand, l’idéal serait que ce dernier fasse une hauteur maximum d’1/4 de l’écran, soit : height: 25vh;. La structure de l’entête peut contenir deux conteneurs enfants disposés les uns en dessous des autres.
Il est possible d’opter pour des variations d’entête sur d’autres pages, cela dit, il n’est pas nécessaire de démultiplier les variations. Il est donc tout à fait possible que l’entête de sa page d’accueil soit composé de presque tous les éléments listés au dessus et que l’en tête des autres pages ne comporte qu’un logo et menu de navigation et qu’il ait une taille moins grande par exemple.
La disposition des éléments joue aussi un rôle important, souvent, le logo est à gauche, le menu de navigation à droite, et des coordonnées de contact au dessus.
Ajouter un effet sticky au moment du défilement de la page est aussi possible, de sorte à ce que l’utilisateur puisse par exemple se rendre sur une autre page du site pendant sa navigation sans devoir remonter tout en haut, je recommande cette pratique que si l’entête n’a pas une trop grande hauteur.
Cette partie du thème du site impacte grandement la crédibilité et la confiance des visiteurs envers le site. Un en-tête clair et cohérent renvoyant à l’identité visuelle de l’organisation du site peut aider à renforcer l’image de marque et à rassurer les visiteurs afin qu’ils ne se sentent pas perdus sur le site, surtout que c’est l’élément qui figure sur le haut des pages du site. L’entête (avec son bandeau supérieur) doit donc refléter l’identité graphique de l’organisation à qui appartient le site, qu’il s’agisse des couleurs ou de la police d’écriture, comme sur le reste du site d’ailleurs. À l’inverse, un en-tête mal agencé pousse à ne pas poursuivre la visite sur le site.
L’entête joue un rôle dans le référencement naturel du site. En encapsulant cette zone dans la balise sémantique <header>, et les liens de son menu de navigation dans une balise sémantique <nav>, l’entête peut aider les moteurs de recherche à cerner la structure et le contenu du site, ce qui est utile pour le référencement naturel.
Je vous propose ma sélection de 4 entêtes de sites internet bien conçus.
Je trouve l’entête du site de Vittel bien agencé et léger :
Le site de bbot dispose d’un entête épuré et cohérent :
L’entête du site web du groupe Lorca est bien calibré, là encore, la hauteur et réparation des éléments est pertinente :
Un dernier exemple d’entête avec le site de Puressentiel :
