Construire des pieds de page fonctionnels

Certes, le pied de page de votre site web est la dernière chose que les internautes verront probablement sur votre site, mais cela ne signifie pas qu'il faille lésiner sur les détails typographiques. En fait, si vous considérez l'axiome "gardez le meilleur pour la fin", vous devriez accorder autant d'attention au pied de page qu'au reste de votre site.

Comment et où fonctionnent les pieds de page

Dans la presse écrite, un pied de page indique au lecteur où il se trouve dans un livre ou un magazine grâce à un titre, un chapitre, une section ou un autre indicateur apparaissant en dehors du corps principal du contenu. Chaque page possède son propre pied de page, ainsi que le numéro de page, appelé folio. Une section peut avoir un pied de page courant indiquant Section 1 et, lorsque vous arrivez à la section Suivante , il passera à Section 2, et ainsi de suite. Les pieds de page et les folios peuvent apparaître à la fois dans les documents imprimés et dans les documents numériques.

À l'instar des pieds de page et des folios dans un livre, le pied de page d'un site web est séparé du contenu principal et apparaît souvent en bas de page, mais il est tout sauf anodin. En parcourant le web, vous verrez des pieds de page contenant toute une série d'éléments typographiques et graphiques essentiels à la navigation sur un site et, dans certains cas, vous aidant à accéder à un contenu de la plus haute importance.

- Contenu typographique
- Adresse(s) et numéro(s) de téléphone
- Lieu(x) d'où vous accédez au site
- Informations sur les droits d'auteur
- Mentions légales
- Conditions de service, conditions d'utilisation
- Politique de confidentialité
- Politique en matière de cookies
- Horodatage de la (des) mise(s) à jour ou publication(s) récente(s)
- Répétition du contenu du menu principal ou du sous-menu
- Liens fréquemment consultés

Iconographie, graphisme :

- Identité de la marque
- Logos des affiliés
- Partenaires d'entreprise
- Icônes associées à la navigation
- Boutons de médias sociaux

Griller ou ne pas griller...

Votre pied de page contiendra-t-il tout ce qu'il faut et l'évier de cuisine ? Peut-être sera-t-il dépouillé. Qu'il soit grand, moyen ou petit, utilisez une grille pour l'organiser et réfléchissez à la manière dont le pied de page s'articule avec le contenu environnant.

Qu'en est-il des pieds de page multifonctionnels ? Ou du positionnement multiple de votre pied de page ? Vous vous demandez peut-être ce que c'est et pourquoi j'en aurais besoin. Si vous avez une conception qui fait la part belle aux images et que vous souhaitez que la navigation soit secondaire lorsque les internautes arrivent sur votre site, faites en sorte que la navigation ne soit qu'un pied de page momentané. Lorsque le site est chargé, un pied de page collant fixe la navigation au bas de l'écran, mais lorsqu'on le fait défiler, il flotte en haut de l'écran pour devenir un menu supérieur.

Le backend

Un site comportant un grand nombre de pages aurait intérêt à ce que son menu et son pied de page soient inclus. Les inclusions peuvent être réalisées en PHP, ASP, JavaScript (JS) ou jQuery. Si ces méthodes ne vous semblent pas familières, ou même si vous les connaissez et qu'elles sont trop difficiles ou trop longues à exécuter, envisagez de créer l'inclusion à l'aide de HTML standard et de server side includes (SSI).

Lorsque le fichier principal et le fichier inclus se trouvent dans le même répertoire sur votre site server, cette ligne ajoutera le contenu de l'inclusion :

<!–#include file=”your-file-name.html” –>

SSI vous permet d'ajouter dynamiquement et facilement du contenu à une page HTML, le nom de fichier principal se terminant par shtml, shtm ou stm plutôt que par html pour traiter le contenu inclus, qui peut être html, htm, txt ou inc.

Lorsqu'ils ne se trouvent pas sur un site server et qu'ils existent seuls, les fichiers ssi-titled ont un code HTML distinct qui fonctionne indépendamment l'un de l'autre. Mais lorsqu'ils sont placés ensemble sur un site server , le fichier ssi-footer.html est placé dans le fichier ssi-demo.shtml. Un avantage supplémentaire ? Si vous avez plusieurs pages dans votre site et que vous devez mettre à jour le pied de page, il vous suffit de mettre à jour le fichier ssi-footer.html pour qu'il se propage à l'ensemble du site.

Marteaux et hamburgers

"Je suppose qu'il est tentant, si le seul outil dont vous disposez est un marteau, de tout traiter comme s'il s'agissait d'un clou" - AbrahamH. Maslow

Malgré tout l'amour que l'on peut porter au pied de page, on pourrait facilement plaider en faveur de l'absence totale de pied de page. Vous pourriez mettre tout ce dont l'utilisateur a besoin dans un menu caché et repliable, ou menu hamburger, un dispositif de navigation dont j'ai parlé dans un article sur les menus et la navigation sur les sites web.

Plutôt que d'aborder chaque site avec le même ensemble d'outils, comme un menu hamburger ou les mêmes conceptions de pied de page, tenez compte du contenu, de l'utilisateur, des cas d'utilisation et de l'évolution du site. Au lieu d'utiliser systématiquement un marteau ou un hamburger, travaillez le pied de page jusqu'à ce que vous ayez conçu quelque chose qui mérite d'être montré, même si ce n'est qu'au bas de l'écran.