La semaine dernière, j’ai rédigé un article sur les tendances qui influencent le design de votre site Internet. Le paragraphe sur le principe du «Onepager» ayant déclenché quelques réactions, je vais rentrer aujourd’hui davantage dans les détails. Les sites d’une seule page étant structurés de façon simple, ce type de site convient notamment pour les sites Internet qui ont peu de contenu ou bien des contenus étroitement liés. Ils sont particulièrement appréciés par les photographes ou les graphistes qui montrent leurs travaux, les conseillers qui présentent leurs services, ou bien les sociétés qui souhaitent présenter leurs produits.

Une plus grande marge de manœuvre
Comme son nom l’indique, un site Onepager ne contient qu’une seule page. Cela donne au concepteur une grande marge de manœuvre. Il n’a pas besoin de réfléchir en pages ou en grilles mais en scènes ou en chapitres (équivalents aux pages). Cela lui donne davantage de liberté d’action, par ex. pour mettre en œuvre un élément graphique de façon cohérente. Le système de navigation se trouve à gauche ou en haut. Vous naviguez à travers le site Internet en cliquant sur le système de navigation. Vous pouvez également faire défiler la barre de défilement vers le haut ou vers le bas à l’aide de la souris, et souvent à l’aide des flèches du clavier. Les sites d’une seule page misent sur le HTML5 et le CSS3, et beaucoup s’adaptent automatiquement à la taille de l’écran (Responsive Design).

Il existe maintenant sur Internet de nombreux modèles, issus pour la plupart des États-Unis. Une recherche de « One pager template » dans Google donne plus de 6,2 millions de résultats. Vous trouverez par exemple un grand choix de modèles gratuits ou payants sur One Page Love, CSS Templates ou ThemeForest. De nombreux modèles gratuits sont tout à fait corrects et permettent de s’entraîner. Si vous connaissez le HTML et le CSS, vous pouvez aisément les adapter. Si vous souhaitez effectuer davantage de modifications, vous devez maîtriser un peu JavaScript et à la rigueur Ajax.

Onepager - Tout sur une seule et meme page
shadow

Conseils pratiques
Voici cinq conseils pratiques:

  • La navigation doit être structurée de manière simple, trois à six points doivent suffire.
  • La navigation doit être visible en permanence, y compris lorsque vous faites défiler vers le bas.
  • Chaque point de navigation requiert un ancrage pour pouvoir relier des pages.
  • Soyez bref et succinct, allez tout de suite à l’essentiel.
  • Réfléchissez à des alternatives lorsque vous avez trop de contenu. Par exemple: défilement vertical.

Vous êtes curieux d’en savoir plus ? Dans ce cas, regardez des exemples sur Webdesigner Depot et inspirez-vous en.

Onepager: Tout sur une seule et meme page

Sandro Bertschinger

Sandro pendant longtemps, il a trouvé les ordinateurs relativement ennuyeux. L’élément déclencheur a été une console de jeux, à savoir un Amiga 500. Avec l’arrivée d’Internet et la possibilité de créer des sites Internet «cool», le thème des ordinateurs était plutôt au cœur des préoccupations. En 2001, il a alors croisé par hasard le chemin d’une SSII.

0