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 !
10 exemples de Header pour vous inspirer
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 définitive, qu'est-ce qu'un bon header ?
Grâce aux différents exemples donnés ci-dessus, il est tout de suite plus facile de trouver de l'inspiration pour créer un bon header pour son site Web. Si je devais répondre à cette question, je dirais que les principaux points à retenir sont les suivants :
- Allez à l'essentiel : les internautes doivent comprendre et trouver ce qu'ils cherchent en un instant. Les premières secondes sont primordiales, concentrez-vous dessus encore et encore.
- Faites simple mais efficace : cela rejoint le point précédent mais si vous regardez bien les exemples ci-dessus, vous verrez qu'ils ont tous en commun la simplicité. Cela ne signifie pas d'être simpliste !
- Ergonomie et accessibilité : ce sont des points encore trop souvent négligés et pourtant, la prise en compte de ces critères est une réelle nécessité aujourd'hui. Pensez-y!
N'ayez pas peur de regarder en détail ce que font les sites Web qui qui vous plaisent et qui fonctionnent pour vous inspirer de leurs bonnes pratiques. N'oubliez pas que votre header est ce que verront en premier les internautes en arrivant sur votre site: il doit être parfait !
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 !
Pour celles et ceux qui auraient besoin d'aide pour intégrer l'un de ces header, n'hésitez pas à m'envoyer un mail.
