web-dev-qa-db-fra.com

Méga pied de page sur de petites pages

Je veux ajouter un méga pied de page à ma page. Je l'aime si l'utilisateur a la possibilité de faire défiler vers le bas et de trouver les mêmes liens précieux. Cependant, si la page n'a presque pas de contenu, comme par exemple une page de connexion, le méga pied de page prend la plus grande partie de la page Web et distrait de la page réelle.

Cela améliorerait-il l'UX si j'avais deux types de pieds différents, un méga-pied de page pour les grandes pages et un simple pied de page avec un copyright pour les petites pages? Ou dois-je donner à chaque page une hauteur minimale, pour éviter que le pied de page ne prenne plus d'espace que le contenu réel de la page.

footers
1
Adam

Restez avec le même pied de page sur chaque page pour ne pas confondre vos utilisateurs ...

... et utilisez une hauteur minimale pour la zone de contenu. Voir l'exemple suivant de la recherche de balises , qui n'a presque pas de contenu pour aucun résultat de recherche. C'est exactement comme vous l'avez décrit, le pied de page reçoit plus d'attention que la zone de contenu.

A) Avec une hauteur minimale de 450 px

tag search with min-height for content area

B) Sans la hauteur minimale

enter image description here

8
Marvin

Je vous conseille de ne pas utiliser deux types de pied de page différents. Parce que le design doit être cohérent. Avez-vous pensé à améliorer vos petites pages, ajoutez-leur des éléments graphiques pour les rendre plus visibles que le pied de page. Vous avez mentionné la page de connexion, utilisez peut-être une fenêtre contextuelle pour cette partie particulière.

2
Sanja Herceg

Je pense que vous devriez toujours garder le centre de votre page grand ouvert, tout comme les autres réponses ici. Je voudrais juste ajouter que vous pouvez également (et à mon avis devrait) utiliser flexbox pour cela, pas min-height.

Exemple ( voir ici pour la source originale par Philip Walton ):

html:

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

css:

.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.Site-content {
  flex: 1;
}

Cela gardera le centre de votre page flexible, il s'agrandira s'il y a du contenu, ou bien il sera aussi gros d'avoir votre pied de page au bas de la page.

0
VeldMuijz

Je pense qu'il y a une option pour essayer de tirer le meilleur parti d'un design qui s'adresse à beaucoup ou très peu de contenu. Vous pouvez implémenter un pied de page à hauteur fixe pour la cohérence qui montre un petit nombre d'éléments, mais inclure un déclencheur ou une action qui expose plus de contenu (s'il y a plus de contenu) lorsque l'utilisateur veut y regarder (par exemple plus ou développer le lien/l'icône).

Cela vous permet de garder le design simple à une hauteur fixe, mais peut s'étendre pour accueillir plus de contenu en cas de besoin.

0
Michael Lai