Éléments Web à position fixe
L'utilisation d'éléments fixes a gagné en popularité et est devenue un élément commun sur le Web.
Cette technique implique la fixation de certains éléments dans le navigateur pendant que le reste de la page défile. Le plus souvent, nous trouvons cela fait sur les éléments d'en-tête, y compris la navigation principale pour un site. C'est également une approche populaire sur les sites à page unique où la navigation dans la page doit être toujours présente. Nous trouvons également divers éléments de pages Web verrouillés en utilisant de telles techniques.
Il y a beaucoup de situations que nous pouvons trouver où corriger un élément dans la page est une bonne chose, mais tout revient à un seul but. Dans presque toutes ces situations, l'élément fixe garde une partie critique de la page devant les utilisateurs à tout moment.
L'importance de ces éléments varie, mais l'objectif fondamental est, jusqu'à un certain point, de garder une partie de la page en permanence dans le port d'affichage.
Comme vous envisagez d'utiliser cette technique, je vous recommande fortement de bien réfléchir à pourquoi et comment vous le faites. Gardez à l'esprit que la partie de votre page qui ne bouge pas attirera automatiquement l'attention. Alors assurez-vous de le mettre au travail. Plongeons dedans!
En-têtes fixes
Les en-têtes fixes sont de loin l'élément de position fixe le plus courant, si bien qu'en fait j'ai dû commencer à ajouter à cette collection afin d'éviter trop d'échantillons. Le plus souvent, l'en-tête est fixe pour garantir que la navigation sur les sites est toujours présente. Comme je l’ai déjà mentionné, cela est particulièrement vrai lorsque l’on traite d’un seul site Web.
Il existe de nombreuses variations subtiles dans la façon dont vous pouvez gérer les en-têtes fixes. Nous allons donc passer en revue certains exemples d'idées sur cette approche.
Taches de rousseur et beau
C'est ce que je considère comme un exemple classique de cette technique. L'en-tête est fixe lorsque vous faites défiler le site. Cela inclut le logo et les principaux éléments de navigation. En outre, il s’agit d’un site Web d’une seule page. En cliquant sur la navigation principale, vous accédez à la partie appropriée de la page.
Dans ce cas, l'en-tête collant rend la navigation sur le site d'une page simple. Il évite également l'un des aspects les plus ennuyeux de nombreux sites d'une seule page: lorsque la navigation est uniquement en haut de la page, mais qu'elle défile depuis longtemps. En tant que tel, l'en-tête fixe a non seulement un aspect esthétique et conserve la principale image de marque du site, mais garantit également une utilisation facile du site.
Mapalong
Cet exemple utilise un en-tête fixe, mais avec sa propre torsion mineure. Ce site est également une mise en page unique, mais ne contient aucune navigation de page. Dans ce cas, l'en-tête fixe contient le logo principal et un bouton de connexion, deux éléments très importants. Mais, mieux que cela, lorsque vous faites défiler la page, l'appel principal à l'action se déplace vers l'en-tête lorsqu'il n'est plus visible. Par conséquent, le point de conversion principal du site est toujours visible. Et pourtant, mieux encore, le fait que l'appel à l'action devienne visible appelle l'attention de l'utilisateur sur ce point, soulignant davantage le point de conversion du design! À mon avis, une utilisation brillante de l'approche.
Kisko Labs
Une autre approche intelligente de l'en-tête de position fixe est une technique que j'appelle slide and stick. Sur le site de Kisko Labs, seule une partie des en-têtes reste en place. Au fur et à mesure que vous faites défiler la page, la navigation principale défile également. C'est jusqu'à ce qu'il frappe le haut de l'écran, alors il reste là. Ainsi, la navigation glisse (ou défile) normalement, puis se place au sommet.
Un détail supplémentaire très intéressant est la façon dont la navigation met en évidence la partie de la page que vous consultez actuellement. Puisqu'il s'agit d'une conception à une seule page, il est utile que la partie actuelle de la page soit identifiée comme vous le feriez avec le statut normal de la "page en cours" de toute navigation.
Élever le toit
Une extension commune de ce style consiste à incorporer un certain niveau de transparence dans la couche adhésive. Dans la plupart des exemples que vous trouverez ici, cela se fait simplement en présentant un bord irrégulier à l'élément adhésif. Parfois, cela se fait en faisant sortir un élément de la barre fixe, d'autres fois avec un bord irrégulier. Sur le site Raise the Roof, il a été réalisé avec une bordure très organique et presque aléatoire.
Dans cet exemple, nous trouvons un résultat visuel intéressant. Grâce à l'utilisation d'éléments se chevauchant, le site crée une profondeur visuelle lorsque le contenu défile derrière l'en-tête. Ceci est encore souligné par la lune en arrière-plan qui est également fixe. Le résultat final est trois couches visuelles. Une telle profondeur ajoute un grand intérêt visuel et peut créer un design saisissant.
Bienvenue dans l'eau
Le site Welcome to the Water est une création plutôt inhabituelle. Très peu de choses sur ce site correspondent aux normes de mise en page et de conception Web. L'en-tête fixe est particulièrement intéressant pour le sujet de cet article. Sur ce site, l'élément fixe sert d'outil de navigation sur le site. Mais à bien des égards, la barre d’outils a plus de sens.
Échantillons supplémentaires d'en-têtes fixes
Voici quelques exemples supplémentaires d'en-têtes fixes. Vous trouverez un large éventail de styles et de variations subtiles ici.
Tam Cai
Marlon Messam
Big Eye Creative
Balencic Creative Group
Ivo Mynttinen
Krista Ganelon
Creattica
Ian James Cox
Faire de meilleures applications
Matthew Carleton
Shweplantis
TruQua
Rodolphe Celestin
Holcomb Guitars
Trussystem
Pieds Fixes
Peut-être le plus évident à l'opposé de l'en-tête fixe serait le pied de page fixe. Dans de tels cas, le pied de page est collé au bas de l'écran. Lorsque l'utilisateur fait défiler, l'élément reste en place.
Tout comme n'importe quel autre élément fixe, la création d'un point focal reste l'objectif principal. Il est intéressant de noter qu’avec de tels bas de page, il s’agit le plus souvent d’une fonction secondaire qui reste un objectif principal.
Groupe sans plomb
Le site du groupe sans plomb en est un excellent exemple. Ici, le pied de page fixe contient des éléments qui sont orientés vers l'action et frappent le but principal du site. Notez tout d'abord que tous les éléments de cette barre sont des choses qu'un utilisateur peut faire: les promouvoir sur les réseaux sociaux, passer un appel téléphonique ou les envoyer par courrier électronique. Deuxièmement, ce sont les principales actions que l’Agence veut probablement vous faire prendre. Ils veulent que vous les fassiez la promotion ou les contactiez. Ce sont les principales raisons d'avoir un site comme celui-ci. Il est donc judicieux de les fixer sur un pied de page où ils susciteront beaucoup d'attention.
Envato
Le site Envato a également un pied de page fixe. Ici, la barre contient le logo principal du site, qui a été déplacé ici du coin supérieur gauche. Franchement, pour une marque comme Envato, ce n'est pas un problème. En outre, vous trouverez une série de menus déroulants qui vous lancent sur leurs différentes propriétés Web. Cette fonction simple est leur véritable objectif. En fait, vous pourriez dire que cette page de profil d'entreprise n'est pas vraiment l'endroit où ils veulent que les gens se retrouvent. En tant que tel, l'accent mis sur le retour sur leurs sites de contenu est important et inévitable.
Kiyuco
Pour de nombreux sites comme celui-ci, leurs programmes de marketing par e-mail revêtent une importance cruciale. En tant que tel, avoir un pied de page fixe qui met bien en évidence le formulaire d'inscription peut faire beaucoup pour développer de telles listes de diffusion. Le marketing par e-mail peut-il vous aider à promouvoir votre site sur une longue période et à poursuivre les clients plus efficacement? Si tel est le cas, peut-être un pied de page fixe comme celui-ci serait-il un excellent outil.
Barres latérales à position fixe
Le verrouillage d'éléments d'une page Web n'est pas limité aux en-têtes et aux pieds de page, bien qu'ils puissent être les plus populaires. Il semblerait qu'une barre latérale à position fixe soit une seconde proche.
Les barres latérales fixes contiennent souvent des informations très similaires à celles que vous trouverez dans un en-tête. Cela inclut des éléments tels que les logos, les outils de navigation et les médias sociaux. Voici quelques exemples à considérer si vous souhaitez utiliser cette approche.
Jorge Rigabert
Ce site magnifique est un exemple parfait du style au travail. Ici, la barre latérale contient les principales options de marque et de navigation des sites. Cette approche de type sidebar est excellente car elle permet de garder la navigation à l’écran au fur et à mesure que la page défile, mais aussi parce qu’elle ne recoupe pas le contenu au fur et à mesure de son déplacement. Bien que cela puisse être une distinction subtile, cela donne une interface incroyablement fluide. Des sites comme celui-ci affichent une élégance qui semble simple, mais est incroyablement difficile à mettre en place.
Plus de dangers Plus de héros
J'aime beaucoup le fonctionnement de ce site. Les éléments fixes de la barre latérale sont les fonctions de base que les propriétaires de sites souhaitent que vous preniez. Plus que tout, ils veulent que vous entendiez la musique! En tant que tel, la fonction "play", visible et permanente, est prête et attend. Je ne peux pas imaginer un élément plus critique sur le site, et il est tout à fait logique d’avoir un affichage aussi visible. Et il faut aimer qu’il n’ait pas été présenté de manière odieuse; il ne joue même pas automatiquement. Bravo au concepteur qui a contrôlé cette tentation.
Yowza
Parfois, il est souhaitable de créer un seul élément collant qui favorise une fonction particulière. Nous l'avons vu avec divers commentaires et services d'assistance que vous pouvez brancher sur votre site. Dans ce cas, un bouton similaire à Facebook a été apposé sur le côté du site. Il reste en place pendant que vous faites défiler la page. Ceci, bien sûr, attire l'attention de l'utilisateur sur l'élément et l'encourage à l'utiliser. Je dirais que cela montre la puissance et l'importance des renvois sociaux dans une entreprise Web comme celle-ci.
En passant, j'adore la torsion du site sur la bordure supérieure de 10 pixels qui est devenue si populaire. Ici, l'élément défile simplement par. Pas une animation dramatique, mais quelque chose est amusant et ajoute une couche d'intérêt et de vie au site.
Collectif Fat-Man
Ce site suit tous les modèles que nous avons trouvés dans nos échantillons précédents. Mais il se distingue énormément grâce à une animation simple. Lorsque vous faites défiler la page, le personnage de la barre latérale anime et marche. Cet élément élève à lui seul le site dans une catégorie unique et mémorable. Comment se fait-il que quelque chose d'aussi banal puisse avoir un tel impact. Il prend ce site simple et le pompe plein de génialité. Cela montre que l’agence derrière elle aime peaufiner son travail avec les types de finitions que chaque client va mourrir.
Éléments de barre latérale plus fixes
Voici quelques exemples supplémentaires de barres latérales fixes au travail.
Poèmes idiots
Colin McKinney
Informateur
Ceci est Marcela
Janette D. Conseil
Logo uniquement
Une approche que nous ne trouvons pas souvent est un logo de position fixe. Dans cet exemple, le logo a été verrouillé même lorsque la page défile. Cette approche atypique garde le nom du site au premier plan. Des conceptions comme celle-ci peuvent être intéressantes à considérer. Il est vraiment difficile de deviner pourquoi ils ont pu le faire, mais on ne peut que supposer que la marque principale est d’une importance critique. Peut-être qu'ils ont beaucoup de concurrence similaire? Peut-être veulent-ils simplement se souvenir de leur nom? Quoi qu’il en soit, c’est une technique intéressante à retenir si elle s’applique à votre projet.
"Retour au sommet"
En ce qui concerne les pages vraiment longues, une fonctionnalité intéressante à ajouter est un lien qui vous amène en haut de la page. Et avec des éléments adhésifs, vous pouvez créer un tel lien qui reste au même endroit que vous faites défiler la page. C'est exactement ce que les échantillons fournis ici ont fait.
Le plus souvent, un tel élément est placé juste en dehors de la mise en page. De cette façon, il n’interfère avec rien d’autre dans la conception lorsqu’il traverse la page. Vous remarquerez également que ces éléments ont souvent une flèche pointant vers le haut - peut-être un élément évident à inclure, mais qu’il est important de garder à l’esprit car ils informent rapidement les utilisateurs de leur objectif.
Cette approche contraste quelque peu avec la notion d'en-tête collant. Dans ce cas, la navigation est le plus souvent uniquement en haut de la page. Il est donc important d'y revenir, car cela permet aux gens de contourner rapidement le contenu des sites. Dans le cas de sites à une seule page, cela peut s'avérer un peu compliqué.
Overlapps
Cet exemple montre une belle touche supplémentaire en ce sens qu'il ne montre pas l'élément de retour à la partie supérieure, sauf si vous n'êtes pas en haut de la page. Peut-être un détail évident à inclure, mais comme vous le constaterez, ce n’est pas toujours le cas. Une partie du pouvoir de cette approche réside dans le fait que le fait même de l’apparaître attire l’attention sur celui-ci pour s’assurer qu’un utilisateur en est conscient.
Deux autres échantillons
Les deux exemples suivants ont tous deux des boutons de retour en haut, bien qu'ils soient visibles tout le temps. Il est intéressant de noter que cet élément est le plus souvent placé dans le coin inférieur droit de l’écran. Ce n'est pas la partie la plus importante de la conception, alors peut-être que sa nature secondaire est bonne pour un élément moins important. Vous remarquerez bien sûr que l'élément est toujours mis en valeur en cassant les bordures et avec des couleurs vives. Je suppose que le moral de l'histoire est de considérer son importance pour l'utilisation de votre conception. Si cela fait toute la différence, assurez-vous qu'il est visible.
Thème Joker
Dusanka et David
Plusieurs éléments fixes
Dans ce dernier exemple, nous allons examiner un site qui contient de nombreux éléments fixes dans la page. À bien des égards, ce site rompt avec la plupart des normes de conception et de mise en page Web. À l'exception du logo dans le coin supérieur gauche, presque rien n'est à sa place habituelle.
Nous trouvons cependant des éléments que nous connaissons bien sur cet article, comme la barre latérale fixe. Cependant, vous remarquerez que deux autres sont loin d'être typiques. Par exemple, le pied de page fixe qui contient des liens à l’échelle du site. Des choses comme les politiques de confidentialité et les conditions générales garantissent rarement une telle position dans une page. Pourtant, vous les trouvez ici attachés à la page avec d’autres liens de navigation assez importants.
J'aime vraiment comment ils ont collé les liens du compte utilisateur dans le coin supérieur droit. C’est là qu’ils sont fréquemment placés, mais ils sont rarement réparés, quel que soit le défilement, comme dans ce cas. J'aime cela car cela garantit que vous pouvez toujours accéder rapidement aux fonctionnalités du site du membre; Quelque chose qui pourrait peut-être bénéficier d’autres applications et sites Web.
Dans l'ensemble, ce site est loin d'être normal, mais quelque chose fonctionne incroyablement bien et est facile à aimer. Son agencement inhabituel ne le rend pas difficile à utiliser et le résultat final est une expérience distincte et agréable.
Ressources
Enfin, avec ce tour d'horizon, j'aimerais inclure quelques jQuery plugins qui répondent au besoin de fixer des éléments à un emplacement spécifique dans une page. Ils offrent des fonctionnalités différentes qui répondront à vos besoins, alors assurez-vous de les explorer tous pour trouver la bonne solution.
La grande chose est qu'ils sont tous des plugins jQuery et qu'ils sont super simples à implémenter. Si vous voulez produire ce style, cela facilitera au moins la tâche.
Suricate
Suricate est l'un de mes outils préférés pour ce travail particulier. Sa capacité à être cachée en fait un excellent outil pour afficher du contenu promotionnel ou des fonctionnalités importantes telles que les formulaires d'inscription par courrier électronique.
Stickyscroll
Stickyscroll est un plugin qui vous permet de créer des éléments qui défilent avec la page jusqu'à ce qu'ils atteignent le haut, puis ils restent en place. Ce plug-in permet également de s'assurer que les éléments ne défilent pas dans une région de bas de page en lui attribuant une limite inférieure. une belle fonctionnalité supplémentaire à coup sûr.
Waypoints
Waypoints vous permet de déclencher des événements jQuery lorsqu'un utilisateur fait défiler des points spécifiques dans une page. Ceci est pratique si vous souhaitez mettre en évidence ou modifier la navigation pour correspondre à l'emplacement de l'utilisateur dans la page. Mais le plaisir ne s'arrête pas là, car il existe d'innombrables choses que vous pouvez faire sur une page ou un dessin lorsque l'utilisateur fait défiler et interagit avec lui.
Conclusion
Les éléments fixes sont désormais un élément commun que les concepteurs peuvent utiliser. Les outils permettant de réaliser de telles fonctionnalités et la prise en charge complète du navigateur ne sont plus un problème.
En tant que tel, c'est une excellente technique à garder dans votre ceinture à outils et à tirer au bon moment. Bien entendu, de telles approches ne sont pas le type de chose que vous utilisez tous les jours, mais elles peuvent être incroyablement puissantes lorsqu'elles sont utilisées efficacement.