Un site avec une navigation à position fixe est un site qui ne permet jamais à l'utilisateur de perdre le site des liens de répertoire lorsqu'ils défilent.
Cette astuce simple crée un site incroyablement facile à naviguer et parfaitement adapté à des types de contenu spécifiques. Ci-dessous, nous allons examiner les utilisations les plus courantes et les plus uniques de la navigation fixe dans la conception Web.
Les blogs
La navigation fixe est l’un des endroits les plus courants dans les blogs, en particulier les blogs Tumblr. La raison pour laquelle ce format fonctionne si bien pour les blogs est qu’ils sont notoirement longs et nécessitent donc beaucoup de défilement. L’application d’une position fixe à la navigation permet aux utilisateurs de naviguer sur votre site de bas en haut, ce qui élimine le besoin ennuyeux de revenir au début de la page. Voici une liste de plusieurs blogs que j'ai trouvés en utilisant cette technique.
Brian Casel
Sur ce site, les liens en haut et la navigation à gauche restent avec vous pendant que vous faites défiler, ce qui vous permet d'accéder facilement à tout ce dont vous avez besoin depuis n'importe quel point du site.La navigation sur la gauche ne vous emmène pas une autre partie du site mais filtre plutôt le contenu afin que vous ne puissiez voir que les articles de blog, les citations, les vidéos, etc.
David Appleyard
Le blog personnel de David Appleyard, de Design Shack (chut, il n'a pas la moindre idée que j'inclus cela). David a placé une barre de recherche, des informations sur les médias sociaux et divers liens vers d’autres sites dans sa barre latérale fixe, ce qui permet d’avoir un aperçu rapide de toute sa vie numérique.
Doug Neiner
La page Tumblr de Doug Neiner suit le même format que celle de David, avec les liens sociaux et diverses informations fixés à gauche de l'écran. Doug a également créé une interface attrayante pour ses messages qui utilise des poteaux en métal et différentes pièces jointes en fonction du type de message. Globalement, un design vraiment unique!
Jaype
Contrairement aux arceaux métalliques de Doug Neiner, Jaype utilise une approche beaucoup plus féminine avec des textures bleu clair et des bords de scrapbooking. La barre de navigation latérale utilise un bel effet accordéon pour développer chaque section afin d’avoir plus d’options. Une autre bonne idée, la barre de recherche est fixée au bas de la page afin qu'elle reste avec vous lorsque vous redimensionnez la fenêtre.
Mark Jardine
Dans ce blog, nous voyons à nouveau que la barre latérale est utilisée moins pour la navigation dans le site lui-même que pour les sites de médias sociaux et le contenu associé. Mark est un designer pour Tapbots, une équipe de développeurs composée de deux personnes qui créent certaines des plus belles applications disponibles pour iPhone.
Navigation à droite
Placer la navigation sur le côté droit de la page est assez rare et constitue en fait un excellent moyen de rendre les utilisateurs nazis extrêmement faciles à utiliser. L’application d’une position fixe à votre navigation de droite augmente sa visibilité lorsque l’utilisateur interagit avec votre site et réduit les risques de confusion quant à la recherche de davantage de contenu. Voici quelques exemples.
Collectif Fat-Man
Fat-Man Collective est mon site préféré absolu dans ce billet pour une raison simple: le gros homme. Il est ce fou personnage CG qui se trouve en haut à droite de l'écran. Il a l'air assez drôle pour que j'adore le site pour cela seul, mais lorsque j'ai fait défiler le site, le gros homme a commencé à marcher! J'ai ri aux éclats de rire en voyant ce personnage étrangement proportionné et potelé partir en randonnée avec sa cravate s'agiter. Cliquez sur l'un des liens sous ses pieds et la page passe à un endroit spécifique, ce qui, bien sûr, fait sauter le gros homme. Chapeau aux gars qui ont créé ce site. il rayonne de génialité ringard.
Piensa en Pixels
Pour autant que je sache, le contenu de ce site est tellement drôle qu’il domine le gros homme (improbable). Voyant comment je ne peux pas en lire un mot cependant, je vais supposer qu'il contient des informations assez simples sur le portefeuille. Piensa en Pixels est un site simple mais attrayant, qui contient des liens vers différents projets situés en bas à droite de la page.
Sisu
Sisu est une petite entreprise de design qui compte de gros clients. Leur navigation fixe est contenue dans une bande de sorte que le contenu à gauche et les illustrations à droite défilent pendant que les liens restent en place. Cela donne un très bel effet et est très utile lorsque vous faites défiler les nombreuses récompenses qu’ils ont remportées.
Sites horizontaux
Il est toujours rafraîchissant de trouver un site qui casse le moule typique du défilement vertical. Ces sites utilisent la navigation fixe pour s'assurer que la nature horizontale de l'expérience ne vous fait pas perdre votre chemin.
Netontwerp
Netontwerp utilise jQuery pour gérer l'animation latérale qui se produit lorsque vous cliquez sur un lien. Au fur et à mesure que le site défile, la navigation reste fixe sur la gauche et s'insère parfaitement dans le design de chaque page de manière incroyablement transparente. J'aime la nature confinée de ce site, qui s'accorde parfaitement avec la conception robuste basée sur une grille.
f $ dsign
f $ dsign est une autre dose d'action horizontale via JavaScript. Ce site comporte quatre sections, facilement accessibles à l’aide de la navigation fixe située à gauche de la page. Les illustrations loufoques rendent le trajet rapide et amusant amusant!
Attrape-moi si tu peux
Certains concepteurs de site veulent les fonctionnalités de navigation fixe sans la nature ennuyeuse et statique d'un élément fixe. La solution est de permettre à la navigation de suivre la navigation lorsque vous faites défiler l'écran, mais de prévoir un délai afin qu'il y ait une sorte de "rattrapage". effet.
Astrel Creative
Ce site original comporte une section de navigation en train de disparaître. Lorsque vous faites défiler l'écran, la navigation s'estompe. Lorsque vous cessez de faire défiler l'écran, il réapparaît comme par magie avec une belle transition. C'est un peu d'animation qui augmente vraiment le facteur? Wow? du site.
Le molitor
Le Molitor adopte une approche différente de la navigation de fuite qui met l'accent sur le «rattrapage». idée un peu plus.Lorsque vous faites défiler l'écran, il semble que la navigation va rester en haut de la page. Toutefois, lorsque vous ralentissez ou vous arrêtez, la navigation s’agrandit et s’arrête. C'est amusant à jouer et vaut environ six bonnes secondes de divertissement.
Encore plus!
Vous voulez plus d'inspiration de navigation fixe? Demandez et vous recevrez mon ami. Voici d’autres exemples, classés par ordre décroissant dans quelle mesure ils sont cool et / ou uniques (ils sont tous d'excellents choix). Prendre plaisir.
Irvine Acosta
Truquer
Black Estate
Allez les médias
Oui j'ai dit oui
Ryan Dean-Corke
Studios Domani
Tomber sur
Côté quai
Qu'est-ce que tu penses?
Il m'a fallu une éternité pour trouver de nombreux sites utilisant la navigation fixe. J'espère vraiment que vous avez aimé le post. Sinon, j'ai perdu la meilleure partie de la journée à chercher sur le Web alors que j'aurais pu faire ce que je fais normalement un jour donné? qui ne navigue certainement pas dans les blogs de création ni dans les galeries CSS comme un grand nerd. Ok, je mens, c'est exactement ce que je fais tout le temps de toute façon.
Lame blagues de côté, utilisez les commentaires ci-dessous pour nous dire ce que vous pensez de la navigation à position fixe en général et quel exemple vous avez le plus apprécié. N'hésitez pas à partager tous les exemples que vous trouverez.