Comment concevoir le site Web d'une seule page
Les conceptions sur une seule page peuvent être une excellente technique pour s'attaquer à des sites Web plus petits, même ceux que vous ne pensiez pas pouvoir réaliser sans plusieurs pages. Il y a des tonnes de bonnes raisons d'utiliser un site d'une seule page, de la facilité de maintenance aux besoins réduits en bande passante.
Si vous abordez un site plus court, celui qui comporterait normalement une poignée de pages, envisagez d'utiliser une seule page et voyez si cela facilitera le projet et le rendra plus convivial. Lisez la suite pour plus d'informations sur les avantages, quand (et quand) ne pas les utiliser, et quelques bonnes pratiques à suivre.
Les avantages de la conception d'une seule page
De toute évidence, les conceptions sur une seule page ne sont pas idéales pour chaque projet. Mais il y a une foule de raisons de les utiliser si elles conviennent.
Ils sont intuitifs à utiliser
Par défaut, tout ce que l'utilisateur doit savoir pour naviguer sur un seul site est de faire défiler. Vous pouvez inclure des flèches ou d'autres indices de navigation, mais avec une rare exception, le simple défilement amènera vos visiteurs d'une section à l'autre.
Vous n'aurez jamais à craindre que vos visiteurs restent bloqués dans plusieurs couches de navigation, recherchant sans cesse ce dont ils ont besoin. L'utilisation d'un en-tête ou d'autres liens de navigation est souvent utile s'il y a plusieurs sections sur la page, mais même sans elles, le site est utilisable.
Il peut être plus rapide et plus facile à maintenir
Bien que celui-ci ne soit pas donné, un site à page unique bien codé sera probablement plus rapide à coder qu'un site de plusieurs pages. Le processus de conception peut parfois prendre moins de temps, bien que cela dépende de la complexité de la page.
Un site d'une seule page peut également imposer certaines restrictions de conception qui accélèrent le processus une fois que vous avez une disposition de base en tête. Mieux qu'un site de plusieurs pages, un site d'une seule page doit comporter des sections qui fonctionnent ensemble de manière transparente. Ce type de restriction peut vraiment accélérer le développement de pages une fois que vous avez clairement défini ce que vous pouvez et ne pouvez pas faire.
La maintenance peut aussi être plus facile. Lorsque vous ne gérez qu'une seule page, la maintenance est simplifiée, à condition que votre code soit bien écrit.
Vous êtes obligé de simplifier
Celui-ci se base sur le point précédent. Lorsque vous ne travaillez qu'avec une seule page, vous devez simplifier les choses à leurs composants les plus essentiels. Plus de pages et de pages de propagande marketing inutile. Vous devez aller droit au but tout de suite.
Meilleur potentiel de référencement
Les liens entrants de qualité jouent un rôle important dans la performance d'un site Web dans les moteurs de recherche. Bien que les moteurs de recherche ne soient pas nécessairement la source de trafic la plus importante pour de nombreux sites, ils restent généralement importants.
En ne disposant que d'une page, vous n'avez qu'une seule page liée. Cela peut augmenter l’importance du site pour les moteurs de recherche.
La narration peut augmenter l'action
Les sites à page unique utilisent souvent un angle de narration que les sites multi-pages ne sont pas aussi performants. Cela peut augmenter les conversions et inciter les visiteurs à agir.
Les gens sont habitués à suivre des histoires, à la fois en ligne et hors ligne, ce qui présente des avantages évidents pour les utilisateurs. Nous avons lu et entendu des histoires depuis notre enfance, donc c'est quelque chose qui nous vient naturellement.
Plus facile à organiser
Il n'y a plus de listes infinies de pages et de sous-pages à organiser. Plus besoin de se demander si cette page ou cette page devrait être un parent ou un enfant. Plus de menus et de sous-menus de navigation énormes. C'est sur une seule page. Que vous décidiez d'inclure des liens de navigation ou simplement que les utilisateurs fassent défiler, c'est à vous et si vous pensez que cela ajoutera ou non à l'expérience utilisateur. Ce n'est tout simplement pas une option lorsqu'un site a plusieurs pages.
Bande passante réduite
Bien qu'il ne s'agisse plus d'un problème à la fin de l'hébergement, considérez le nombre d'utilisateurs accédant à votre site à l'aide d'appareils mobiles de nos jours. La réduction de la bande passante de votre site est appréciée par les utilisateurs disposant de plans de données limités.
Éliminer les sites mobiles
La conception adaptative n'est bien sûr pas limitée aux sites à une seule page. Mais plus un site est complexe, plus il est difficile de le faire fonctionner sur un écran plus petit, même avec un design réactif. Un site d'une seule page n'est, par nécessité, pas complexe. Rendre le design réactif est généralement plus facile. Une navigation simplifiée et des modifications similaires facilitent également la conception sur de petits écrans.
Pour parallaxer ou non à la parallaxe?
Selon votre point de vue, le défilement de la parallaxe est soit la meilleure chose à faire sur Internet, soit un fléau surutilisé et astucieux sur nos navigateurs. Mais peu importe où vous en êtes, cela ne semble pas disparaître de sitôt.
Personnellement, j'ai l'impression qu'il y a un temps et une place pour le défilement de parallaxe. Certains sites d'une page peuvent vraiment bénéficier de cet effet, tandis que d'autres apparaissent comme des gadgets, ou pire: difficiles à utiliser. La clé est de décider si l'effet de défilement de parallaxe que vous souhaitez utiliser améliorera réellement la convivialité du site, ou si vous ne souhaitez l'utiliser que parce qu'il aura l'air cool.
Une autre chose à prendre en compte si vous décidez d'utiliser le défilement parallaxe est d'utiliser ou non une technique CSS simple. Voir la section des ressources pour plus d'informations sur les deux options.
Quand utiliser un site d'une seule page et quand ne pas le
Bien que les sites à page unique présentent de nombreux avantages, ils ne constituent pas une solution parfaite et unique. Il y a beaucoup de fois où vous ne devriez pas utiliser un modèle de page unique, alors qu'il y a beaucoup d'autres moments où un site d'une seule page est beaucoup plus logique qu'un site de plusieurs pages.
Si vous configurez un site qui ne contiendrait que quelques pages, un seul site pourrait être parfait. Tout condenser sur une seule page peut donner à l'ensemble du site un aspect plus moderne, et si le contenu est clair, un site unique peut donner l'impression qu'il a plus de substance.
Le site Web de pré-lancement est un autre exemple courant du site d'une page. Ce sont, le plus souvent, une seule page, souvent avec un formulaire d'inscription à la newsletter. Dans la plupart des cas, les informations fournies au public pendant le pré-lancement peuvent facilement être organisées sur une seule page. Il est donc judicieux de considérer ce style en premier lieu lors de la conception de ces pages.
Les sites de commerce électronique à un seul produit sont un autre endroit où les sites à page unique peuvent être formidables. Si vous ne vendez qu’un seul produit, qu’il s’agisse d’un produit physique ou d’un produit numérique, alors pourquoi se préoccuper de plusieurs pages? Un site simple, à page unique, peut être un meilleur outil de vente.
Vous pensez peut-être qu'un site de commerce électronique plus complexe ne convient pas à un site d'une seule page, mais cela peut toujours être le cas. Certes, je l’éviterais pour les sites qui ont plus d’une douzaine de produits, mais une simple boutique en ligne peut facilement être conservée sur une seule page, avec des fenêtres modales pour charger les détails du produit et le processus de paiement.
Le fait de ne pas utiliser un site d'une seule page est assez simple: les sites volumineux, complexes ou nécessitant par défaut de grandes quantités d'informations ne sont pas adaptés à un seul site. Dans ces cas, vous êtes beaucoup mieux avec une structure de site plus traditionnelle.
Sites hybrides
Bien qu'il existe une tonne de sites uniques sur une seule page, il existe également de nombreux sites de type hybride. Ils donnent l'impression d'une seule page, mais en utilisant ajax, les fenêtres modales, etc., ils contiennent en réalité plusieurs pages de contenu.
Le site Dang & Blast en est un excellent exemple.
Celles-ci peuvent être une excellente solution si vous ne parvenez pas à tout faire rentrer dans une seule page.
Certains sites en quelque sorte "triche" en ce qui concerne la page unique. Ils ont une seule page pour leur site principal, mais ont ensuite un blog sur un autre domaine (parfois un site hébergé sur Tumblr ou WordPress.com). Il n'y a rien de mal à cela, et cela peut être un moyen de garder votre message sur votre site principal, sans renoncer aux avantages d'avoir un blog.
Meilleures pratiques pour les sites à une seule page
La plupart des principes de bonne conception sont encore applicables dans les sites à page unique, comme ils le sont avec toute bonne conception de site Web. Mais il y a d'autres choses à garder à l'esprit, dont certaines ont déjà été abordées ci-dessus.
Rester simple
Essayer de créer un design trop complexe pour le contenu que vous essayez de présenter ne vous rend pas service, à vous ou à vos utilisateurs. Au lieu de cela, simplifiez autant votre conception que votre contenu, tout en présentant ce dont vous avez besoin.
Les liens de navigation sont toujours utiles
Ce n'est pas parce que les utilisateurs peuvent faire défiler pour naviguer sur votre site Web que c'est la manière la plus conviviale de le faire. Cela est particulièrement vrai si vous avez une longue page avec de nombreuses sections. À moins d'une très bonne raison de ne pas les inclure, l'ajout de liens de navigation à des sections spécifiques rend votre site plus convivial.
Divisez votre contenu
Une seule page ne signifie pas que tout doit être une longue section. En fait, ça ne devrait pas être. Divisez votre contenu en sections et sections logiques afin que les utilisateurs puissent mieux trouver ce qu'ils recherchent.
Faire quelque chose avec tout ce fond
Les sites à une seule page ont tendance à avoir de grands arrière-plans. Certes, parfois ces milieux sont laissés en clair ou avec un motif répétitif; mais d'autres sites d'une page profitent de tout cet espace pour faire quelque chose de créatif. Cela peut également aider à diviser votre contenu, comme déjà mentionné. Votre arrière-plan ne doit pas nécessairement être une image unique. Cela peut être une série d'images, si cela correspond mieux à votre contenu.
Ressources pour vos sites d'une seule page
Il existe des centaines de ressources, y compris des modèles, pour les sites d'une seule page. mais ici nous allons nous concentrer sur ceux qui se démarquent.
Pure CSS Parallax Scrolling : Cet article de Keith Clark explique comment créer une technique de défilement de parallaxe en utilisant uniquement CSS. C'est une excellente option si vous ne souhaitez pas utiliser JavaScript (ou si vous ne savez pas vraiment comment).
Skrollr : "Défilement parallaxe pour le reste d'entre nous". C'est une bibliothèque autonome qui fonctionne avec le mobile et le bureau. Il n'y a pas besoin de jQuery, juste du vieux JavaScript.
Stellar.js : Stellar.js est une autre bibliothèque de défilement de parallaxe facile à utiliser. Il offre beaucoup d'options de configuration et de support iOS.
Une page Web Cet ensemble de wireframes pour les conceptions à une page peut être un excellent point de départ si vous ne savez pas comment structurer votre site. Ils sont gratuits à télécharger. Il y a un deuxième jeu que vous pouvez télécharger ici .
Une page d'amour : One Page Love est la première galerie de sites Web d'une page, avec plus de 5 000 sites Web, et en ajoute toujours plus. Ils comportent également des tonnes de modèles et d’autres ressources.
Démarrer le bootstrap : Start Bootstrap propose une large sélection de thèmes Bootstrap gratuits d'une page. Il existe des thèmes pour les agences, les pigistes, les portefeuilles, les pages de destination, etc.
Une page modèles d'amour : Outre leur vaste galerie, One Page Love propose également des modèles gratuits et premium.
Une page mania : One Page Mania propose une galerie de sites et de modèles uniques que vous pouvez télécharger ou acheter.
Conclusion
Les conceptions de pages uniques peuvent être une excellente option pour de nombreux types de sites Web. Bien qu'ils ne soient pas la solution idéale pour la conception de petits sites, ils méritent d'être pris en compte dans de nombreux projets. Examinez les raisons de l’utilisation d’une seule page, puis considérez les raisons de ne pas l’utiliser et décidez de la suite.