Souvent négligé à tort, le footer est pourtant un élément clé d’un site web, au même titre que le header et le body.

Découvrons ensemble son utilité, son importance, ses différents styles possibles et comment concevoir un bon pied de page pour qu’il soit efficace tant du point de vue de l’expérience utilisateur que du référencement naturel.

Sommaire

Qu'est-ce qu'un footer d'un site web ?

Le footer d’un site web (vitrine ou e-commerce), également appelé, pied de page, est la section qui se situe tout en bas d’une page web.

À l’inverse du header (en-tête), le footer est très souvent la dernière chose que les visiteurs voient sur un site internet.

Il est, souvent, accompagné, d’un bas de footer.

Le pied de page est mis, généralement, en exergue du reste du site web par une couleur de fond différent. 

Footer et bas de footer de site web
Footer et bas de footer de site web

Quelle est l'utilité d'un footer sur votre site web ?

Le footer de votre site WordPress (ou autres CMS (Shopify, Wix, Joomla, Prestashop, etc)) est aussi utile qu’important, car il :

  • Fournit des informations supplémentaires à vos visiteurs (informations juridiques, commerciales et/ou techniques).
  • Contribue à renforcer la crédibilité de votre entreprise (badges de récompenses, certifications, témoignages clients, etc).
  • Rassure vos visiteurs avec des certificats de sécurité (logos de paiements sécurisés).
  • Permet à vos visiteurs de vous contacter via vos réseaux sociaux (LinkedIn, Facebook, Instagram, Twitter, etc).
  • Permet de conserver votre audience en l’invitant à naviguer vers des pages spécifiques (liens internes).
  • Améliore votre référencement organique (citations NAP, mots-clés pertinents).
  • Etc. 

Quels sont les styles possibles pour le footer de votre site web ?

Il existe, principalement, quatre styles de footer possibles pour votre site web : 

  1. Footer classique.
  2. Footer flottant.
  3. Sticky Footer.
  4. Footer avec effet parallaxe.

1. Footer classique

Le footer classique, également appelé, pied de page classique, se trouve toujours à la suite de votre contenu (body)

Cela n’est pas dérangeant en soi, si votre contenu est long, car, de fait, ce dernier remplira tout l’écran et votre footer se retrouvera, ainsi, au bas de ce dernier.

Mais cela le devient, si votre contenu est trop court, car, de fait, ce dernier ne remplira pas tout l’écran.
La conséquence directe étant qu’il y aura de l’espace blanc en dessous de votre footer. Et cela ne fait pas pro du tout !

2. Footer flottant

Le footer flottant, aussi nommé, pied de page flottant, suit le défilement de vos pages web.

Il est utile seulement si le continu de votre page est extrêmement long et que votre visiteur le fait défiler sans, quasiment, jamais en voir la fin (système de scroll infini).
Cela est souvent le cas sur les sites one page.

Il est impératif, pour ne pas perturber la lisibilité de la page, que le footer soit le plus discret possible.

Il est à noter que le pied de page flottant est de moins en moins utilisé avec l’avènement de la navigation web sur des terminaux mobiles (tablette et smartphone). 

3. Sticky Footer

Le sticky footer, aussi nommé, pied de page collant, se trouve toujours en bas de l’écran, même lorsque votre contenu est court.

Vous pouvez créer un sticky footer en ajoutant une hauteur à votre contenu via du code CSS dans le champ CSS personnalisé de votre thème.

Mais le plus usuellement, si votre thème WordPress est qualitatif, tel qu’OceanWP, vous n’aurez qu’une option à cocher, dans la section de personnalisation de vos widgets de pied de page, pour que votre sticky footer soit actif.

Réglages Sticky Footer - Thème WordPress - OceanWP
Réglages Sticky Footer - Thème WordPress - OceanWP

4. Footer avec effet parallaxe

Très tendance dans les conceptions web en 2021, le pied de page avec effet parallaxe, ou en anglais, Footer parallax effect, consiste à dévoiler votre footer avec une illusion de profondeur lorsque le visiteur arrive à la fin du contenu de votre page.

Cet effet de profondeur est obtenu en faisant défiler plus rapidement les éléments de premier plan que ceux d’arrière-plan.

C’est une excellente méthode pour mettre en exergue votre footer. 

Vous pouvez créer un footer avec effet parallaxe en :

  • Ajoutant des lignes de code HTML (HyperText Markup Language) et CSS (Cascading Style Sheets).
  • Installant une extension WordPress.
  • Choisissant un thème WordPress premium, tel qu’OceanWP, via une activation d’une seule case dans la section de personnalisation de vos widgets de pied de page.
Réglages effet parallaxe de pied de page - Thème WordPress - OceanWP
Réglages effet parallaxe de pied de page - Thèmes WordPress - OceanWP

Vous pouvez très bien associer, pour le plus bel effet visuel, le sticky footer avec un effet parallaxe, comme je le pratique sur mon site internet

Comment créer un footer efficace ?

Pour créer un footer efficace, il faut soigner autant son contenu que son ergonomie.

Le contenu de votre footer

Le contenu du footer de votre site web est très important pour augmenter votre durée moyenne des sessions, diminuer votre taux de rebond, mais aussi pour votre SEO (Search Engine Optimization).

Un pied de page ne doit surtout pas être un « fourre-tout » d’informations.

Les informations qui doivent être présentes dans votre footer peuvent être dispatchées en trois catégories :

  1. Indispensables.
  2. Recommandées.
  3. Facultatives.

1. Les informations indispensables

Les informations indispensables dans votre footer sont, pour la plupart, d’ordre juridique :

  • Mentions légales.
  • Politique de confidentialité.
  • Protection des données personnelles (cookies).
  • Conditions générales de ventes (CGV) pour les sites de vente en ligne.

Très peu cliquées, et ayant peu ou prou d’intérêt pour vous en termes de positionnement, je vous conseillerai, pour économiser votre budget crawl ainsi que pour éviter de perdre inutilement du jus de liens (Link juice), de rassembler ses pages institutionnelles sur une seule page web et de ne mettre qu’un lien unique.

  • Droit d’auteur (Copyright) : pour protéger tous les éléments présents sur votre site web (images, textes, vidéos, etc).

Je vous conseillerai de le placer dans le bas de footer. 

Footer - Droits d'auteur-Copyright
Droits d'auteur - Copyright - Bas de footer
  • Plan du site HTML (à ne pas confondre avec le fichier Sitemaps XML) : sa présence est primordiale, car il présente un triple intérêt :
    – Fournir aux moteurs de recherches (Google, Bing, Ecosia, Qwant, etc) la liste complète de toutes vos URLs (Uniform Resource Locator).
    Limiter les niveaux de profondeur (positionne tous vos URLs à un clic de la page d’accueil).
    – Permettre à vos visiteurs de trouver facilement et rapidement la page qu’ils recherchent (en réalité, très peu, voire quasiment, jamais cliqué). 

Pour créer un plan de site HTML sous le CMS WordPress, je vous conseille une extension simple et efficace : WP Sitemap Page

Plan du site - Footer
Plan du site - Footer

Pour les sites de commerce electronique, d’autres informations essentielles dédiées au service client se doivent d’être présentes pour renforcer la confiance de vos visiteurs et booster votre taux de conversion :

  • FAQ (Foire aux questions).
  • Modalités de livraison.
  • Modes de paiement.
  • Modalité de retour.

2. Les informations recommandées

Les informations recommandées dans un footer ont pour principaux objectifs de renforcer votre crédibilité, susciter la confiance de votre audience et de fournir à vos visiteurs (clients/prospects) des moyens pour vous contacter :

  • Logo : il renforce votre image de marque et est imprimé par le cerveau du visiteur, même s’il le survole.

Pour éviter de perdre du jus de liens, le logo ne doit pas être cliquable.

  • Leitmotiv (marque, mission, valeurs) : il doit être très court, comporter quelques mots-clés pertinents et être positionné juste en dessous de votre logo. 
Leitmotiv - Footer
Leitmotiv - Footer
  • Adresse physique, numéro de téléphone, horaires d’ouverture : cela est très important, voire quasi indispensable, d’indiquer ses informations de contact pour montrer à vos visiteurs que vous êtes une entité réelle.

Ses citations NAP (Name, Address, Phone Number) sont très importantes pour votre référencement local.
En effet, la cohérence NAP entre votre site internet et votre fiche Google My business améliore votre visibilité locale. 

Citations NAP - Footer
Citations NAP - Footer
  • Icônes de réseaux sociaux (LinkedIn, Facebook, Instagram, Twitter, Pinterest) : en 2021, cela semblerait même suspect pour vos visiteurs que vous n’ayez aucun réseau social d’entreprise.
    Les médias sociaux sont très importants, car ils vous permettent de :
    – Développer votre notoriété et votre e-reputation.
    – Partager votre contenu.
    – Créer et fédérer une communauté.
    – Interagir avec votre communauté (répondre aux questions, assurer un service après-vente rapide). 
    – Fidéliser sa clientèle (jeu concours, code de réduction, avant-première, etc).
    – D’être moins dépendant de Google.
    – Classer vos profils sociaux sur la première page de résultats des moteurs de recherche (SERP).
    – Générer du trafic qualifié (attention chaque réseau social a ses spécificités propres).

À noter que les réseaux sociaux n’ont aucun impact au niveau de votre SEO car les liens entrants sont toujours en nofollow. 

Icônes réseaux sociaux - Footer
Réseaux sociaux - Footer
  • À propos ou Qui sommes-nous ? : c’est une page informationnelle permettant de vous présenter, de mettre en exergue votre histoire, votre marque et vos points forts.
  • Badges de récompenses, de certifications : rien de mieux pour inspirer confiance à vos visiteurs.
  • Badges de paiement sécurisé : idéal pour limiter votre taux de rebond. 
  • Badge de plateforme d’avis clients et notation sous forme d’étoiles (Avis vérifiés, Trustpilot, Avis Garantis, Ekomi, etc) : rien de mieux pour booster votre taux de conversion. 
Avis utilisateurs - Footer du site 1.fr
Avis utilisateurs - Footer du site 1.fr
  • Navigation : Cela peut être important, surtout pour un site WooCommerce, de mettre des liens de navigation vers vos catégories principales ou vos pages les plus importantes afin de garder votre visiteur le plus longtemps sur votre site.

Cependant, pour éviter de diluer votre jus de lien, ne remettez pas, à (quasi) l’identique, le menu déja présent dans votre header.
Il n’y a rien de pire pour votre SEO qu’un Mega-Footer (également appelé Fat-Footer).  

  • Call To Action (CTA) :  Il est, de coutume, d’inclure, sous la forme d’un bouton d’appel à l’action, un formulaire d’inscription à votre newsletter afin de transformer votre visiteur en abonné.

Pour être réellement efficace, un CTA doit être unique et se démarquer du reste du contenu de votre footer, soit en mettant de l’espace autour, ou/et, soit en le mettant dans une couleur différente.

Call To Action (CTA)
Bouton Call to action (CTA) - Footer

3. Les informations facultatives

Les informations facultatives dans un footer dépendent de la stratégie de chaque entreprise et de son secteur d’activité, mais sont, principalement, celles-ci :

  • Barre de recherche : à ne mettre que si elle n’est pas présente dans votre header.
  • Cartes cadeaux.
  • Carrière : si votre entreprise propose des offres d’emplois, une page carrière ou recrutement est un excellent moyen pour recueillir gratuitement des candidatures.
  • Derniers articles de blog : à ne mettre que si vous publiez très régulièrement des articles.
  • Évènements à venir : à ne placer que si vous organisez régulièrement des évènements.
  • Logo(s) d’adhésion aux associations caritatives, sportives, humanitaires, etc. 
  • Nos partenaires.
  • Nos revendeurs.
  • Catalogue : si vous proposez des catalogues papier ou en ligne.
  • Presse : à ne mettre que si vous désirez que des médias entrent en contact avec votre entreprise.  
  • Connexion : par exemple, si vous vendez en B2C et en B2B (espace pro).
  • Carte Google Maps : pour insérer rapidement et facilement une carte personnalisable à souhait, je vous conseille un plugin WordPress : WP Google Maps

Toutefois, en termes d’expérience utilisateur, je ne préconise pas de l’intégrer dans votre pied de page, car elle ralentit vos performances d’affichage.
Privilégiez, plutôt, l’insertion dans votre page « Contact ». 

Call To Action (CTA)
bouton CTA - Footer

L'ergonomie de votre footer

En termes d’expérience utilisateur (UX), l’ergonomie (la forme) d’un footer est tout aussi importante que son contenu (le fond).

Se répétant sur chaque page de votre site, un footer est la dernière chance pour vous démarquer de la concurrence, de laisser une bonne impression et de renforcer votre image de marque. 

Chaque site internet est différent en fonction de son public cible et de son objectif (vendre des produits ou/et services (site de commerce en ligne) ou présenter l’activité de son entreprise (site vitrine)), mais certaines des meilleures pratiques de conception d’un pied de page sont identiques, et donc à utiliser :

  • Penser simplicité, fluidité et lisibilité.
  • Placer les informations les plus importantes à gauche.
  • Démarquer le footer du reste de la page avec une couleur de fond différente, mais tout en gardant une cohérence avec le design du site.
  • Utiliser des pictogrammes et des icônes de réseaux sociaux plutôt que des liens textuels.
Pictogrammes - Icônes réseaux sociaux
Pictogrammes et icônes réseaux sociaux
  • Hiérarchiser, catégoriser et organiser les informations sous forme de colonnes.
  • Utiliser des polices de caractères sans Serif et jouer avec leurs fontes (taille et poids).
  • Laisser respirer les éléments (logo, bouton CTA, icônes, etc) ainsi que les lignes d’information (texte ou liens textuels) en bien les espaçant. 
  • Opter pour un contraste élevé pour une meilleure lisibilité (fond clair avec texte noir ou inversement).
  • Vérifier la lisibilité sur les appareils mobiles (smartphone, tablette). 100% responsive !
Version mobile - Footer 100% réactif
Version mobile - Footer 100% réactif

Conclusion

Bien qu’il soit la dernière chose que vos visiteurs puissent remarquer, ne sous-estimez pas l’importance du footer !
En effet, il permet d’inciter vos visiteurs, avant qu’ils ne quittent votre site, de s’abonner à votre newsletter, de vous suivre sur vos réseaux sociaux, de vous contacter, de connaître votre adresse physique ou simplement de trouver des informations importantes.

La seule chose à faire, pour augmenter votre taux de conversion, est de bien choisir les éléments à faire figurer sur votre pied de page et de les organiser d’une façon simple et fluide.

Si vous avez aimé cet article sur « Comment créer un bon footer ? », laissez-moi un petit commentaire.

Laisser un commentaire