Étude de cas

L’Essence d’Être, un site sur mesure.

Un cabinet de coaching et de formation des Hauts-de-France, qui accompagne aussi bien des comités de direction que des managers de terrain. Nualt en a conçu et développé le site en un mois, pour rendre une offre dense lisible par des publics très différents et permettre au cabinet de faire évoluer son site en toute autonomie.

Être recontactéVoir le site
lessencedetre.fr
Page d’accueil du site de L’Essence d’Être
Durée
Un mois
Prestations
Formalisation des contenus, design, développement, référencement
Site
lessencedetre.fr ↗︎
par mois d’hébergement et de maintenance
0 €

L’essentiel

  • Quatre accompagnements distincts sur une seule page, avec une lecture courte et le détail accessible à la demande.
  • Des animations adaptées à l’espace d’écran, au tactile, aux réglages du système et à la puissance de la machine, vérifiées sur huit formats de référence.
  • Un référencement fondé sur des données structurées qui décrivent le cabinet et ses offres, complétées par une fiche Google Business.
  • Un cabinet qui modifie lui-même ses contenus, possède son code et ses comptes, et ne paie ni hébergement ni maintenance.

Une offre dense,
des publics très différents.

Quatre accompagnements de nature très différente, du coaching individuel d’un dirigeant sur plusieurs mois à une intervention de crise sur site en quelques jours. Un directeur général qui cherche un coach et un responsable de site confronté à un conflit social n’arrivent pas avec la même question, ni avec le même temps devant eux.

Le cabinet disposait déjà de contenus détaillés. Notre travail a d’abord consisté à les formaliser, puis à en tirer ce qui compte sur un site vitrine, où la première impression se forme en une cinquantaine de millisecondes, comme nous l’expliquions dans notre article sur l’impact du design.

Nous avons donc conçu la page à partir des parcours de lecture plutôt qu’à partir des contenus eux-mêmes, en décidant d’abord de ce que chaque visiteur devait comprendre au premier regard, puis de ce qu’il pouvait découvrir en creusant.

lessencedetre.fr/#services
Les quatre accompagnements du cabinet, chacun résumé en une ligne
lessencedetre.fr/#services
Le détail du coaching de dirigeants, ouvert à la demande

Un site qui inspire
confiance dès la première visite.

Un cabinet qui se lance dispose encore de peu de références en propre. Son dirigeant, en revanche, en a accumulé au fil de vingt-cinq ans de direction opérationnelle. Nous lui avons donné une place centrale, avec les chiffres qui la résument, pour que la confiance attachée à son parcours se reporte sur le cabinet.

Une identité sobre, construite sur le bleu, convient à des interlocuteurs de comité de direction. Les offres se comprennent en quelques secondes, le détail restant réservé à ceux qui le demandent.

lessencedetre.fr/#about
Le mot du dirigeant, Gonzague Roussel, avec les chiffres de son parcours

Un site vitrine,
une exigence d’ingénierie.

Les clients du cabinet découvrent souvent le site depuis un ordinateur d’entreprise, et c’est ce poste, bien plus que l’écran sur lequel le site a été conçu, qui détermine leur première impression.

lessencedetre.fr
L’accueil du site dans une fenêtre de 1280 × 630 pixels, celle d’un portable 15 pouces

Des animations adaptées à chaque écran

Un portable vendu comme « 15 pouces Full HD » ne laisse au navigateur qu’environ 1280 × 630 pixels. Plutôt que de couper les animations dès que l’écran rétrécit, nous avons défini des paliers, et le site désactive les effets sur une machine peu puissante plutôt que de les laisser saccader. Chaque palier a été vérifié sur huit formats de référence.

Nous avons publié cette méthode en open source, responsive-motion, dont notre article sur les sites animés retrace la genèse.

L’accueil du site sur téléphone
Le détail d’une offre sur téléphone, en panneau

Une version mobile à part entière

Sur téléphone, le site renonce aux animations au profit de la vitesse, puisque selon une étude de Google, plus de la moitié des visites sur mobile sont abandonnées au-delà de trois secondes de chargement.

Chaque section y a sa propre composition, et les détails qui trahissent un site mal adapté ont été traités un à un, comme la barre d’adresse qui fait varier la hauteur de l’écran ou le mode sombre imposé par certains téléphones Android.

données structurées
{
  "@type": ["ProfessionalService", "Organization"],
  "@id": "https://lessencedetre.fr/#organization",
  "name": "L'Essence d'Être",
  "founder": {
    "@type": "Person",
    "name": "Gonzague Roussel",
    "worksFor": { "@id": "https://lessencedetre.fr/#organization" }
  },
  "areaServed": "FR",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "itemListElement": [{
      "@type": "Offer",
      "itemOffered": {
        "@type": "Service",
        "name": "Gestion de crise Flash"
      }
    }]
  }
}

Un référencement construit dans le code

Le site décrit le cabinet aux moteurs de recherche sous forme de données structurées, qui relient le cabinet, son dirigeant et ses offres en une seule entité. Il publie aussi une version de ses pages pour les assistants d’IA comme ChatGPT ou Perplexity.

S’y ajoutent une fiche Google Business, déterminante pour la recherche locale, et un cadre de rédaction qui permet au cabinet de publier régulièrement.

Racontez-nous ce que vous voulez construire.

Être recontactéNous écrire un mail
de frais d’hébergement
0 €

Nualt m’a proposé une solution clé en main qui répond parfaitement à mes attentes.

Gonzague Roussel // Dirigeant

L’Essence d’Être

Une méthode publiée en open source.

Les paliers d’animation du site sont devenus un skill pour agents de code, responsive-motion, publié sous licence MIT.

  • agent-skills · claude-code · claude-code-plugin

    responsive-motion

    Skill Claude Code. Ajuste les animations de scroll selon les capacités de l'appareil.

    • Dernière mise à jour :
    • Licence : MIT
    GitHub
    npx skills add nualt/responsive-motion

  • github/nualt

    Tous nos dépôts publics, sous licence MIT, utilisables par tous.

    github.com/nualt
Tous les dépôts

Un client propriétaire
de son site.

L’autonomie du cabinet repose sur Payload, un CMS open source intégré au site, configuré pour qu’aucune modification ne puisse déséquilibrer la page. Un champ laissé vide reprend son texte d’origine, les sections de témoignages et d’articles changent de composition selon le nombre de contenus publiés, et une section vide disparaît de la page comme de la navigation. Un guide d’utilisation, rédigé pour un lecteur sans connaissance technique, accompagne la livraison.

Le code et les comptes d’hébergement sont au nom du cabinet, et il ne paie ni hébergement ni maintenance, là où le devis d’agence qu’il avait reçu prévoyait 200 € par mois pour les deux. Il peut ainsi faire évoluer son site avec nous, avec un autre prestataire ou seul.

lessencedetre.fr/admin
La page Contenu du site de l’administration Payload, onglet Hero : titre, texte d’introduction, bouton et photo, section par section

Une stack
qui appartient au cabinet.

Next.js, Tailwind CSS, GSAP, Payload CMS et PostgreSQL, hébergés sur Vercel, sur les comptes du cabinet.

Site

Next.js

Framework React du site et de son administration.

Styles

Tailwind CSS

Styles du site, au plus près de la maquette.

Animations

GSAP

Animations, par paliers selon l’écran et la machine.

Contenus

Payload CMS

Textes et photos modifiables par le cabinet, sans développeur.

Données

PostgreSQL

Base des contenus du site.

Hébergement

Vercel

Hébergement du site, sur le compte du cabinet.

Racontez-nous ce que vous voulez construire.

Être recontactéNous écrire un mail