Comment créer un site one-page ? [+ Exemples]


* Cet article a été rédigé en août 2018, puis mis à jour le 12 août 2019. Nous nous efforçons de vous apporter un contenu d'actualité et de qualité pour que vous ne ratiez aucune tendance du Web.


Les tendances. Voilà sur quoi tout le monde se base pour savoir ce qu’il faut faire ou pas. Elles existent dans tous les domaines, de la danse au web design. Certaines modes passent (on se demande ce qui nous a pris de prendre des cours de tectonik à 15 ans…), d’autres sont destinées à durer. Savez-vous ce qui cartonne sur la planète Web en ce moment ? Ce sont les sites one-page. Autrement dit, des sites qui affichent l’intégralité du contenu sur une page unique à faire défiler.

De plus en plus de web designers créent les sites internet de cette façon. Pourquoi ? Eh bien parce que c’est simple, clair, fonctionnel et cela permet une navigation agréable. Tout cela sans parler des possibilités infinies de design. Prêt pour rejoindre une tendance que vous ne regretterez pas dans 10 ans ? On vous révèle comment créer un site one-page qui a tout pour faire fureur sur le Net.



Définition : qu’est-ce qu’un site one-page


Comme son nom l’indique, un site one-page est un site constitué d’une seule page. Ce qui veut dire que vous pouvez accéder à l’ensemble du contenu sans avoir à effectuer de clic. Les différentes parties (Contact, FAQ, À propos, etc.) se succèdent les unes à la suite des autres. Pour y accéder, vous pouvez faire scroller la page et/ou insérer un menu ancré.



Les avantages et les inconvénients d’un site one-page


Comme pour tout, créer un site one-page représente des avantages et des inconvénients. Faites votre choix en connaissance de cause et prenez tous les aspects en considération avant de vous lancer.


Commençons par les points positifs. Les sites one-page permettent d’être créatif et de vous lâcher au niveau du design : vous pouvez ajouter des transitions, des animations ou encore des effets parallaxe. Ils sont généralement très attrayants pour les visiteurs. Premièrement parce qu’ils sont faciles de navigation. Mais aussi, car ils ont tendance à contenir plus d’images que de texte. Enfin, le one-page est le format idéal pour raconter une histoire. En maîtrisant l’ordre dans lequel s’affiche votre contenu, vous pouvez suivre un storytelling - nous y revenons dans la suite de cet article.


D’un autre côté, il y a très peu de clics sur un site one-page. L’engagement avec vos visiteurs se limite à faire défiler la page. Ce qui veut dire que vous allez devoir faire un effort supplémentaire pour garder leur attention. Limitez votre contenu et trouvez un moyen de les inciter à scroller. Pour cela, nous vous suggérons d’avoir 4 ou 5 sections maximum. Un dernier inconvénient du site one-page est sa vitesse de chargement. Faites attention à la répartition de vos éléments pour ne pas trop alourdir votre page et faire attendre les internautes pendant des plombes.



12 étapes pour créer votre site one-page


  1. Définissez vos besoins

  2. Élaborez un plan pour votre site

  3. Choisissez un Template

  4. Divisez votre contenu en bandes

  5. Dynamisez votre site avec des effets

  6. Créez un menu ancre

  7. Facilitez la navigation sur votre page

  8. Ajoutez des CTA

  9. Remplissez votre pied de page

  10. Liez vos chaînes de réseaux sociaux

  11. N’oubliez pas le référencement

  12. Créez une version mobile de votre site


01. Définissez vos besoins

En web design, il y a deux écoles : le site classique et le one-page. En fonction de votre entreprise et de vos objectifs, vous allez choisir celui qui vous convient le mieux. Ils ont chacun leurs avantages. Prenez votre décision en fonction des priorités que vous vous êtes fixées.

Le site one-page a un design à la fois minimaliste et très ordonné. Il est principalement composé d’images accompagnées de texte ici et là. Avoir tout votre contenu sur une seule page vous permet de raconter l’histoire à votre façon. Vous pouvez choisir l’ordre dans lequel apparaissent les informations et ainsi avoir un contrôle total sur l’expérience des visiteurs. De plus, avec un site one-page, les internautes savent où aller. Explorer un site de façon linéaire est toujours plus facile que de se perdre à travers les différentes pages. Ce format convient également aux mobiles. Enfin, il est facile à créer et à mettre à jour. Avant de vous lancer les yeux fermés, demandez-vous « est-ce la bonne option pour mon entreprise ? ». Quelle que soit votre activité, si vous avez peu de contenu écrit, vous pourrez faire quelque chose de très beau. Pour les sites de photographie, les indépendants, les landing pages, les sites vitrines, les sites de mariage ou d’événement en général, ce format conviendra parfaitement.

Le site classique est celui que vous consultez la plupart du temps. C’est-à-dire une page d’accueil avec des liens redirigeant vers d’autres pages web (votre FAQ, page contact, etc.). La raison principale de choisir cette option est si vous avez beaucoup de contenus à inclure absolument sur votre site – comme par exemple un catalogue de produits/ services avec plusieurs catégories. Ainsi, vous pouvez créer une organisation plus complexe et inclure plus de détails. Optez pour ce format si vous avez un blog par exemple. Il sera plus facile pour vos visiteurs d’accéder à chacun de vos articles individuellement.


02. Élaborez un plan

Si vous avez choisi le format one-page, commencez par définir un plan d’action. L’ordre dans lequel vous allez présenter vos éléments compte beaucoup. Vous voulez faire en sorte que cela soit logique et intuitif. Donc posez d’abord tout votre contenu, puis assemblez les éléments au fur et à mesure. Faites-le de façon hiérarchique.

Par quoi voulez-vous que les internautes commencent leur visite ? Ils doivent d’abord capter votre message principal. De quoi voulez-vous qu’ils se souviennent ? Placez cela au-dessus de la ligne de flottaison (c’est-à-dire ce qui apparaît sur l’écran sans avoir à faire défiler la page). À la fin de votre site, ajoutez vos informations de contact, c’est là que vos visiteurs iront les chercher. Tout ce qui se trouve entre les deux varie en fonction de votre business. Cela peut être votre offre, des témoignages, des photos, une présentation de votre équipe ou un bouton d’appel à l’action. Placez-les stratégiquement en fonction de vos priorités. Enfin, laissez de côté toutes les informations superflues – moins vous en faites, mieux ce sera. Le tout doit être



03. Choisissez un Template

Une fois que vous savez ce que vous voulez mettre sur votre site one-page, il est temps de penser au design. Vous avez besoin d’un Template qui contient tous les éléments nécessaires : un menu ancre, une mise en page en bandes et colonnes, une barre de réseaux sociaux ou encore un pied de page bien fourni. Vous trouverez chez Wix des centaines de modèles adaptés à tous les types d’activités. Ce qui est bien est que chaque Template est 100 % personnalisable. Vous pouvez modifier tous les éléments pour rendre votre site unique et en accord avec l’image de votre entreprise.


04. Divisez votre contenu en bandes

La meilleure façon d’organiser votre contenu est d’utiliser une mise en page en bandes. Voici comment faire :


  • Ouvrez l’Éditeur de Wix.

  • Cliquez sur « Ajouter ».

  • Sélectionnez « Bande ».

Vous trouverez alors des options prédéfinies à modifier comme bon vous semble. Sur chaque bande vous pouvez ajouter du texte, des images, des vidéos, des formulaires et encore beaucoup d’autres choses. Il n’y a pas de limitation, vous pouvez en mettre autant que vous le souhaitez. N’oubliez pas de les agencer de façon logique et stratégique.


05. Dynamisez votre site avec des effets Parallax

Lorsque vous combinez deux tendances ensemble, c’est le jackpot. Donc inutile de vous dire que le site one-page et les effets Parallax font très bon ménage. L’effet Parallax est cette impression de 3D qui se fait sur votre site lorsqu’un utilisateur fait défiler votre page. Il s’obtient grâce à l’ajout des fameuses bandes qui défilent à des vitesses différentes. Si vous pensez qu’un site one-page est trop simple, voilà de quoi lui redonner du peps et capter à coup sûr l’attention des internautes.


06. Créez un menu ancre

Vous êtes maintenant habitué à utiliser des menus sur les sites internet. Mais celui-ci est différent. Il ne renvoie pas à d’autres pages de votre site, mais à d’autres sections de la même page. La première chose à faire est donc de les délimiter clairement avec des ancres.Il y a trois étapes importantes pour créer un menu ancre et organiser correctement votre page :


  • Ajoutez une ancre : elle permet à vos visiteurs de naviguer facilement en pouvant se rendre directement sur une section de votre page. Beaucoup de nos Templates ont des ancres intégrées, mais il ne tient qu’à vous de les renommer, modifier ou supprimer en fonction de vos besoins.

  • Reliez ces ancres à votre menu : c’est grâce à cela que vous pourrez aller sur les sections de votre site à partir de votre menu. Le nom que vous donnez à vos ancres est celui qui va apparaître dans votre menu, faites donc en sorte qu’il soit le plus clair possible.

  • Ordonnez votre menu : L’ordre des sections telles qu’elles apparaissent sur votre menu doit correspondre à la façon dont vos parties se succèdent sur votre site. Par exemple, si votre première partie est « À propos », elle s’affichera à la fois au tout début de votre site et en haut de votre menu.

Puisque généralement les sites one-page sont aussi long scrolling, votre menu doit rester visible tout le temps. Pour cela, vous pouvez créer un menu flottant ou opter pour l’option « Fixer position » pour qu’il reste visible en haut de votre page si votre menu fait partie de l’entête.


07. Facilitez la navigation sur votre page

Le plus grand danger du site one-page (et vous verrez que ce n’est pas si traumatisant) est que le visiteur peut se lasser de faire défiler votre page de haut en bas. Bien heureusement, à tout problème sa solution. Pour faciliter la vie des internautes et leur offrir la meilleure expérience possible, ajoutez un bouton « retour en haut de page ». Ils pourront alors retourner au début de votre site en un clic.


08. Ajoutez des CTA

Puisque tout votre contenu se trouve sur une seule et unique page, vous avez besoin d’un élément puissant pour amener vos visiteurs à réaliser une action : s’inscrire à votre newsletter ou réserver un service par exemple. C’est là que le bouton d’appel à l’action (ou CTA) entre en jeu. C’est une courte phrase (2 ou 3 mots) qui incite vos visiteurs à passer à l’acte. Ce bouton doit être placé au-dessus de la ligne de flottaison pour une meilleure visibilité. En cliquant dessus, vos visiteurs seront à nouveau envoyés vers la section appropriée. Par exemple, si le bouton est « Contactez-nous », en cliquant dessus, ils iront sur la partie « Contact ». Pour faire cela, vous devez créer une ancre au niveau de votre bouton, comme vous l’avez fait avec votre menu. Commencez par créer votre CTA, puis connectez-le tout simplement à votre ancre.


09. Remplissez votre pied de page

Le pied de page est, comme son nom l’indique, la partie qui se trouve tout à la fin de votre site. C’est généralement là que les gens se rendent pour trouver des informations importantes, telles que comment vous contacter ou vos horaires d’ouverture. Voilà pourquoi vous ne devez pas négliger cette partie. Pensez à y inclure vos chaînes de réseaux sociaux, votre politique d’utilisation et de confidentialité, votre adresse, votre email, etc. Si vous avez une boutique physique, vous pouvez aussi y mettre un plan.



10. Liez vos chaînes de réseaux sociaux

Ce n’est pas pour rien que l’on appelle internet la Toile et les plateformes sociales des réseaux. En ligne, tout est relié. Vous devez vous aussi connecter les différents éléments de votre présence en ligne. Ajoutez sur votre site votre page Facebook, votre compte Twitter et votre flux Instagram. Pourquoi ? Pour avoir le plus de trafic possible. Voici deux façons de faire :


  • Ajouter une barre de réseaux sociaux. C’est à cet endroit que se trouvent les icônes de tous vos réseaux sociaux. Wix vous donne le choix entre plusieurs options de design. Tout ce que vous avez à faire est de choisir celle qui vous convient et d’y ajouter les liens de vos chaînes. À nouveau, vous pouvez la fixer sur votre page afin qu’elle reste toujours visible.

  • Ajouter votre flux Instagram. Vous pouvez mettre votre page Instagram encore plus avant en affichant votre flux sur votre site. C’est un bon moyen de donner à vos visiteurs un contenu toujours à jour sans trop faire d’efforts. Ici aussi vous avez le choix entre plusieurs mises en page. À vous de choisir celle qui conviendra le mieux.


11. N’oubliez pas le référencement

Le référencement ou SEO est essentiel pour absolument tous les sites internet. Cela englobe l’ensemble des actions que vous pouvez faire pour permettre à votre site d’apparaître en bonne position dans les résultats des moteurs de recherche – et donc de vous apporter plus de trafic et de clients potentiels. Commencez par vous assurer que votre site est bien indexé par Google (c’est-à-dire qu’il fait partie de la base de données). Avec Wix, cela ne prend que quelques secondes. Après cela, attaquez-vous aux mots-clés.


Si vous avez un site Wix, votre travail est simplifié. Rendez-vous simplement sur le Wix SEO Wiz et suivez les instructions. Notre outil prépare pour vous un plan d’action personnalisé, de la recommandation de mots-clés à l’optimisation de vos images.


12. Créez une version mobile de votre site

Faire des recherches depuis un smartphone est devenu la norme. Voilà pourquoi Google a décidé d’utiliser les sites mobiles comme critère d’indexation principal (voir l’index Mobile-first de Google). Qu’est-ce que cela signifie concrètement pour votre site ? Tout simplement que votre version mobile doit être aussi travaillée et attrayante que celle sur ordinateur. Étant donné que la navigation et la visibilité sont tous deux facteurs importants, le site one-page vous met d’emblée dans la bonne direction. Si en plus vous avez un site Wix, votre version mobile est créée automatiquement. Vous pouvez voir le rendu en allant sur votre Éditeur et en cliquant sur « Passer au mode mobile ».

Un dernier conseil pour la route : ajoutez une barre d’action rapide sur votre version mobile pour permettre à vos visiteurs de se rendre en un clic sur les sections les plus importantes de votre site. Ainsi, vous leur permettez de trouver ce dont ils ont besoin en un clin d’œil.


Quelques bons exemples de sites one-page

Si vous vous demandez à quoi ressemble un site qui aurait suivi tous ces bons conseils, voici la réponse. Découvrez de superbes sites one-page réalisés avec Wix pour vous inspirer avant de créer le vôtre.

L’agence créative Mutiny




Lena Steinküler




Mess Studio




Tokyo Trip




Tikoun Olam




Erh Restaurant




Evian




Angélique Lorieu



Prêt à vous lancer ? Créez un superbe site one-page gratuitement avec Wix !

FR03.png