WordPress : Créer un header optimisé

La création d’un en-tête optimisé pour votre site WordPress est un excellent moyen d’améliorer la vitesse de vos pages et l’expérience utilisateur. Dans cet article, nous vous guiderons à travers les étapes de la création d’un en-tête personnalisé sur WordPress et de son optimisation pour les performances. Nous vous montrerons également comment utiliser une image d’en-tête préconstruite comme solution de repli si votre en-tête personnalisé ne parvient pas à se charger. C’est parti !

METTEZ EN ÉVIDENCE LES ÉLÉMENTS LES PLUS IMPORTANTS

Réfléchissez à l’action principale que vous voulez que les visiteurs fassent sur le site et veillez à ce que cet élément soit clairement visible dans l’en-tête. Par exemple, pour les sites à but non lucratif, prévoyez une icône « Faites un don maintenant » ; pour les sites de restaurants, prévoyez une icône « Réservez une table ».

En général, les en-têtes contiennent des informations qui permettent aux visiteurs d’interagir plus facilement avec le site, notamment :

• Les liens de navigation
• Le logo de l’entreprise
• Appel à l’action (Réserver une table, Faire un don, Nous appeler)
• Des informations de contact
• Les icônes des médias sociaux
• Tagline
• Bouton à bascule multi-langue
• Panier d’achat
• Réfléchissez à ceux qui sont les plus importants pour vos sites et mettez-les en valeur.

UTILISEZ DES POLICES CLAIRES ET LISIBLES DANS L’EN-TÊTE DE VOTRE SITE WEB

Le texte d’un en-tête doit être lisible au premier coup d’œil. Utilisez des mots courts, si possible, et choisissez des polices claires et d’une taille relativement grande. Les en-têtes ne sont généralement pas le lieu pour des polices stylisées, car elles peuvent être plus difficiles à lire.

Les en-têtes doivent être lisibles d’un seul coup d’œil. Utilisez donc des polices claires et lisibles.

UTILISEZ DES EN-TÊTES TRANSPARENTS POUR LES SITES COMPORTANT DES IMAGES IMPRESSIONNANTES

Pour les sites qui comportent des images éblouissantes, essayez d’utiliser un en-tête transparent. Cela permet d’exposer au maximum les images, tout en laissant apparaître les liens importants.

Si vous avez utilisé un en-tête collant, le fait qu’il soit transparent lors du défilement peut être un peu gênant, car lorsque les images se déplacent, l’arrière-plan de l’en-tête se déplace également. Pour remédier à ce problème, ajoutez une couleur à l’arrière-plan, afin que les images qui défilent ne détournent pas l’attention des utilisateurs des liens.

Pour les sites comportant des images éblouissantes, essayez un en-tête transparent.

RÉDUISEZ L’EN-TÊTE DU SITE WEB LORS DU DÉFILEMENT POUR QUE LES INFORMATIONS ESSENTIELLES RESTENT VISIBLES.

Le rétrécissement de l’en-tête est un excellent moyen de minimiser l’espace que prennent les en-têtes lorsque les utilisateurs font défiler la page, tout en gardant les informations clés du site accessibles. Il est particulièrement pratique si vous avez conçu un en-tête vraiment grand et percutant. L’en-tête rétrécissant peut afficher les principaux éléments de navigation et le logo, et changer de couleur au fur et à mesure que les utilisateurs le font défiler.

VOUS AVEZ UNE BOUTIQUE ? METTEZ-LA EN HAUT DU SITE !

Sur les sites de commerce électronique, placez une icône de panier dans l’en-tête. Cela permet aux visiteurs du site d’effectuer leurs achats facilement et en un seul clic, quel que soit l’endroit où ils se trouvent sur le site.

Pour en savoir plus, consultez Fundamentals of Web Design à l’Université Duda.

UTILISEZ LES EFFETS POUR MONTRER AUX VISITEURS OÙ ILS SONT ET OÙ ILS VONT

Les effets de survol/sélection sont des éléments importants pour guider les utilisateurs lors de leur navigation. Choisissez des effets suffisamment visibles pour attirer l’attention, mais pas trop visibles pour ne pas distraire. Notez que certains effets ne sont visibles que sur un ordinateur de bureau. Veillez donc à choisir des effets (tels qu’un changement de couleur ou un soulignement) qui seront visibles sur les appareils mobiles.

Les effets de survol / sélection montrent aux utilisateurs où ils se trouvent dans un site.

CHOISISSEZ UNE DISPOSITION D’EN-TÊTE DE SITE QUI FLATTE LE LOGO.

Les en-têtes sont souvent la première chose que les visiteurs du site voient, il est donc important d’avoir le logo de l’entreprise. Choisissez une disposition d’en-tête qui convient le mieux à la forme et au style du logo. En général, les logos ronds et carrés sont mieux placés au centre ; les logos rectangulaires sont mieux placés à droite ou à gauche.

Les logos ronds et carrés sont parfaits au centre.

UTILISEZ DES ÉLÉMENTS DE CONCEPTION QUI EXPRIMENT LA PERSONNALITÉ DE L’ENTREPRISE.

Vous pouvez utiliser des couleurs et des effets pour exprimer la personnalité de l’entreprise. Par exemple, si une marque est légère, un effet de flottement lorsque les visiteurs survolent la navigation peut appuyer ce sentiment. En revanche, un effet flottant peut être moins approprié pour les clients qui offrent des services professionnels, comme les avocats et les agents immobiliers.

Utilisez des effets de conception qui montrent la personnalité de l’entreprise.

UTILISEZ DES MENUS EXTENSIBLES POUR FAIRE BRILLER LES IMAGES

Les menus extensibles sont parfaits pour les sites Web riches en images, comme les portfolios, car ils laissent beaucoup d’espace aux images. Ils sont présents sur les sites Web mobiles depuis un certain temps et le sont de plus en plus sur les sites Web de bureau.

Pour les en-têtes comportant des icônes et des liens importants (par exemple, les sites de commerce électronique), l’utilisation d’un en-tête extensible vous permet d’afficher une icône de panier qui se démarque vraiment tout en indiquant aux visiteurs que des informations supplémentaires (par exemple, la navigation du site) peuvent être révélées en un clic.

Pour un look moderne qui laisse les images et les boutons briller, essayez un en-tête extensible.

PENSEZ À LA BARRE LATÉRALE – EST-ELLE ADAPTÉE À VOTRE SITE ?

Les en-têtes de la barre latérale vous permettent de conserver les informations clés sur le site, pendant que les utilisateurs font défiler les pages et avec un minimum de distraction. Ils peuvent être pratiques pour les sites comportant des liens d’ancrage importants, car ces liens apparaîtront sur le côté à tout moment.