Zen en Conscience
Le site d'une praticienne de Marly-le-Roi : nous l'avons dessiné, développé, puis lui avons laissé les clés.
Une praticienne n'a ni le temps ni l'envie d'apprendre un outil. Il fallait un site qui inspire confiance, et qu'elle fasse vivre seule, sans nous appeler pour publier un article.
- Cliente
- Sophie Delahaye, praticienne à Marly-le-Roi
- Notre part
- Maquette, développement, backoffice, référencement local
- Site
- Next.js, pages pré-rendues
- Contenu
- Strapi, piloté par un backoffice sur mesure
Une maquette validée, portée au pixel près.
Nous avons dessiné une direction « nature organique » : une serif ample pour les titres, un texte courant très léger, et un mot par titre qui passe en italique terracotta. Sophie a validé la maquette, puis nous l'avons portée page par page en Next.js, chacune pré-rendue pour s'afficher tout de suite.
Un détail qui dit le soin : au passage, des espaces disparaissaient entre un mot et sa mise en forme (« réconcilierle »). Nous avons écrit un contrôle qui relit chaque page publiée à la recherche de ces mots soudés.
DM Serif Display, romain et italique
- Sauge
#7F8C71 - Terracotta
#C97B5A - Argile
#CE9081 - Encre
#313A2E - Lin
#EFEADD
Une page par soin, et un chemin vers le rendez-vous.
Chaque pratique a sa page, avec sa présentation et ses questions fréquentes : c'est ce qu'on vient chercher avant de réserver. Le bouton de rendez-vous, lui, reste à portée de main sur chaque page.
- Accueil
- Soins
- Shiatsu thérapeutique
- Réflexologie
- Aromathérapie
- Méditation adultes et enfants
- Entreprise bien-être au travail
- Ateliers
- Une fiche par atelier
- Blog
- Une page par article
- Contact
La prise de rendez-vous passe par l'agenda en ligne de Sophie, l'inscription aux ateliers par BilletWeb. Nous avons branché le site sur ses outils plutôt que de lui en imposer de nouveaux.
Un backoffice à sa main, pas celui de Strapi.
Le contenu vit dans Strapi, mais Sophie n'en voit jamais l'interface d'administration. Nous lui avons construit son propre backoffice, dans le site même, à ses couleurs et à son vocabulaire : des articles, des ateliers, des catégories. Rien d'autre.
Le vrai backoffice, filmé sur une copie locale du site. Rien n'a été publié.
Un éditeur qui ressemble à Word
Gras, italique, intertitres, listes, citations et liens, sans une ligne de Markdown à retenir.
Quatre blocs pour composer
Texte, bloc de couleur, bouton et image, réordonnables. Les couleurs proposées sont celles de la charte, et rien d'autre.
Une image se dépose
La couverture se glisse dans la page. Remplacée ou supprimée, l'ancienne image est effacée du serveur avec elle.
Publier, c'est cocher une case
L'article ou l'atelier est en ligne aussitôt enregistré : le site se met à jour sans attendre, sans nous.
Le mot en couleur, sans casser le reste.
Un titre enrichi est stocké en deux temps. Le titre brut reste la source pour l'adresse et le référencement ; la mise en forme est rangée à part.
Touchez un mot pour le passer en italique terracotta. Dans son backoffice, Sophie sélectionne le texte et choisit la couleur.
.
title
Trois minutes pour revenir à soi.Le titre brut : il sert à l'adresse de la page, au référencement et aux cartes.
titleRich
[
{"text":"Trois minutes pour "},
{"text":"revenir à soi","italic":true,"color":"terracotta"},
{"text":"."}
]Les segments : ils ne servent qu'à l'affichage.
Un article publié par Sophie : le titre enrichi et les trois blocs de couleur viennent tout droit du backoffice.
Être trouvée à Marly-le-Roi.
Une praticienne se choisit près de chez soi. Le site dit où Sophie exerce, et décrit son activité aux moteurs de recherche dans leur langue, à partir du contenu qu'elle saisit elle-même.
"@type": "HealthAndBeautyBusiness",
address: {
postalCode: "78160",
addressLocality: "Marly-le-Roi",
},
areaServed: "Marly-le-Roi",
knowsAbout: [
"Shiatsu", "Réflexologie",
"Aromathérapie", "MBSR",
],- Une fiche d'établissement sur tout le site
- Adresse complète, zone desservie, praticienne et pratiques, lisibles par les moteurs.
- Chaque atelier devient un événement
- Date, lieu et lien d'inscription BilletWeb sont décrits pour les moteurs, depuis ce que Sophie saisit.
- Chaque article est signé
- Autrice, date et rubrique décrites, image de partage tirée de la couverture.
- Un plan du site pour les moteurs
- Il reprend les pages et le contenu publié. Le backoffice, lui, reste fermé à l'indexation.
Léger au téléphone, solide en coulisses.
- Des photos à la bonne taille
- Chaque visuel existe en trois largeurs, et un aperçu flou occupe la place le temps du chargement.
- Un formulaire qui filtre
- Un champ piège pour les robots, cinq messages par heure au plus, et un consentement explicite.
- Un backoffice verrouillé
- Cinq mots de passe erronés, et la connexion se ferme un quart d'heure. La session est signée.
- Une mise en ligne qui sait reculer
- Chaque version est validée à la main, contrôlée après déploiement, et la précédente revient seule en cas d'échec.