INIT-CODEUn blog connecté à Directus
Le blog est alimenté depuis Directus afin de séparer la gestion éditoriale du code du site. Des modules JavaScript récupèrent les articles et organisent leur affichage.
Étude de cas
Mère Naturo
Un site professionnel pour présenter une pratique, informer et faciliter la prise de rendez-vous.
Le contexte
Présenter une activité et donner des repères.
Mère Naturo est un site professionnel de naturopathie. Il présente l’activité, les pratiques proposées et les consultations, avec des accès au contact et à la prise de rendez-vous.
Réalisé par Init-Code, le site rassemble ces informations dans un même espace et accueille les contenus éditoriaux du blog.
Le besoin
Informer, orienter et faciliter le premier contact.
Le site devait permettre de comprendre l’activité, de découvrir les consultations et de trouver facilement comment prendre contact ou réserver.
- présenter la naturopathie et les pratiques associées
- expliquer le déroulement des consultations
- donner accès aux articles du blog
- faciliter la prise de rendez-vous
- proposer une navigation adaptée au desktop comme au mobile
La solution mise en place
Une architecture multi-pages, des parcours identifiables.
Le site s’organise autour de cinq entrées principales : Accueil, À propos, Consultations, Blog et Contact. Chaque page répond à un usage précis.
La navigation relie la présentation de l’activité aux consultations et aux contenus. Des liens de réservation donnent accès au service externe depuis les pages concernées ; les mentions légales et les conditions générales restent accessibles dans le footer.
L’expérience utilisateur
Passer de la découverte à une prochaine étape.
Découvrir l’activité
L’accueil présente la naturopathie et les pratiques proposées, notamment la réflexologie. La page À propos permet de découvrir la professionnelle derrière Mère Naturo.
Comprendre les consultations
Une page dédiée décrit le déroulement des consultations et les formules proposées. Elle donne aussi accès à la réservation.
Trouver le bon point de contact
La page Contact rassemble les coordonnées et les moyens de poursuivre l’échange. Les liens sociaux complètent ces accès.
Les fonctionnalités
Des intégrations au service du contenu et du rendez-vous.
Une réservation externe
La prise de rendez-vous est reliée à SumUp Bookings. Le site donne accès à ce service ; la plateforme de réservation n’a pas été développée par Init-Code.
Des informations regroupées
Présentation de l’activité, consultations, blog, coordonnées et liens sociaux sont réunis dans une structure de navigation commune.
L’approche technique
Un front-end simple à comprendre et à maintenir.
Le site repose sur HTML, SCSS et JavaScript. Les styles sont organisés en modules pour les bases, les composants, les layouts et les pages, avec un contrôle direct du front-end.
Le build transforme les sources src/ en fichiers livrables dans
dist/ : Sass compile les styles, Terser minifie les modules JavaScript et
les assets sont copiés dans la sortie.
ESLint, Stylelint et HTMLHint contrôlent le code ; Prettier assure un formatage cohérent. Ces outils servent la maintenabilité de la base.
Responsive et qualité
Une base adaptée aux usages du web.
Navigation responsive
Le menu et les mises en page s’adaptent aux différentes tailles d’écran pour conserver l’accès aux informations et aux liens de réservation.
Fichiers et styles structurés
Les images du site utilisent notamment le format WebP. La compilation des styles et la minification JavaScript font partie du build.
SEO de base et pages utiles
Le projet comprend les métadonnées des pages, un sitemap XML, un fichier robots.txt et une page 404 personnalisée, ainsi que les pages légales.
Le résultat livré
Un site complet pour présenter, publier et orienter.
Le résultat livré est un site responsive qui centralise la présentation de l’activité, les consultations, les contenus et l’accès à la réservation.
Sa partie éditoriale est administrable depuis Directus. Le site est aujourd’hui en ligne et sa réalisation par Init-Code est indiquée dans le footer.
Le site en ligne
Découvrir Mère Naturo dans son contexte.
Le site public permet de parcourir les pages livrées et leurs fonctionnalités.
Un projet à construire ?
Donnons une présence web claire à votre activité.
Parlons de vos besoins et de la manière de construire un site adapté à vos contenus et à vos utilisateurs.