Site one-page : la nouvelle tendance web design

Site one-page : la nouvelle tendance du web design

Qu'elles soient techniques ou graphiques, le web n’échappe pas aux modes éphémères par opposition aux tendances plus profondes. Ces variations ont toujours été insufflées par les personnes les plus innovantes qui sont capable d'apporter de nouvelles idées et de nouvelles directions par leur créativité. Cela impacte directement le travail quotidien des développeurs, des web designers et des intégrateurs.

Si la création web en 2012 a été marquée par une tendance, c’est bien celle du Responsive Design. Pour sa part, l'année 2013 a confirmé le retour en grâce des sites one-page. C'est même la coqueluche du moment ! Voyons cela plus en détail.

Qu’est-ce qu’un site one-page ?

Un site one-page (aussi appelé microsite) regroupe l'ensemble des informations du site sur une seule et même page web. Ce type de conception permet de combiner plusieurs avantages :

  • le design,
  • l’ergonomie,
  • l'effet marketing,
  • le coût de revient.

En effet, un site one-page se doit d'être facilement accessible et compréhensible par les internautes. Généralement doté d'un graphisme simple, épurée mais efficace, cette tendance esthétique s'inscrit dans une volonté d'aller à l’essentiel. La simplification du discours dans le but d’aérer le contenu, la facilité de la perception du message pour être plus percutant sont les principales lignes directrices que l'on peut en dégager.

Concrètement, on retrouve un page composée dans le sens de la hauteur et divisée en différentes sections. Cette structuration permet d'avoir plusieurs parties avec pour chacune, des objectifs différents : informer, convaincre, séduire, pousser à l'action (contact). D'un point de vue marketing, on comprend tout de suite la logique de navigation que cela peut engendrer. Cela donne un haut de la page plutôt informel, un corps de page dédié au discours plus "commercial" et on attribuera au footer, la partie dédié au contact, à la fidélisation et aux réseaux sociaux.

Un site one-page ne signifie par pour autant un site dénué de fonctions ou d'attraits, bien au contraire. On remarque d'ailleurs une hausse de propositions de navigation au design interactif pour l'internaute. Outre l'indispensable Responsive Design, on pense également à l'utilisation de l'effet parallaxe qui donne au visiteur, un effet de relief ou de mouvement au fur et à mesure qu'il utilise le scroll vertical. Si ce type d'effet est de nature à valoriser un produit sur la page et à marquer le visiteur, attention à ne pas en abuser. Une page trop longue peut finir par décourager et lasser les visiteurs.

A titre d'exemple, voici quelques exemples de sites one-page que j'ai eu la chance de réaliser pour mes clients.

Ce type de site met donc clairement l'accent sur l'expérience utilisateur tout en cadrant parfaitement son champ marketing. Voilà qui rentre en résonance avec l'adage talk less, say more qui prend tout son sens ici.

Et pour le référencement ?

Malheureusement, le référencement se trouve pénalisé dans cette configuration. En effet, il n'y a qu'une seule page à indexer, une seule balise <title>, une seule meta description, etc. Dans ces conditions, l'arborescence en silo qui consiste en plusieurs pages optimisées sur une pluralité de mots-clefs se révèle être impossible à tenir. Rassurez-vous, il est possible de contourner cette difficulté en mettant en place des solutions qui vont palier à ces défauts "de naissance". Tâchons d'être créatif !

La première chose à faire est d'associer une URL unique à chaque section de la page. On veillera à ce que l'URL soit complète afin de minimiser les risques d'erreur de navigation. Ensuite, il faut placer toute la partie "navigation" dans le <head> de la page en y insérant des balises <link rel=" ">. En effet, ces balises seraient ignorées par Google dans le <body> car ce pourrait être du contenu généré par un utilisateur et non par le webmaster.

Enfin, je préconise l'utilisation des ancres HTML pour faire des liens internes entres les différentes sections, exactement de la même manière que vous travailleriez votre maillage interne sur un site web classique. Et je vous rassure, ces liens seront effectivement pris en compte par les moteurs de recherche.

Heureusement, vous avez à votre disposition d’autres leviers moins techniques qui peuvent vous aider à bien positionner un site one-page sur les moteurs de recherche.

  • Les balises sémantiques: utilisez impérativement une seule balise < h1 > pour toute la page, des balises < h2 > pour chaque titre de section et des balises < h3 > à l’intérieur de chaque section. L’idée ici est de mettre en avant les mots clés qui ne peuvent pas être placés dans la balise < title >.
  • La vitesse de chargement : mesurez la vitesse de chargement de votre site one-page et réduisez-la au maximum si besoin. Pour cela, je vous conseille de le tester avec l'excellent outil gratuit Pingdom Tools.
  • Les réseaux sociaux : encore et toujours, les incontournables réseaux sociaux. Aujourd'hui, pour être crédible aux yeux de vos clients et de Google, il est important de disposer d'une présence sociale active et de qualité. Qui plus est, ces liens entrants provenant des réseaux sociaux permettront de créer un trafic qualifié à destination de votre site one-page. Indirectement, cela améliorera le Pagerank, et donc l’autorité de vos pages.
  • Le blog : dans le cas d’une stratégie de contenu marketing, le blog est encore et toujours l’outil idéal pour disposer de pages dédiées et pour créer du contenu de qualité dans le but de vous positionner sur vos mots clés. Cela permet également de drainer du trafic qualifié vers votre site one-page et vers vos réseaux sociaux. Sur votre blog, vous pourrez externaliser vos promotions, vos sondages, vos PDF, vos vidéos, etc.
  • Créer des pages supplémentaires : pour mettre toutes les chances de son côté avec un site one-page, il est possible et préférable de créer quelques pages satellites en plus, pages accessibles depuis les menus, onglets ou sections pour traiter de sujets connexes. De plus, l'apport de liens entrants améliorera l'équilibre des liens de retour pour Google et cela est plutôt bon pour le ranking. Si vous créez d'autres pages, n’oubliez surtout pas de créer ou de mettre à jour les fichiers sitemap.xml et robot.txt afin que l’ensemble de ces pages soient correctement indexées.

Exemples de réalisations

Site one-page réalisé par web-eau.net

Association CaniRandos Finistère Nord - Landerneau

Site one-page réalisé par web-eau.net

UIMM Bretagne - Rennes

Site one-page réalisé par web-eau.net

Butterfly XR Studio - Paris

Site one-page réalisé par web-eau.net

Coach Yvonne - Gorre Beuzit

Conclusion

Nous l'avons vu, un site one-page représente un intérêt indéniable d’un point de vue graphique, marketing mais également d'un point de vue commercial. Cependant, cela implique certaines contraintes qu’il faut anticiper et intégrer en amont du projet : la mise en oeuvre de l'aspect Responsive Design doit être parfaite et l’optimalisation pour le référencement naturel peut être perfectible. Malgré cela, les sites one-page ont un très bel avenir devant eux car cette tendance correspond très bien aux attentes des internautes.

Pour ma part, je conseille d'utiliser cette tendance à bon escient, c'est à dire lorsqu'elle résulte d’une stratégie de fond et pas uniquement pour céder à un effet de mode. C'est donc plus une réflexion qu'il faut avoir et non un réflexe. Cela implique encore une fois d'avoir un échange constructif avec votre webmaster qui sera à même de vous conseiller et vous guider vers le meilleur choix pour vous. Je vous laisse découvrir l'offre one-page" de web-eau.net et qui répond déjà aux points évoqués plus haut.

Qu'elles soient techniques ou graphiques, le web n’échappe pas aux modes éphémères par opposition aux tendances plus profondes. Ces variations ont toujours été insufflées par les personnes les plus innovantes qui sont capable d'apporter de nouvelles idées et de nouvelles directions par leur créativité. Cela impacte directement le travail quotidien des développeurs, des web designers et des intégrateurs.

Si la création web en 2012 a été marquée par une tendance, c’est bien celle du Responsive Design. Pour sa part, l'année 2013 a confirmé le retour en grâce des sites one-page. C'est même la coqueluche du moment ! Voyons cela plus en détail.

Qu’est-ce qu’un site one-page ?

Un site one-page (aussi appelé microsite) regroupe l'ensemble des informations du site sur une seule et même page web. Ce type de conception permet de combiner plusieurs avantages :

  • le design,
  • l’ergonomie,
  • l'effet marketing,
  • le coût de revient.

En effet, un site one-page se doit d'être facilement accessible et compréhensible par les internautes. Généralement doté d'un graphisme simple, épurée mais efficace, cette tendance esthétique s'inscrit dans une volonté d'aller à l’essentiel. La simplification du discours dans le but d’aérer le contenu, la facilité de la perception du message pour être plus percutant sont les principales lignes directrices que l'on peut en dégager.

Concrètement, on retrouve un page composée dans le sens de la hauteur et divisée en différentes sections. Cette structuration permet d'avoir plusieurs parties avec pour chacune, des objectifs différents : informer, convaincre, séduire, pousser à l'action (contact). D'un point de vue marketing, on comprend tout de suite la logique de navigation que cela peut engendrer. Cela donne un haut de la page plutôt informel, un corps de page dédié au discours plus "commercial" et on attribuera au footer, la partie dédié au contact, à la fidélisation et aux réseaux sociaux.

Un site one-page ne signifie par pour autant un site dénué de fonctions ou d'attraits, bien au contraire. On remarque d'ailleurs une hausse de propositions de navigation au design interactif pour l'internaute. Outre l'indispensable Responsive Design, on pense également à l'utilisation de l'effet parallaxe qui donne au visiteur, un effet de relief ou de mouvement au fur et à mesure qu'il utilise le scroll vertical. Si ce type d'effet est de nature à valoriser un produit sur la page et à marquer le visiteur, attention à ne pas en abuser. Une page trop longue peut finir par décourager et lasser les visiteurs.

A titre d'exemple, voici quelques exemples de sites one-page que j'ai eu la chance de réaliser pour mes clients.

Ce type de site met donc clairement l'accent sur l'expérience utilisateur tout en cadrant parfaitement son champ marketing. Voilà qui rentre en résonance avec l'adage talk less, say more qui prend tout son sens ici.

Et pour le référencement ?

Malheureusement, le référencement se trouve pénalisé dans cette configuration. En effet, il n'y a qu'une seule page à indexer, une seule balise <title>, une seule meta description, etc. Dans ces conditions, l'arborescence en silo qui consiste en plusieurs pages optimisées sur une pluralité de mots-clefs se révèle être impossible à tenir. Rassurez-vous, il est possible de contourner cette difficulté en mettant en place des solutions qui vont palier à ces défauts "de naissance". Tâchons d'être créatif !

La première chose à faire est d'associer une URL unique à chaque section de la page. On veillera à ce que l'URL soit complète afin de minimiser les risques d'erreur de navigation. Ensuite, il faut placer toute la partie "navigation" dans le <head> de la page en y insérant des balises <link rel=" ">. En effet, ces balises seraient ignorées par Google dans le <body> car ce pourrait être du contenu généré par un utilisateur et non par le webmaster.

Enfin, je préconise l'utilisation des ancres HTML pour faire des liens internes entres les différentes sections, exactement de la même manière que vous travailleriez votre maillage interne sur un site web classique. Et je vous rassure, ces liens seront effectivement pris en compte par les moteurs de recherche.

Heureusement, vous avez à votre disposition d’autres leviers moins techniques qui peuvent vous aider à bien positionner un site one-page sur les moteurs de recherche.

  • Les balises sémantiques: utilisez impérativement une seule balise < h1 > pour toute la page, des balises < h2 > pour chaque titre de section et des balises < h3 > à l’intérieur de chaque section. L’idée ici est de mettre en avant les mots clés qui ne peuvent pas être placés dans la balise < title >.
  • La vitesse de chargement : mesurez la vitesse de chargement de votre site one-page et réduisez-la au maximum si besoin. Pour cela, je vous conseille de le tester avec l'excellent outil gratuit Pingdom Tools.
  • Les réseaux sociaux : encore et toujours, les incontournables réseaux sociaux. Aujourd'hui, pour être crédible aux yeux de vos clients et de Google, il est important de disposer d'une présence sociale active et de qualité. Qui plus est, ces liens entrants provenant des réseaux sociaux permettront de créer un trafic qualifié à destination de votre site one-page. Indirectement, cela améliorera le Pagerank, et donc l’autorité de vos pages.
  • Le blog : dans le cas d’une stratégie de contenu marketing, le blog est encore et toujours l’outil idéal pour disposer de pages dédiées et pour créer du contenu de qualité dans le but de vous positionner sur vos mots clés. Cela permet également de drainer du trafic qualifié vers votre site one-page et vers vos réseaux sociaux. Sur votre blog, vous pourrez externaliser vos promotions, vos sondages, vos PDF, vos vidéos, etc.
  • Créer des pages supplémentaires : pour mettre toutes les chances de son côté avec un site one-page, il est possible et préférable de créer quelques pages satellites en plus, pages accessibles depuis les menus, onglets ou sections pour traiter de sujets connexes. De plus, l'apport de liens entrants améliorera l'équilibre des liens de retour pour Google et cela est plutôt bon pour le ranking. Si vous créez d'autres pages, n’oubliez surtout pas de créer ou de mettre à jour les fichiers sitemap.xml et robot.txt afin que l’ensemble de ces pages soient correctement indexées.

Exemples de réalisations

Site one-page réalisé par web-eau.net

Association CaniRandos Finistère Nord - Landerneau

Site one-page réalisé par web-eau.net

UIMM Bretagne - Rennes

Site one-page réalisé par web-eau.net

Butterfly XR Studio - Paris

Site one-page réalisé par web-eau.net

Coach Yvonne - Gorre Beuzit

Conclusion

Nous l'avons vu, un site one-page représente un intérêt indéniable d’un point de vue graphique, marketing mais également d'un point de vue commercial. Cependant, cela implique certaines contraintes qu’il faut anticiper et intégrer en amont du projet : la mise en oeuvre de l'aspect Responsive Design doit être parfaite et l’optimalisation pour le référencement naturel peut être perfectible. Malgré cela, les sites one-page ont un très bel avenir devant eux car cette tendance correspond très bien aux attentes des internautes.

Pour ma part, je conseille d'utiliser cette tendance à bon escient, c'est à dire lorsqu'elle résulte d’une stratégie de fond et pas uniquement pour céder à un effet de mode. C'est donc plus une réflexion qu'il faut avoir et non un réflexe. Cela implique encore une fois d'avoir un échange constructif avec votre webmaster qui sera à même de vous conseiller et vous guider vers le meilleur choix pour vous. Je vous laisse découvrir l'offre one-page" de web-eau.net et qui répond déjà aux points évoqués plus haut.

Daniel Dubois - auteur à web-eau.net

A propos de Daniel

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort de son expérience, il partage ses connaissances dans un état d'esprit open source. Très impliqué en faveur du CMS Joomla depuis 2014, il est également conférencier et fondateur du Joomla User Group Breizh.

web-eau.net

29800 Landerneau

06 74 50 27 99

daniel@web-eau.net