La navigation est une facette essentielle d’un bon site web WordPress avec un bon design. En tant que tel, il vaut la peine de prendre le temps de réfléchir à la façon dont les visiteurs de votre site interagissent avec vos pages par le biais de votre navigation. Une façon d’y parvenir est d’utiliser un en-tête épinglé.
Dans ce cas, la section d’en-tête de votre site reste en haut de l’écran lorsque l’utilisateur fait défiler les pages. Cela offre une multitude d’avantages, mais l’un des principaux est que vos éléments de navigation restent à portée de vue de l’utilisateur, où qu’il se trouve sur la page. Pour cette seule raison, un en-tête épinglé est un élément d’interface utilisateur (IU) bienvenu.
Dans ce tutoriel, nous allons vous montrer comment créer un en-tête épinglé dans WordPress. Il couvrira de nombreux aspects, tels que des exemples sur le web, des extensions WordPress qui peuvent vous aider, et un guide sur la façon de développer votre propre en-tête épinglé. Mais d’abord, discutons plus en détail de ce qu’est un en-tête épinglé.
Ce qu’est un en-tête épinglé
La partie en-tête de votre site est un peu comme le bureau d’information de votre site. C’est ce que la plupart des utilisateurs repèrent en premier, et c’est toujours l’endroit qu’ils consulteront pour trouver quelques informations clés et effectuer certaines actions :
- Par exemple, votre logo ou le nom de votre site sera ici, ce qui sert de point d’ancrage pour vos utilisateurs. Dans la plupart des cas, ils pourront revenir à la page d’accueil en cliquant sur le logo.
- Si vous gérez des comptes d’utilisateur sur votre site, l’en-tête offrira généralement un lien pour se connecter à ces pages de compte et de profil.
- Il peut y avoir une fonctionnalité de recherche ici, surtout si vous avez un grand site avec beaucoup de contenu dans différents domaines.
- Bien entendu, la navigation de votre site fait également partie intégrante de l’en-tête.
Dans l’ensemble, votre en-tête est un point de contact pour les utilisateurs. Vous constaterez qu’il s’agit souvent de la « barre » pour les schémas de lecture en forme de F. Il attire donc l’attention de vos utilisateurs à un niveau intuitif.
Vous savez probablement déjà ce qu’est un en-tête épinglé, même au sens intuitif du terme. Il s’agit de la section d’en-tête de votre site qui colle au haut de l’écran lorsque vous faites défiler la page. Contrairement à un en-tête statique, qui reste en place et disparaît au fur et à mesure que vous défilez, l’en-tête épinglé est un élément toujours visible.
Si l’approche typique pour un en-tête épinglé consiste à en coller une version statique en haut de votre écran, il existe plusieurs façons de rendre cet élément plus utilisable, plus efficace à l’écran et plus dynamique. Nous allons maintenant examiner quelques exemples concrets.
Exemples d’en-têtes épinglés sur le web
Vous trouverez des en-têtes collants partout sur le Web, et c’est une bonne idée d’en vérifier quelques-uns pour voir l’étendue de ce que vous pouvez réaliser. L’un des exemples les plus simples est celui de Hammerhead. Ce site utilise un menu déroulant et un en-tête épinglé, et il est simple : Il s’engage à rester en haut de la page dans sa mise en page statique :
Une autre mise en œuvre simple est celle de Kin. Elle utilise un en-tête épinglé typique, mais cette fois avec quelques éléments de design sympas.
Vous remarquerez que le contraste change en fonction de la partie du site web que vous faites défiler, et il y a aussi quelques jolis effets de transition :
Nous ne pouvons pas terminer cette section sans mentionner l’en-tête épinglé de Kinsta. Celui-ci reste également simple en ce qui concerne les éléments de l’en-tête, mais inclut une touche de convivialité soignée qui offre de la valeur au visiteur :
Cette fois, vous verrez l’en-tête disparaître lorsque vous ferez défiler la page. Toutefois, il réapparaîtra lorsque vous ferez défiler la page vers le haut – on peut parler d’un « en-tête partiellement persistant ».
L’idée est que le défilement vers le bas signifie que vous investissez votre temps dans la page elle-même, et que vous n’aurez probablement pas besoin de navigation, de pages de connexion ou d’aller ailleurs. Cependant, au moment où vous faites défiler la page vers le haut, vous êtes plus susceptible de vouloir vous diriger vers une autre page du site. C’est là que l’en-tête épinglé intervient pour vous sauver la mise.
Ce sont ces petites touches d’expérience utilisateur (UX) qui font que les visiteurs auront envie de revenir sur le site. Pour vos propres conceptions d’en-têtes épinglés, vous voudrez examiner ce que vous pouvez faire pour créer une UX et une UI qui se concentrent sur les besoins du visiteur.
Pourquoi vous devriez utiliser un en-tête épinglé pour votre site
De nombreux sites utilisent des en-têtes épinglés, et il y a de nombreuses bonnes raisons pour cela. Ils peuvent être des éléments cruciaux de l’expérience globale de votre site et ont beaucoup d’influence sur votre UX et votre UI.
Étant donné que les éléments que vous inclurez dans un en-tête sont ceux auxquels l’utilisateur voudra toujours accéder, il est logique qu’ils soient toujours affichés. Cela est particulièrement vrai pour les appareils et les formats d’écran plus petits.
Bien qu’il puisse sembler contre-intuitif d’avoir un en-tête « toujours actif » lorsque l’espace d’affichage est limité, il s’agit simplement d’un petit sacrifice. Le véritable avantage est de donner à l’utilisateur mobile moins de raisons de faire défiler le texte – une nécessité sur les petits appareils. Si vous pouvez fournir la navigation de votre site sans avoir à le faire défiler, l’utilisateur peut se déplacer sur votre site avec plus de facilité.
Les avantages et les inconvénients des en-têtes épinglés
Nous avons abordé quelques-uns des avantages des en-têtes épinglés, alors résumons-les rapidement :
- Vous pouvez proposer une navigation à laquelle l’utilisateur peut toujours accéder, ce qui permet de préserver le schéma de lecture naturel sur votre site.
- Vous êtes en mesure d’adapter l’en-tête à différents besoins, tels que les contrastes, les schémas de couleurs, ou même l’intention de l’utilisateur.
- Il est possible d’offrir de la valeur à l’utilisateur, tant pour les ordinateurs de bureau que pour les écrans plus petits.
Cependant, un en-tête épinglé n’est pas une panacée pour améliorer l’UX, et il y a quelques inconvénients à les utiliser :
- Nous en parlons brièvement, mais pour les écrans de toutes tailles, vous devrez allouer de l’espace à votre en-tête.
- Un en-tête épinglé prendra naturellement le pas sur le reste de votre contenu, car ses propres éléments détourneront le regard du corps de la page.
- Le développement d’un bon en-têteépinglé demande plus de travail, car vous devez le mettre en œuvre, vous assurer qu’il fonctionne dans différents navigateurs et vérifier qu’il n’y a pas de bogues sur les écrans plus petits.
Cependant, si vous réfléchissez à vos choix de conception, aux besoins des utilisateurs et aux objectifs du site, vous pouvez atténuer ou supprimer tous ces inconvénients, tout en conservant les bons points. L’un des moyens d’y parvenir est de recourir à des extensions WordPress.
3 plugins pour vous aider à créer des en-têtes épinglés
Au cours des prochaines sections, nous présenterons quelques-uns des principales extensions d’en-têtes épinglés pour WordPress. Plus tard, nous verrons si ce type de solution vous convient. Quoi qu’il en soit, une extension peut vous aider à mettre en œuvre une fonctionnalité sans avoir besoin de code, ce qui est précieux si votre thème ne l’inclut pas.
De plus, l’extension vous permet de tirer parti de l’expérience d’un expert en matière de conception et de développement. Les développeurs feront certains des choix techniques les plus importants pour vous, et les intégreront dans une interface utilisateur intuitive et facile à utiliser.
1. Sticky Menu & Sticky Header
L’extension Sticky Menu & Sticky Header de Webfactory est un bon premier choix, en raison de sa richesse de fonctionnalités, de sa flexibilité utile et de son prix abordable.
L’intérêt de cette extension est que vous pouvez faire en sorte que n’importe quel élément de votre site colle à l’écran. Cela peut être utile à bien des égards, mais cela signifie que la mise en œuvre d’un en-tête épinglé est un jeu d’enfant.
L’extension est également livrée avec une série d’options puissantes pour vous aider à mettre en œuvre un en-tête épinglé :
- Vous pouvez définir le niveau de positionnement « supérieur » que vous souhaitez. Cela signifie que vous pouvez ajouter de l’espace à la zone située au-dessus de l’en-tête pour répondre à vos objectifs de conception.
- Il existe également d’autres options de positionnement, comme l’utilisation de la propriété CSS z-index pour concevoir votre site « d’avant en arrière »
- Vous pouvez activer l’en-tête épinglé uniquement sur les pages que vous sélectionnez, ce qui peut s’avérer utile si vous avez des pages de destination ou d’autres contenus inadaptés.
Sticky Menu & Sticky Header comprend également un mode de débogage, pour vous aider à corriger tout élément « non adhésif ». Le mode dynamique vous aidera également à résoudre les problèmes liés aux conceptions responsives.
La meilleure nouvelle est que Sticky Menu & Sticky Header est gratuit à télécharger et à utiliser. De plus, il existe une version premium qui vous débarrasse d’une grande partie du savoir-faire technique dont vous avez besoin.
Avec la version gratuite de l’extension, vous devrez connaître le sélecteur de l’élément afin de le spécifier dans les options. Cependant, la version premium (49-199 $ par an) offre un sélecteur d’élément visuel pour contourner cela.
2. Options for Twenty Twenty-One
Bien que nous ne recommanderions pas un thème WordPress par défaut pour la plupart des sites axés sur la clientèle, ils en ont suffisamment dans le coffre pour les blogs et les types de sites similaires.
Twenty Twenty-One est l’un des thèmes par défaut les plus remarquables selon nous, mais il lui manque la fonctionnalité d’en-tête épinglé. Si vous souhaitez ajouter cette fonctionnalité, l’extension Options for Twenty Twenty-One pourrait réaliser ce dont vous avez besoin.
Cette édition de l’extension est l’une des nombreuses. Chaque thème par défaut récent possède une version, mais il n’y en a pas encore une pour Twenty Twenty-Two. Quoi qu’il en soit, la fonctionnalité de base de l’extension offre de nombreux extras :
- L’outil FSE (Full Site Editing) est prêt pour son déploiement complet.
- Vous êtes en mesure de modifier la taille de la police pour le corps du texte, de supprimer le soulignement des hyperliens et d’autres personnalisations simples.
- Vous pouvez travailler avec les largeurs maximales des conteneurs et des éléments, sans avoir besoin de code.
Il y a beaucoup d’autres options pour votre navigation, votre contenu, votre pied de page et votre en-tête. Pour ce dernier, vous pouvez le cacher de la vue, le rendre pleine largeur, ajouter une image et une couleur d’arrière-plan, ainsi que de nombreuses autres modifications.
Alors que l’extension de base est gratuite, vous avez besoin d’une mise à niveau premium (25-50 $) pour accéder aux options d’en-tête épinglé. Cela vous permet de régler les paramètres des en-têtes mobiles et de bureau à partir de la personnalisation de WordPress :
Étant donné son nom, vous ne devriez pas vous attendre à ce que cette extension fonctionne avec un autre thème que Twenty Twenty-One (ou toute autre « saveur » que vous choisissez.) Cependant, si vous utilisez ce thème par défaut et ne voulez pas coder, il sera idéal pour vous aider à ajouter un en-tête épinglé à votre site.
3. Floating Notification Bar, Sticky Menu on Scroll, and Sticky Header for Any Theme – myStickymenu
Voici une extension qui joue cartes sur table. L’extension myStickymenu de Premio offre presque tout ce que vous voudrez inclure dans votre propre en-tête épinglé, et offre une grande quantité de fonctionnalités.
Il possède un nombre étonnant d’avis positifs sur le répertoire d’extensions WordPress – 799 avis cinq étoiles pour une moyenne de 4,9. Cela est dû en partie à l’ensemble complet de fonctionnalités à votre disposition :
- Elle offre une souplesse d’utilisation. Par exemple, vous pouvez créer une barre de bienvenue ainsi qu’un menu épinglé, et un en-tête.
- L’extension s’adapte à la réactivité de votre site. Cela signifie que vous n’aurez pas besoin d’implémenter plus de fonctionnalités en utilisant du code.
- En fait, l’extension ne nécessite pas que vous sachiez coder pour l’utiliser pleinement.
- L’extension myStickymenu est compatible avec un certain nombre d’extensions de construction de pages de premier plan, telles que Elementor, Beaver Builder, Gutenberg, Divi Builder, et bien d’autres.
Vous disposez également d’un certain nombre d’options de personnalisation pour faire fonctionner votre en-tête épinglé comme vous le souhaitez. Par exemple, vous pouvez choisir de faire un en-tête partiellement persistant, modifier des aspects simples tels que les couleurs d’arrière-plan, les choix typographiques, et plus encore.
De plus, en raison des différentes façons dont vous pouvez présenter votre en-tête épinglé (comme les options de menu et de barre de bienvenue), vous pouvez choisir comment elles s’affichent, et où, sur votre site.
Bien que la version gratuite de myStickymenu puisse suffire à vos besoins, il existe également une version premium (25-99 $ par an.) Celle-ci offre davantage de moyens de désactiver votre en-tête épinglé dans des conditions spécifiques, des comptes à rebours, la possibilité d’ajouter plusieurs barres de bienvenue et quelques options de personnalisation supplémentaires.
Comment créer un en-tête épinglé dans WordPress
Dans la suite de ce tutoriel, nous allons vous montrer comment créer un en-tête épinglé dans WordPress. Il y a deux approches possibles, et nous allons les couvrir toutes les deux. Cependant, notre première étape vous aidera à prendre cette décision.
À partir de là, vous travaillerez sur votre propre en-tête épinglé en utilisant votre méthode préférée, puis vous appliquerez certains de nos conseils pour rendre le vôtre plus efficace et utilisable à l’avenir.
1. Décidez comment vous allez créer votre en-tête épinglé
L’une des raisons pour lesquelles WordPress est si flexible pour toutes sortes d’utilisateurs est due à son écosystème d’extensions et à son extensibilité open source. Ainsi, vous pouvez choisir une solution standard ou créer la vôtre
Votre première tâche consiste à décider si vous voulez utiliser une extension ou vous plonger dans le code pour mettre en œuvre votre en-tête épinglé. Décortiquons les deux solutions :
- Extensions. Il s’agit d’une méthode approuvée par WordPress, surtout si vous n’avez pas les connaissances techniques en main. Elle offre une certaine souplesse, mais vous êtes à la merci de ce que le développeur juge important, et de sa capacité à coder.
- Le codage. Si vous avez une vision claire en tête, vous pouvez coder un en-tête épinglé pour votre site. Bien sûr, vous aurez besoin d’une expertise technique pour y parvenir (principalement CSS), mais les résultats seront exactement ceux que vous souhaitez. Cependant, vous aurez plus de maintenance potentielle à effectuer, et son succès dépendra de vos propres capacités à coder.
Nous dirions que pour la plupart des utilisateurs de WordPress, une extension sera la solution idéale pour créer un en-tête épinglé. Il s’intègre bien à la plateforme et est plus facile à dépanner si vous rencontrez des problèmes. Cependant, dans les prochaines étapes, nous couvrirons une solution de codage ainsi que l’option de l’extension.
2. Choisissez si vous allez modifier votre thème actuel ou en sélectionner un dédié
L’aspect suivant à prendre en compte est de savoir si vous modifiez votre thème actuel ou si vous en choisissez un qui possède déjà la fonctionnalité d’en-tête épinglé dans son jeu de fonctions. C’est important si votre thème n’a pas la fonctionnalité nécessaire pour gérer un en-tête épinglé.
De nombreux thèmes et extensions de construction de pages incluent une option d’en-tête épinglé, en raison des avantages qu’elle présente et pour vous offrir une certaine souplesse de conception. Vous constaterez que certains des thèmes et extensions les plus grands et les plus polyvalents proposent cette option en standard, comme Elementor, Astra, Divi, Avada et bien d’autres.
Pour prendre cette décision, vous devrez tenir compte de quelques éléments concernant votre thème et votre site actuels :
- Votre site a-t-il déjà l’apparence que vous souhaitez, ou a-t-il besoin d’un rafraîchissement ?
- Votre thème actuel est-il facile à personnaliser sous le capot ? La documentation du développeur devrait vous le dire.
- Souhaitez-vous une implémentation complexe de l’en-tête épinglé ou une implémentation plus simple ?
En fonction des réponses que vous donnerez ici, vous choisirez l’un ou l’autre. Si vous avez besoin d’un nouveau thème, vous pouvez tout aussi bien en choisir un qui offre l’implémentation d’un en-tête épinglé. Toutefois, si vous souhaitez conserver votre thème actuel et qu’il ne dispose pas encore de la fonctionnalité d’en-tête épinglé, vous devrez retrousser vos manches et suivre l’une des sous-étapes suivantes.
2a. Utiliser une extension avec un thème spécifique
Si vous n’avez pas d’expérience en développement, nous vous recommandons de choisir une extension pour ajouter la fonctionnalité d’en-tête collant à votre site. Il y a trop de variables que vous devez prendre en compte, construire et maintenir. En revanche, une extension aura déjà une base de code qui fait un clin d’œil à ces éléments, elle offrira donc une option presque idéale pour la majorité des circonstances.
Pour cette partie du tutoriel, nous allons utiliser l’extension myStickymenu, car elle offre un ensemble de fonctionnalités riches et complètes pour la majorité des cas d’utilisation. Toutefois, l’utilisation générale sera la même pour la plupart des extensions que vous utiliserez.
Une fois que vous aurez installé et activé votre extension, vous devrez vous rendre à l’endroit où se trouvent les options du thème. Pour certaines extensions, cela se fera dans la personnalisation de WordPress ; pour d’autres, dans un panneau d’administration dédié. Ici, vous utiliserez un panneau d’administration personnalisé sur myStickymenu > Tableau de bord dans WordPress :
Cependant, l’écran par défaut affiche les réglages de la barre de bienvenue, ce que nous ne voulons pas pour ce tutoriel. En tant que tel, cliquez sur le bouton à bascule pour désactiver la barre, et cliquez sur l’écran des Réglages de Sticky menu :
Bien qu’il y ait beaucoup d’options ici, vous n’avez besoin que du panneau Sticky Class. Une fois que vous avez activé l’en-tête épinglé, saisissez la balise HTML appropriée pour votre en-tête dans le champ correspondant qui coïncide avec le menu déroulant Autre classe ou ID:
Une fois que vous aurez enregistré vos modifications, celles-ci s’appliqueront à votre site. À partir de là, vous pouvez examiner certaines des fonctionnalités de style. Par exemple, vous pouvez définir un effet de transition en fondu ou en glissement, définir l’indice z, travailler avec des opacités, des couleurs et des temps de transition – ainsi qu’une foule d’autres options.
2b. Écrivez du code pour créer votre en-tête épinglé
Il va presque sans dire que cette section est destinée à ceux qui ont une expérience du développement. Vous verrez plus tard que le code lui-même est si simple qu’il est difficile d’y croire. Cependant, étant donné le travail supplémentaire, la maintenance et l’entretien général pour créer un en-tête épinglé personnalisé, vous devrez faire appel à d’autres aspects de votre expérience également.
Toutefois, avant de commencer, vous aurez besoin des éléments suivants :
- Un éditeur de code décent, bien que dans ce cas (et selon l’implémentation) vous pourriez utiliser un éditeur de texte du système d’exploitation par défaut.
- Vous devrez avoir accès aux fichiers de votre site, que vous devriez sauvegarder, puis télécharger dans un environnement de développement WordPress local.
Il est inutile de répéter que vous ne voulez pas travailler sur les fichiers de votre site en production. Travaillez plutôt dans un environnement de staging ou une installation locale, puis téléversez les fichiers sur votre serveur réel après avoir testé les choses.
Vous voudrez également utiliser un thème enfant pour cela, car vous apportez des modifications personnalisées à votre thème parent. Cela vous permet d’organiser votre code et de vous assurer que toutes les modifications restent (littéralement) en place si le thème reçoit une mise à jour.
Mise en œuvre d’un en-tête épinglé à l’aide du code : Trouver les balises d’en-tête correctes
Avec tout cela en tête, vous pouvez commencer. Le premier travail consiste à découvrir les bonnes balises HTML pour votre navigation. Le résultat ici dépendra du thème que vous utilisez, bien que la balise header soit une valeur sûre dans la plupart des cas. La meilleure façon de le savoir est d’utiliser les outils de développement de votre navigateur et de sélectionner l’en-tête :
Vous constaterez probablement que ce n’est pas aussi simple qu’une seule balise, nous vous suggérons donc de jeter un coup d’œil à la documentation de votre thème (ou de parler directement avec le développeur) afin de trouver les balises dont vous avez besoin si vous avez des difficultés.
Mise en œuvre d’un en-tête épinglé à l’aide de code : Travailler avec vos feuilles de style
Ensuite, vous devez créer ou ouvrir un fichier style.css dans le répertoire de votre thème enfant. Ce fichier ajoutera votre CSS à celui de l’installation principale et, lorsque les balises se répètent, il le remplacera.
Dans ce fichier, ajoutez les métadonnées typiques dont vous avez besoin pour enregistrer le thème enfant :
Ensuite, vous voudrez ajouter du code pour activer votre en-tête épinglé. Cela nécessitera une certaine connaissance de l’héritage CSS, et selon le thème que vous utilisez, cela pourrait être une expérience exaspérante.
Par exemple, le thème Twenty Twenty-Two utilise deux balises d’en-tête, et il peut être difficile de trouver le bon mélange de CSS pour que votre code fonctionne sur le bon élément. Et ce, même avec la boîte de dialogue des classes de modèles dans l’éditeur de blocs (si vous utilisez la fonctionnalité FSE) :
Quoi qu’il en soit, le code dont vous aurez besoin sera le même :
Akhil Arjun propose une solution en deux lignes pour cela :
header {
position: sticky; top: 0;
}
Cependant, vous pouvez également envisager d’utiliser la propriété position : fixed, qui utilise quelques lignes de code supplémentaires :
header {
position: fixed;
z-index: 99;
right: 0;
left: 0;
}
Ceci utilise z-index pour amener l’en-tête à l’avant de la pile, puis un attribut fixe pour le faire rester en haut de l’écran.
Notez que vous devrez peut-être ajouter une nouvelle classe ici, afin d’appliquer l’en-tête épinglé. Quoi qu’il en soit, ceci devrait mettre en œuvre les bases de votre en-tête épinglé. Une fois que vous l’aurez mis au point, vous voudrez travailler davantage sur la conception pour qu’il s’intègre au reste de votre site.
Conseils pour rendre vos en-têtes épinglés plus efficaces
Une fois que vous avez trouvé une méthode pour créer un en-tête épinglé, vous devez trouver comment le perfectionner. Il existe de nombreuses façons d’améliorer le design de base et de s’assurer qu’il répond aux besoins des visiteurs de votre site.
Une bonne analogie pour votre propre en-tête épinglé est de s’assurer qu’il est comme un bon arbitre sportif. La plupart du temps, vous ne saurez pas qu’ils sont là. Cependant, lorsqu’un joueur ou un entraîneur a besoin d’eux, ils passent un appel et deviennent présents.
Votre en-tête épinglé devrait faire de même – rester dans l’ombre, ou hors de l’esprit jusqu’à ce que l’utilisateur en ait besoin. Vous pouvez y parvenir grâce à quelques règles empiriques que vous pouvez (comme toujours) choisir d’enfreindre si la conception l’exige :
- Restez compact. L’espace sur l’écran va être limité, alors essayez de garder l’en-tête petit. Vous pouvez mettre en place une solution où votre en-tête s’adapte de manière dynamique, en fonction de la zone du site sur laquelle il figure.
- Utilisez des en-têtes et des menus cachés sur les petits écrans. Par extension, vous pourriez choisir de masquer un menu, un peu comme dans l’exemple précédent de Hammerhead. Cela permet de garder l’en-tête compact, et rejoint le point suivant.
- Veillez à ne pas introduire de distractions. Plus les éléments sont nombreux à l’écran, plus ils se disputent l’attention. Si l’en-tête épinglé n’a pas besoin de montrer un élément, retirez-le – le contenu du corps du texte l’appréciera, tout comme vos mesures.
- Offrez du contraste. Il s’agit d’une astuce du manuel d’appel à l’action (Call To Action ou CTA). Si vous utilisez le contraste pour l’en-tête épinglé dans son ensemble, et ses éléments individuels, vous pouvez attirer l’œil là où vous en avez besoin – ou le pousser ailleurs.
Dans l’ensemble, votre en-tête épinglé ne fera que ce dont vous avez besoin, et pas plus. Parfois, vous aurez besoin de garder les choses au minimum, d’autres fois, vous le remplirez de liens, de logos et de formulaires d’inscription. Dans tous les cas, si vous gardez l’UX et l’UI à l’esprit, vous prendrez toujours une décision axée sur l’utilisateur.
Résumé
La convivialité et l’UX de votre site sont si importantes qu’elles devraient être les premières, deuxièmes et troisièmes choses que vous clouez lorsque vous le concevez et le construisez. La navigation de votre site n’en est qu’un aspect, mais vous devez trouver la meilleure façon de permettre à un utilisateur de se déplacer sur votre site sans problème. Un en-tête épinglé est un bon moyen d’y parvenir.
Si vous épinglez l’en-tête en haut de l’écran, l’utilisateur aura toujours les éléments de navigation à portée de main. Cela est particulièrement utile sur les appareils qui nécessitent un défilement pour se déplacer dans le corps du contenu, mais offre des avantages quel que soit le facteur de forme. Si vous êtes un utilisateur de WordPress, vous pouvez choisir une extension ou du code pour mettre en œuvre un en-tête épinglé. Cependant, vous pourriez repérer la fonctionnalité dans votre thème préféré, auquel cas, vous pourriez l’utiliser et prendre un coup sur la flexibilité.
Pensez-vous qu’un en-tête épinglé est un élément UX et UI essentiel d’un site web, et si non, qu’est-ce qui l’est ? Faites-nous part de vos commentaires dans la section ci-dessous !
Laisser un commentaire