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.
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.
DemiCreative
Bentrovato Blog
Concept légèrement différent sur ce blog, qui est lui organisé en plusieurs pages.
Pragmaticmates
Petite animation lors du scroll, le menu remontre légèrement pour prendre ainsi moins de place en hauteur.
Rits
Utilisation originale ici, où le menu discret du footer devient navigation principal une fois l’écran d’accueil dépassé.
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.
Exemple de navigation fixe « standard » :
Team Factory
This land Is Hovland
Statups Boo Box
Honeybrewing
Viewport Industries
Them is Chief Co
Containr
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 ?
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.
Ping : La sticky navigation | EMWeb Connected
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.
Ping : INSPIRATION WEB | Pearltrees