Vive les sites web à page unique !

Si je m’en tiens à la définition de Wikipedia : « Un site Web est un ensemble de pages Web hyperliées entre elles« . OK, mais qui a dit qu’un site web devait nécessairement être composé de plusieurs pages ? C’est sur cette réflexion que le blog Six Revision nous propose un article très intéressant : The Science Behind a Single Page Website.

Les arguments en faveur d’un site web à page unique sont les suivants :

  • Tout le contenu est chargé en une seule fois ;
  • Scroller est moins compliqué et risqué que de cliquer ;
  • La maintenance est plus simple ;
  • La densité d’information favorise un meilleur référencement.

Les arguments en défaveur des sites web à page unique sont les suivants :

  • Le site est plus long à charger ;
  • Le site est généralement truffé de javascript pour proposer une navigation locale (au sein de la page) ;
  • Les utilisateurs peuvent être désorientés.

Une fois ces arguments énoncés, la visite d’un certain nombre de sites à page unique a finalement réussi à me convaincre de l’efficacité de cette technique : 30 Outstanding Single Page Website Designs, 88 Single Page Website Designs For Design Inspiration, 50 Examples of Modern Single Page Website Designs et aussi One Page Love.

Au final, si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace. Prenons par exemple les sites dédiés à des applications mobiles qui peuvent se contenter d’une description, de quelques captures d’écran et d’un détail des fonctionnalités en bas de page comme Camera+ ou Goin’ Nutty :

Une seule page suffit pour vendre une application mobile

De même, il existe un certain nombre d’applications en ligne à périmètre restreint qui ne nécessitent pas un site à plusieurs pages comme Silverback (ou dans une certaine mesure Basecamp), le contenu est réduit au strict minimum et est déroulé sur la hauteur de page :

Une seule page suffit pour vendre une application en ligne

Même chose pour Coda qui propose par contre un système d’onglets intérieurs pour réduire la hauteur de la page :

Une page peut en cacher d'autres

Beaucoup plus intéressant, certains sites marchands se content également d’une seule page comme ici pour ce modèle unique de noeud papillon chez Blixt & Dunder :

Une seule page suffit pour vendre un noeud papillon

Cet exemple n’est pas le seul, car il est également possible d’en faire de même pour des produits dématérialisés comme chez Red+White.

Dernier exemple avec Grooveshark, un service d’écoute de musique en ligne :

Une seule page suffit pour écouter de la musique en ligne

Au final en cherchant un peu, vous pouvez vous rendre compte qu’un site avec une page unique bien conçue peut faire beaucoup mieux qu’un site avec plusieurs pages et du contenu éparpillé. Bien évidemment ceci ne concerne qu’une minorité de sites, mais cette solution me semble tout à fait viable à partir du moment où l’information apportée est pertinente et que les fondamentaux ergonomiques sont respectés (lisibilité, hiérarchisation de l’information…).

Je suis fan, pas vous ?

21 commentaires pour “Vive les sites web à page unique !”

  1. Posté par Rémi LC a dit : le

    Pour ton dernier exemple, le site de musique Grooveshark, c’est un peu différent je trouve étant donné que c’est du Flash. Tout comme sur Deezer, pas de rechargement de page et pourtant ce n’est pas vraiment un site à page unique…

  2. Posté par Martin Lessard a dit : le

    C’est quelque chose qui me trottait dans la tête depuis un bon moment, mais tu viens de mettre le doigt dessus. Merci pour le survol.

    Tu écris « si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace »: je la tournerais autrement. « plus votre produit/service/message est clair limpide moins vous avez besoin de mots pour le décrire ». Dans le sens que le web a induit une enflure de contenu qui découle d’une époque de « rareté » (relative) de l’information: avec l’avénement du web on pouvait (enfin) tout retrouver (facilement) au même endroit (ce qui nous a donné d’horrible interface surchargée).

    On commence finalement à comprendre que « less is more »…

  3. Posté par Jmini a dit : le

    Je suis partagé… L’énorme reproche que je fais à ce système c’est l’absence d’URL et de navigation au niveau du navigateur.

    Les onglet c’est bien, mais je veux pouvoir pointer vers tel ou tel onglet : (ça peut être avec une ancre)
    http://www.panic.com/coda/#sites
    http://www.panic.com/coda/#files

    Mais il faut que ça marche:
    * à l’ouverture pour pouvoir envoyer un permalink précis à une personne.
    * pendant la navigation (là je ne sais pas si c’est possible) mais selon moi il faudrait nourrir l’historique de navigation du navigateur (pour que cela soit compatible avec les flèches précédentes / suivantes).

    Par exemple dans GMail (le site en page unique par excellence) ça m’énerve toujours de devoir cliquer sur précédent suivant dans la page. Alors que dans le navigateur ces boutons précédent/suivant ne servent qu’à détruire l’expérience d’utilisation.

  4. Posté par GizMecano a dit : le

    Je pense aussi que c’est un peu une (nouvelle ?) tendance. J’ajouterais aux catégories mentionnées dans cet article les sites de certains free-lances qui parviennent à rassembler en une seule page un (extrait de) portefolio, un résumé des services et un formulaire de contact (comme par exemple http://www.chappybarry.com/).

  5. Posté par Frédéric CAVAZZA a dit : le

    @ Martin Lessard > Un remède à l’infobésité ? Théorie intéressante.

    @ Jmini > Oui, inclure des ancres dans les URLs serait un minimum

  6. Posté par Morgan a dit : le

    Bonjour!

    Oui l’idée de résumer un site en une seule page peut être intéressante pour l’utilisateur.

    Techniquement, si je comprends bien on supprime toute notion de chargement dynamique de contenu par contre.

    De plus j’ai du mal à saisir l’intérêt des « avantages » suivants:

    Tout le contenu est chargé en une seule fois (avantageux?)
    La maintenance est plus simple (pourquoi donc?)

    Peut être est-ce une mode, peut être est-ce adapté à des configurations bien précises?

  7. Posté par Martin Lessard a dit : le

    Fred, je crois que réellement on va en revenir de cet appétit de « tout avoir ». En sortant d’un famine, on se jette sur le buffet. Mais maintenant, à quoi sert de « posséder » quand tout est accessible. Je fais référence à une époque pas si lointaine, que tous les deux on connaît: les Cédéroms. On se créait de véritables bibliothèques de contenus (piraté ou non), que la plus part du temps on n’utilisait pas, de toute façon, juste pour pouvoir « y a voir accès ».

    Ça ne date pas d’hier: avant, c’était la K7 vidéo vierge, et avant on imprimait tout, et avant on photocopiait tout, et avant on s’abonnait aux encyclopédies en 27 volumes. Cette volonté de « posséder » est inhérent à un monde de rareté (un livre pouvait être épuisé, une revue disparaître des étagères).

    Que veux dire posséder aujourd’hui? Aucune bibliothèque constituée à la va-vite ne peut battre l’accès au web (j’exclus celle des experts en bibliothéconomie). On y accède aujourd’hui à la demande.

    Et je crois que ça aura un impact sur le contenu qu’un site offre: «J’offre que ce qui est unique à moi». Pas de surplus de poids, que ce qui est unique. Le reste Wikipedia, les forums ou google le donnera au centuple. Pas par « exclusivité » , mais par crédibilité: «je suis celui qui peut, doit, devrait dire ce que j’ai à dire». Pour le reste je ne répèterais pas ce qui est dit ailleurs ou qui est sous-entendu…

  8. Posté par papilloon a dit : le

    ON peut aussi envisager le côté référencerement d’un site de vente à une page : pas impossible mais difficile.

    Pour amener du trafic, il faudra absolument bien mener sa campagne de lancement et avoir un budget adwords conséquent

  9. Posté par jay a dit : le

    Pour les sites qui n’ont pas besoin de beaucoup de pages, le one-page est génial.
    Tout dépend du contenu mais pour du folio ou du site vitrine, c’est parfait.
    Il fait voir en fonction du temps de chargement mais c’est tellement lassant l’approche avec des menus pour mettre 4 pages que le one-page se développera certainement, surtout avec les connexions d’aujourd’hui.
    Et après tout, la mode est aux sites des années 90 en ce moment, puisque javascript et ancre nommées, suffit d’ajouter les coins arrondis et la presse appele ça du WEB 2.0…

  10. Posté par Les incontournables de la semaine du 1er Novembre 2010 | La Blogule de STONEPOWER - Agence Digitale Marseille a dit : le

    […] Vive les sites web à page unique ! […]

  11. Posté par PC a dit : le

    Tel Mr Jourdain, j’ai créer 2 sites à page unique en 2009, sans le savoir (sejour.lejardindevalentine.fr et depilation.lejardindevalentine.fr … Ceci dit, c’est la nécessité d’aller vite qui m’a poussé vers cette construction. En effet en terme de rapidité de développement, une page unique avec onglet javascript ça dépote !!!
    En terme de référencement, je trouve le résultat un peu moins bon mais tout à fait raisonnable (en comparant avec un site multi pages sur le même sujet http://www.lejardindevalentine.fr)

  12. Posté par FredCavazza.net > Mes 3 sites coup de coeur (janvier 2011) a dit : le

    […] droits… Ils ont même retiré la navigation pour coller à la tendance du moment (cf. Vive les sites web à page unique !). Bref, c’est d’une sobriété imbattable, mais j’aime bien.Pour […]

  13. Posté par hervelegerelite a dit : le

    Howdy, i read your blog often and i own an analogous one and i used to be simply wondering if you get a lot of spam comments? If thus how do you stop it, any plugin or anything you’ll be able to advise? I get thus much lately it’s driving me mad so any help is very abundant appreciated. Others truly struggle with how to handle their angry emotions and end up causing a lot of chaos!

  14. Posté par Mes 3 sites coup de coeur (janvier 2011) | Veydunet a dit : le

    […] droits… Ils ont même retiré la navigation pour coller à la tendance du moment (cf. Vive les sites web à page unique !). Bref, c’est d’une sobriété imbattable, […]

  15. Posté par Rich Commerce > Vers des sites marchands monopage ? a dit : le

    […] me réjouissais récemment de la mode des sites web à page unique, il semblerait que cette mode soit en train de gagner le monde du commerce en ligne avec des […]

  16. Posté par Les tendances et leçons du web > to do list « Demain Is demain a dit : le

    […] Le site web à page unique : less is more ? Si Fred Cavazza le recommande « si vous n’avez pas grand chose à raconter ou si vous savez limiter le contenu au strict minimum, cette solution s’avère particulièrement efficace », un internaute (Martin Lessard) contrebalance plutôt en argumentant que. « plus votre produit/service/message est clair limpide moins vous avez besoin de mots pour le décrire ». Difficile quand même en fonction de son offre et je ne suis pas fan des encres. On admet en revanche que le design est plus sympa et plus épuré… d’emblé. […]

  17. Posté par Snailmailmyemail, un menu presque bien conçu » UXUI a dit : le

    […] (accueil, galerie, à propos…) Cette structure de plus en plus utilisée présente au moins deux avantages pour l’utilisateur : le contenu est chargé en une fois et est accessible d’un simple coup de […]

  18. Posté par Pages uniques, futurs des sites web ? | Fabrice Arsicot a dit : le

    […] via un billet de l’incontournable Frédéric Cavazza que je rebondis sur le sujet : Vive les sites web à page unique ! Un billet également repris à propos de la mise en oeuvre sur les sites […]

  19. Posté par InterfacesRiches.fr > Est-ce la mode des sites en parallax scrolling vertical ? a dit : le

    […] cassez le principe de navigation page à page. Dans l’absolu, ce n’est pas très grave (Vive les sites web à page unique !), mais un défilement horizontal combiné avec un bandeau de navigation horizontal qui vous suit […]

  20. Posté par Julien a dit : le

    Pour la navigation par ancre avec permalink et historique (et donc précédent / suivant du navigateur intelligent qui ne change pas de page), il existe le framework javascript backbone.js qui fait bien son travail.