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, d’autres sont faites pour durer. Ce qui fonctionne particulièrement bien 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 choisissent cette technique pour créer un site internet. 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. Allez, on vous explique comment créer un site one-page qui a tout pour plaire à vos internautes.
Qu'est-ce qu'un site one-page : définition
Mais au fait, un site one-page, c'est quoi ? Comme son nom l’indique, un site one-page est un site constitué d’une seule page. Au lieu d'avoir différentes pages et sections, le site one-page n'a qu'une seule page. 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.
La plupart du temps, les sites one-page sont utilisés pour créer une landing page ou un site vitrine.
Comment créer un site one-page en 11 étapes
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 simple à 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 différents formats de 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 sur votre site, comme par exemple un catalogue de produits ou de 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 pour votre site
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. 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 vos priorités : cela peut être votre offre, des témoignages, des photos, une présentation de votre équipe ou un bouton d’appel à l’action.
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 de site web 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 templates, entièrement personnalisables et adaptés à tous les types d’activités. Vous pouvez donc modifier tous les éléments pour rendre votre site unique et en accord avec l’image de votre entreprise. Vous pouvez également vous inspirer de ces exemples de landing page, ou de ces exemples de templates de site web.
04. Divisez votre contenu en parties succinctes
La première étape lors de la création de la structure de votre site Web consiste à disposer stratégiquement tout votre contenu afin qu'il raconte une histoire logique et intuitive aux visiteurs. Commencez à hiérarchiser votre site en imaginant le parcours de vos visiteurs. Placez vos messages principaux au-dessus de la ligne de flottaison pour les attirer avant qu'ils ne fassent défiler votre page, puis placez chaque élément de contenu supplémentaire par ordre de priorité.
Chaque site internet a besoin d'une section « À propos » et d'une zone d'informations de contact dédiée. Ensuite, vous pouvez inclure votre offre, une présentation de l'équipe, des services et produits, des témoignages, une section FAQ ou encore une galerie de photos.
05. Dynamisez votre site avec des effets
De nombreux sites peuvent sembler légèrement unidimensionnels, mais notez que les meilleurs sites one page ajoutent des effets comme le défilement parallaxe pour attirer l'attention des utilisateurs et stimuler leur engagement. Cet effet de défilement crée une illusion 3D, avec des bandes en arrière-plan et au premier plan se déplaçant à des rythmes différents lorsque l'utilisateur fait défiler votre site.
06. Créez un menu ancre
Vous êtes maintenant habitué à utiliser un menu de navigation 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 dans 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.
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 sans le refaire défiler dans l’autre sens.
07. 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. Il s'agit d'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.
08. 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.
09. Ajoutez un lien vers vos réseaux sociaux
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 vers vos chaînes. Là aussi, vous pouvez la fixer sur votre page afin qu’elle reste toujours visible.
Ajouter un flux Instagram : Vous pouvez mettre votre page Instagram encore plus avant en affichant un 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.
10. Appliquez les bonnes pratiques SEO
Le référencement 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 haut des 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.
11. Adaptez votre site aux mobiles
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. 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 des 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.
Lire aussi : Le web design sur mobile : 15 exemples à suivre
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 reviendrons dans la suite de cet article.
D’un autre côté, il existe quelques points négatifs. 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 au risque de perdre vos visiteurs.
6 raisons pour lesquelles vous pourriez utiliser un site one-page :
Vous avez un contenu court, comme une landing page, un CV, un portfolio de photographies, un site de mariage ou tout autre site lié à un événement.
Vous avez un objectif clair que vous souhaitez que vos utilisateurs atteignent.
Vous disposez de peu de temps et de ressources et avez besoin de créer un site Web rapidement.
Vous voulez que votre site soit compatible avec une large gamme d'appareils.
Vous pouvez adapter tout votre contenu sur une seule page linéaire.
Vous voulez une page qui se charge plus rapidement et une meilleure web performance.
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 des exemples de sites one-page réalisés avec Wix pour vous inspirer avant de créer votre propre site one page.
