10 exemples de Header pour vous inspirer

10 exemples de Header pour vous inspirer

Le header est l'une des parties les plus importantes d'un site Web car c'est souvent celle que vos visiteurs voient en premier. Pour ne pas rater la conception et le design de cette importante porte d'entrée, voici 10 excellents exemples en matière de header.

Lorsque l'on créé ou que l'on refond son site Web et qu'on n'a pas de graphiste sous la main, il peut être compliqué d'élaborer chacune des différentes parties du site sans se tromper. Êtes-vous certain de n'avoir rien oublié dans le header ? Avez-vous pensé à ajouter ce détail qui fera la différence ? Êtes-vous au fait des dernières tendances en matière de web design ?

Pour être le plus intéressant possible, cet article n'est pas être un inventaire à la Prévert de tout ce qui se fait en la matière car cela n'aurait que peu d'intérêt. Au lieu de cela, je vais vous présenter un éventail des meilleurs exemples (pas forcément objectif, je vous l'accorde) afin que vous puissiez vous en inspirer librement.

J'ai donc sélectionné pour vous 10 exemples de header pour votre site Web. Tous ces exemples sont en accès libre et sont réalisés avec Bootstrap qui est le framework le plus utilisé au monde. Régalez-vous !

1. Bootstrap Transparent Navbar

En combinant Bootstrap 4 et Javascript, il est aisément possible créer une élégante barre de navigation transparente qui deviendra opaque lors du défilement sur desktop.

C'est simple, c'est propre, c'est efficace et ça fait parfaitement le job.

2. Bootstrap Background Image

Techniquement, l'approche est ici très intéressante en créant un conteneur qui a une hauteur égale à 100% de la fenêtre grâce à min-height: 100vh.

Ensuite, on utilise .bg-cover pour que l'arrière-plan s'adapte à toutes les fenêtres. C'est très bien vu comme approche et le rendu est très sympa sur n'importe quel écran.

3. Bootstrap Mega Menu

Ici, le méga menu est géré par dropdown, une propriété native de Bootstrap 4. On créé ensuite une classe CSS pour que ce méga menu soit en position static et non en absolute.

Là aussi, c'est très simple, très malin et très facile à ré-utiliser sur votre site Web.

4. Boostrap Static Header

On reprend l'ingénieuse technique décrite dans le premier exemple pour afficher une image de fond à laquelle on vient appliquer les classes CSS jumbotron bg-cover.

Résultat, on obtient un header statique très propre et très efficace.

5. Bootstrap Header Slider

Dans cet exemple, le diaporama est géré directement par le framework grâce à la classe CSS carousel. De ce fait, il n'y a que quelques lignes de CSS supplémentaires à rajouter pour affiner l'affichage.

6. Bootstrap Video Embed

Cet exemple très simple vous montre comment il est possible d'afficher une vidéo dans le header de votre site Web dans rien céder sur le responsive design puisque ce sont les classes CSS de Booststrap qui sont utilisées ici.

7. Bootstrap Transparent Jumbotron

Puisque vous êtes en forme, on va maintenant mixer les précédents exemples avec ici, une barre de navigation qui change d'aspect lors du défilement et une image d'arrière-plan sur le Jumbotron.

8. Bootstrap Magazine Carousel

Si vous êtes à la recherche d'un header de type magazine ou news avec un carrousel pour afficher plusieurs informations sur le même emplacement, alors cet exemple est idéal pour vous. Techniquement, c'est encore Bootstrap qui assure le travail grâce à ses classes natives.

9. Bootstrap Header Animated

Cette fois-ci, c'est le plugin JQuery Owl qui est mobilisée pour assurer la transition entre les différentes images du diaporama. On notera que la partie CSS est plus conséquente dans cet exemple du fait des effets sur les titres apparaissant sur les slides.

10. Bootstrap Header Video

Toujours aussi agréable à regarder et à afficher, la vidéo en arrière plan s'intègre parfaitement grâce à la balise video. Pour plus de simplicité, tout est géré par le framework sans recourir à JavaScript.

En conclusion

J'espère que ces 10 exemples de header vous auront convaincu, que vous n'hésiterez pas à utiliser ceux qui vous inspirent le plus et que vous partagerez cette page autour de vous. Encore une fois, ce n'est qu'un échantillon de ce qu'il est possible de créer avec un peu de talent et de créativité. Qu'en pensez-vous ? Lequel préférez-vous ? Avez-vous d'autres exemples à partager ? J'attends vos commentaire !

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.