Site Nuxt SSR
Route dynamique par slug, rendu des blocs Storyblok, page d’accueil, métadonnées dynamiques et layout commun.
Auvergne Loisirs : composer un site vitrine avec Nuxt et Storyblok
Auvergne Loisirs devait présenter plusieurs activités avec leurs lieux, tarifs, articles et informations pratiques. Storyblok apporte la composition éditoriale ; Nuxt garde un rendu cohérent côté visiteur.
Comment présenter plusieurs activités sans créer une structure différente pour chaque page ?
Le projet en bref
- Site vitrine administrable
- Loisirs de plein air
- 2023 - 2024
- Nuxt, Storyblok, Leaflet
Faire évoluer des pages variées avec un cadre commun
Site vitrine Nuxt et Storyblok pour des activités de loisirs, conçu pour composer des pages variées avec un cadre commun, une carte utile et des contenus pratiques.
Canoë, canyoning, paintball ou contenus pratiques ne demandent pas exactement les mêmes informations. Le travail a consisté à garder cette variété, sans transformer le CMS en accumulation de cas particuliers.
La difficulté : garder des pages variées mais cohérentes
Lorsque plusieurs activités cohabitent sur un même site, chaque page peut demander des contenus spécifiques. Sans cadre, le CMS devient une accumulation de sections particulières. Le projet demandait donc des blocs assez souples pour publier, mais assez cadrés pour garder un rendu fiable.
- Rendre les pages Storyblok avec une structure de routes stable.
- Prévoir des blocs utiles pour les activités, articles, tarifs, FAQ et lieux.
- Tester les composants sensibles sur mobile, notamment carte et carrousels.
- Relier la mesure d’audience au choix de consentement.
Les arbitrages réalisés
Les choix structurants du projet, présentés à partir de leur impact sur le produit et son exploitation.
- 01
Utiliser Storyblok pour composer
Les pages sont organisées depuis le CMS avec des blocs éditoriaux, mais les règles d’affichage restent portées par le site.
- 02
Laisser Nuxt maîtriser l’affichage
Les composants gèrent les espacements, les images, le responsive, les états vides et les comportements interactifs.
- 03
Traiter la carte comme un composant utile
La carte aide à repérer les lieux, à préparer le trajet et à consulter les informations utiles depuis un téléphone.
- 04
Prévoir le consentement avant les scripts
Les outils de mesure sont reliés à une logique de choix utilisateur au lieu d’être ajoutés de façon isolée.
Les briques livrées
Le site associe un socle éditorial commun et des composants pensés pour les vrais usages de consultation.
Blocs Storyblok
Textes riches, images, boutons, bannières, activités, contenus associés, tarifs, FAQ, articles et sections composables.
Carte et lieux
Carte Leaflet, coordonnées, marqueurs, popups, liste de lieux, recentrage et liens d’itinéraire.
Mesure et composants mobiles
Bannière de consentement, Google Tag Manager, Plausible, carrousels Swiper, corrections iOS et ajustements adaptés au mobile.
Des pages variées, une structure commune
Garder une base commune entre les activités
Auvergne Loisirs devait présenter plusieurs activités sans créer une structure différente pour chaque page. Storyblok sert de cadre de composition ; Nuxt garde un rendu cohérent côté visiteur.
Une structure centrée sur les activités
Cette base évite de traiter chaque activité comme un cas isolé. Les contenus restent variés, mais les règles d’affichage restent communes.
Définir les blocs à partir des contenus réels
Les blocs ont été pensés à partir des contenus à publier : activités, articles, images, textes riches, tarifs, FAQ, cartes, bannières et contenus associés.
Chaque type de contenu a ses propres contraintes. Une grille tarifaire reste lisible lorsqu’elle est structurée. Une FAQ regroupe des questions. Une carte s’appuie sur des coordonnées fiables. Un article garde une structure claire.
Storyblok compose, Nuxt sécurise le rendu
Le CMS donne la main sur l’ordre et le contenu des blocs. Le code garde la cohérence visuelle : espacements, tailles d’images, mobile, états manquants et interactions.
Cette séparation évite que la liberté d’édition devienne une liberté de casser la page.
Traiter la carte comme une aide à la visite
Pour des activités de plein air, la localisation compte. La carte aide le visiteur à comprendre où se trouvent les lieux et comment préparer son trajet.
La carte Leaflet gère les marqueurs, les coordonnées, les popups, le recentrage et les liens vers l’itinéraire. Une liste de lieux accompagne l’affichage pour rendre l’information plus accessible sur mobile.
Le mobile a demandé des ajustements spécifiques
Une carte utile sur mobile demande des réglages précis : hauteur de panneau, gestes tactiles, popups, recentrage, lisibilité des marqueurs et comportement iOS.
Ces corrections ne changent pas le discours commercial du site. Elles changent pourtant la qualité perçue au moment où le visiteur cherche une information concrète.
Montrer les activités sans gêner la lecture
Les activités de loisirs ont besoin d’images. Les visuels montrent l’ambiance, les lieux et les expériences proposées. Les médias ont donc été encadrés par les composants Nuxt pour garder un rendu stable.
Les images sont intégrées dans les composants Nuxt, avec des formats et tailles adaptés. Les carrousels Swiper sont utilisés pour donner du rythme lorsque cela aide la présentation.
Un mouvement discret
Un slider qui attire trop l’attention peut gêner la lecture. Le réglage du mouvement, du rendu mobile et de certains comportements iOS fait partie du travail d’interface.
L’objectif est simple : montrer les activités en gardant une page facile à consulter.
Les articles et FAQ prolongent la préparation de visite
Le site répond aux questions qui précèdent la venue : tarifs, conditions, équipement, lieux, groupes, organisation et informations pratiques.
Les articles et FAQ apportent ces réponses dans des formats dédiés. Les contenus peuvent être reliés depuis Storyblok lorsque cela aide le parcours.
Le SEO vient de la clarté du contenu
Le référencement naturel repose ici sur des pages qui répondent clairement aux questions des visiteurs.
Une structure propre, des contenus bien reliés et des informations pratiques lisibles soutiennent le SEO tout en gardant une lecture naturelle.
Intégrer la mesure sans la traiter à part
Le site utilise des outils de mesure comme Google Tag Manager et Plausible. Ces scripts ont été reliés à une logique de consentement, avec une bannière en français et un comportement adapté au choix de l’utilisateur.
Cette intégration place l’analytics dans le fonctionnement normal du site : les scripts suivent le choix exprimé par l’utilisateur.
Un sujet à maintenir
La mesure d’audience peut évoluer avec les outils et les besoins. Prévoir le consentement dans l’architecture facilite les futurs ajustements, notamment lorsqu’un nouvel événement ou script est ajouté.
Un site de loisirs mieux structuré
Le projet montre l’intérêt d’un CMS cadré : laisser l’équipe publier des contenus variés, sans rendre la consultation confuse pour le visiteur.
Points utiles à retenir
Un site vitrine avec CMS reste lisible lorsque les blocs correspondent aux vrais contenus, et lorsque les composants sensibles sont testés dans les conditions d’usage.
- Storyblok donne de la souplesse lorsque les blocs correspondent aux pages réellement publiées.
- Les blocs gagnent en valeur lorsqu’ils reflètent les contenus réels : activités, tarifs, lieux, articles, FAQ et visuels.
- Carte, sliders et contenus visuels demandent une vérification sur les usages mobiles.
- La mesure d’audience fonctionne mieux lorsqu’elle respecte le consentement dès l’intégration.
Vous avez un sujet proche ?
Nous pouvons concevoir un site vitrine avec Storyblok lorsque vos pages évoluent régulièrement tout en gardant un rendu maîtrisé.