Tendance du webdesign : sticky navigation

Partages

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 ?

Annonce

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 ?

Partages

19 commentaires

Laisser un commentaire :

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

*