Tendance du webdesign : sticky navigation

sticky-header

Avec l’explosion des sites construits sur une page, les webdesigners ont redoublés d’ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ?

Souvenez-vous, le one-page layout est à la une depuis 2009 déjà ! Le tout a bien évidement beaucoup évolué avec l’usage massif d‘HTML5 et CSS3 et du responsive design, il est désormais courant de mettre davantage de contenu et de faire vivre une véritable aventure à vos visiteurs. C’est ainsi que naissent des centaines de sites immersifs à grand coup de scrolling et de paralaxe. Cependant en proposant beaucoup de contenu de cette manière, une question se pose. Comment guider efficacement l’utilisateur dans votre expérience digitalo-scrollante ?

Un menu…collé !

La navigation principale fixée en haut de votre écran n’est pas une façon révolutionnaire d’aborder les choses, mais connait un renouveau croissant. Le bon vieux CSS position:fixed ou encore position:absolute peut remplir très simplement la mission d’un header ou menu fixe. La véritable tendance qui se dessine dans le paysage webdesign est un menu qui se colle littéralement à votre écran lorsque vous scrollez.  Il trouve peut-être son origine dans le design de la timeline de Facebook.

Sticky header Facebook

Sur la page de présentation du journal, lorsque vous scrollez, un bandeau contextuel vient se coller en haut de votre écran pour vous donnez des indications. Il est lié à la navigation principale en bas de l’écran. Manière efficace d’afficher dans informations de manière utile et voyante et bien adapté à la navigation avec une tablette tactile. On retrouve le concept de manière détournée sur des dizaines de sites.

Quelques exemples :

Emily Smith

Sur le site de Emily Smith, le header avec le logo et la baseline disparaît lorsque vous scrollez. Normal, il monte, lorsque la page descend. Le menu par contre, reste fixé en haut de votre écran. Ceci vous permet de naviguer tranquillement dans le contenu sans avoir besoin de remonter chercher le menu.

sticky-header-2

sticky-header-2

DemiCreative

sticky-header

sticky-header

Bentrovato Blog

Concept légèrement différent sur ce blog, qui est lui organisé en plusieurs pages.

BentrovatoBlog

BentrovatoBlog

Pragmaticmates

Petite animation lors du scroll, le menu remontre légèrement pour prendre ainsi moins de place en hauteur.

Sticky header

Sticky header

Rits

Utilisation originale ici, où le menu discret du footer devient navigation principal une fois l’écran d’accueil dépassé.

Rits

Rits

Winnstein

Lorsqu’on arrive sur la page d’accueil, ce que l’on crois être des bloc de simple pictogramme est en fait la navigation principale une fois le scroll activé. Une bonne surprise qui fonctionne plutôt bien.

Sticky header

Sticky header

Exemple de navigation fixe « standard » :

Team Factory

Fixed Nav

This land Is Hovland

Fixed Nav

Statups Boo Box

Fixed Nav

Honeybrewing

Fixed Nav

Viewport Industries

Fixed Nav

Them is Chief Co

Fixed Nav

Containr

Fixed Nav

Ressources :

Tutoriel pour créer une navigation fixe sur WebdesignTuts+

Pour conclure :

Ce type de navigation fixée apporte un petit plus par rapport à une simple navigation positionnée habituelle. Un menu de ce type en adéquation avec les demandes et les tendances actuelles en matières d’adaptation aux supports mobile ou tablette. Reste tout de même à l’utiliser de manière originale pour créer une réelle expérience et centrer la navigation sur l’utilisateur. Tendance du webdesign ou non, il n’en laisse pas moins indifférent. Quel est votre avis sur la question ?

21 commentaires

  • Je l’utilise pour la plupart de mes sites! J’en fais ma propre caractéristique!

  • Belle liste ! Pour moi la bonne nouvelle d’iOS 5 a été le support de « position: fixed » pour Safari (entre autres), ce qui permet justement d’utiliser ce genre de technique aussi sur mobile.

  • Merci pour ces exemples, savez vous comment réaliser une navigation sticky sur express comme ici par exemple http://bentrova.to/ ou ici http://www.materialiste.com/ je cherche a le faire en transpartent mais impossible de trouver un totu

    Merci d’avance

  • @JORIS : Pour rendre la barre transparente, vous pouvez utiliser du CSS en faisant varier la transparence par exemple :

    .identifiant{
    filter : alpha(opacity=10);
    opacity : 0.1;
    }

    Je pense que c’est une bonne solution. Ou bien charger une image de fond en PNG transparent pour votre menu.

  • […] Tendance du webdesign : sticky navigation Avec l’explosion des sites construits sur une page, les webdesigners ont redoublés d’ingéniosité pour placer la navigation de manière efficace . Nouvelle tendance du webdesign ou simple coïncidence ? Souvenez-vous, le one-page layout est à la une depuis 2009 déjà ! […]

  • C’est vrai que le menu « fixé » revient à la mode, notamment avec tous les sites « one-page ». Merci pour ta sélection.

  • […] Avec l'explosion des sites construits sur une page, les webdesigners ont redoublés d'ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ? (Prochaine mission !  […]

  • […] Avec l'explosion des sites construits sur une page, les webdesigners ont redoublés d'ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ? (Prochaine mission !  […]

  • […] Avec l'explosion des sites construits sur une page, les webdesigners ont redoublés d'ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ? (Prochaine mission !  […]

  • […] Avec l'explosion des sites construits sur une page, les webdesigners ont redoublés d'ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ? (Prochaine mission !  […]

  • […] Tendance du webdesign : sticky navigation Les formulaires sont souvent un point épineux dans un web design : ils se doivent d'être beaux, ergonomiques, simples et accessible, ce qui est bien sur beaucoup plus facile à dire qu'à faire. De plus, l'intégration des formulaires apporte ses propres contraintes, qui ne simplifie vraiment pas le travail de l'intégrateur. Dans ces conditions, quelles sont les possibilités disponibles pour mettre vite en place un formulaire joli, fonctionnel, et qui ne ressemble pas forcément à tous les autres formulaires du Web (ce qui exclus Bootstrap) ? En récupérant où vous inspirant d'un des formulaires que vous a choisi le Blog du Webdesign dans cette liste ! Le Blog Du Webdesign booste l'inspiration des intégrateurs #15 Tendance web : Les menus animés en slide inspiration et tutoriels Pour finir cette semaine, nous vous proposons un petit tour autour d'une tendance web qui se propage petit à petit sur les sites internet avec les menus animés en slide. Des menus dynamiques et fluide Vous les avez déjà croisé sur certains sites, ce sont les menus masqués et accessible simplement à l'aide d'un icon qui devient un standard visuel avec ses 3 barres à l'horizontale. Au départ cet icon était utilisé pour les versions mobiles afin de masquer le menu qui prenait une place trop importante pour les écrans de nos smartphones. Mais certains designers ont réutilisé ce système pour masquer le menu sur les versions de bureau. iPhone & iPad app • android app • FAQs • blog • contact • Jobs • Press • Premium to experience pearltrees activate javascript. […]

  • C’est une tendance !
    Je l’ai fait pour un de mes sites !

    Vous pouvez consulter le tuto que j’ai fait pour ajouter une petite animation à votre barre de navigation :
    http://paulgruson.fr/2014/05/06/tuto-css-barre-de-navigation-fixe-sticky-nav/

  • Christine

    Pour ma part je viens de réaliser plusieurs tests utilisateurs pour des sites e-commerce qui souhaitaient en mettre en place.

    Verdict (sur 20 participants sur deux sites différents) : même en bas de page, les utilisateurs ont le réflexe de remonter en haut de page pour utiliser la navigation et la sous nav.

    Donc la mode c’est bien, mais en tout cas pour les sites e-commerce il faut voir.

  • […] Tendance du webdesign : sticky navigation. Avec l’explosion des sites construits sur une page, les webdesigners ont redoublés d’ingéniosité pour placer la navigation de manière efficace. […]

  • FP

    Moi sur mon pc avec firefox et mon écran 16/9,ca me rend fou…
    j’essaye a tout prix de m’en débarrasser avec stylish mais j’y connait rien,j’essaye de changer des valeurs mais ca marche jamais…malheureusement tous les sites font ca maintenant sans penser une seule seconde aux gens comme moi qui ne veulent pas etre gênés par un menu fixe qui suit quand on scrolle

  • […] de l’âge d’or de la tendance des menus sticky au scroll. Toujours utiles pour certaines utilisations comme les sites one-page, Smint permet de mettre […]

  • […] Tendance du webdesign : sticky navigation. Avec l’explosion des sites construits sur une page, les webdesigners ont redoublés d’ingéniosité pour placer la navigation de manière efficace. Nouvelle tendance du webdesign ou simple coïncidence ? Souvenez-vous, le one-page layout est à la une depuis 2009 déjà ! Le tout a bien évidement beaucoup évolué avec l’usage massif d‘HTML5 et CSS3 et du responsive design, il est désormais courant de mettre davantage de contenu et de faire vivre une véritable aventure à vos visiteurs. C’est ainsi que naissent des centaines de sites immersifs à grand coup de scrolling et de paralaxe. Cependant en proposant beaucoup de contenu de cette manière, une question se pose. […]

  • Cool man. Great explanation of each thing.

Laisser un commentaire :

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*