Étude de cas interne
Étude de cas interne — le site Slavic IT
Le site que vous consultez, conçu pour porter deux activités distinctes sans que l'une efface l'autre.
- Mon rôle
- Conception, rédaction, développement et mise en ligne
- Lieu
- Perpignan, Pyrénées-Orientales
- Étude publiée le
Le point de départ
Slavic IT a deux activités : le dépannage et la réparation informatique d'un côté, la création de sites web pour les professionnels de l'autre. Le site devait rendre les deux lisibles, sans que la plus ancienne écrase la plus récente. Un visiteur venu pour faire réparer son téléphone doit comprendre en quelques secondes que la partie web existe aussi — et l'inverse est tout aussi vrai.
Le site devait également tenir trois rôles en même temps : une vitrine qui présente l'activité, un support commercial que je peux ouvrir devant un professionnel pendant un rendez-vous, et une source d'informations pour quelqu'un qui se renseigne seul, le soir, avant de demander un devis. Ces trois usages ne demandent ni le même niveau de détail ni le même ton.
L'offre web devait rester compréhensible quel que soit le point d'entrée. Selon qu'on arrive par une recherche locale, par un article de blog ou par la page d'accueil, on ne lit pas les pages dans le même ordre : chacune devait donc se suffire à elle-même tout en menant naturellement à la suivante.
Au fil de l'évolution du site, les offres et tarifs devaient rester cohérents sur toutes les pages. Ils ont donc été centralisés dans une source unique plutôt que recopiés à plusieurs endroits.
Les objectifs
Avant d'écrire la moindre ligne, voici ce que le site devait accomplir :
- Présenter clairement les différentes prestations, du dépannage informatique à la création de site web.
- Rendre l'offre web compréhensible pour un professionnel qui n'est pas du métier : ce qu'elle contient, ce qu'elle coûte, ce dont il reste propriétaire.
- Faciliter la demande de devis et la prise de contact, sans formulaire interminable ni inscription.
- Structurer les contenus pour les recherches locales dans les Pyrénées-Orientales.
- Garder les informations commerciales cohérentes dans le temps, y compris après des mois de modifications successives.
Ce qui a été mis en place
Les décisions qui ont structuré le site, et la raison de chacune :
Une page par intention, plutôt qu'une grande page fourre-tout
Les contenus commerciaux du web sont séparés selon ce que cherche réellement le visiteur : un hub qui rassemble les formules et leurs tarifs, une page sur l'accompagnement local, une page consacrée au site vitrine, une page qui explique le travail en direct avec un freelance. Chacune répond à une question précise, ce qui évite au lecteur de trier lui-même l'information.
Les informations commerciales définies à un seul endroit
Les formules, les tarifs, le nombre de pages, le délai de livraison et la garantie sont écrits une seule fois, puis affichés partout où ils apparaissent. Modifier un prix se fait à un endroit unique et se répercute sur tout le site : aucune page ne peut rester en arrière avec une ancienne information.
Les contenus d'information reliés aux pages d'offre
Les articles qui expliquent pourquoi créer un site, comment le rendre efficace et ce qu'il coûte renvoient vers les pages correspondantes — et réciproquement. Quelqu'un qui arrive en phase de renseignement trouve la suite logique de sa lecture sans devoir repasser par le menu.
Un parcours de contact le plus court possible
Le formulaire reçoit le sujet de la demande depuis la page d'où l'on vient : en cliquant depuis la page création de site web, l'objet est déjà rempli. Les messages arrivent directement par e-mail, sans plateforme intermédiaire ni compte à créer.
Une charte visuelle unique, du téléphone au grand écran
Mêmes couleurs, même typographie, mêmes blocs d'une page à l'autre, et une mise en page qui se réorganise selon la taille de l'écran. Un site homogène inspire davantage confiance qu'un site dont chaque page semble venir d'un endroit différent.
Ce qui est en ligne aujourd'hui
Tout ce qui suit se vérifie en naviguant sur le site, sans avoir à me croire sur parole :
- Le site est consultable publiquement et s'adapte aux écrans, du téléphone au grand moniteur.
- Chaque prestation a sa page dédiée : réparation, dépannage, montage, formations, création de site web.
- Un formulaire de contact envoie la demande directement par e-mail, avec une limite d'envois par visiteur pour éviter les abus.
- Un configurateur de devis réparation permet de choisir son appareil et sa panne pour obtenir un ordre de prix immédiatement.
- Un blog héberge les contenus qui ne relèvent ni de la vitrine ni de l'offre commerciale.
- Les formules et tarifs web proviennent d'une source unique : ils sont identiques sur toutes les pages qui les mentionnent.
- Les informations de l'entreprise (activité, zone d'intervention, coordonnées, horaires) sont déclarées dans un format que les moteurs de recherche savent lire.
- Le plan de site est tenu à jour automatiquement et chaque page déclare son adresse de référence.
- L'adresse www renvoie vers l'adresse principale, et les en-têtes de sécurité usuels sont en place (HTTPS forcé, protection contre l'affichage du site dans une page tierce).
Ce que je ne peux pas encore montrer
Je préfère ne pas afficher de chiffres tant qu'ils ne peuvent pas être sourcés proprement. Cette page ne contient donc aucune donnée de trafic, de position dans les résultats de recherche, de taux de clic, de conversion ni de nombre de demandes reçues.
Même chose pour les mesures de performance et d'accessibilité : tant que je n'ai pas de relevé daté, documenté et reproductible à présenter, je n'affiche pas de score.
Ces éléments seront ajoutés ici lorsqu'ils pourront l'être avec leur méthode de mesure. En attendant, tout ce qui est décrit plus haut se vérifie simplement en naviguant sur le site.
Détails techniques
Cette partie s'adresse aux lecteurs curieux ou techniques. Vous pouvez la passer sans rien perdre du reste.
- Next.js 16 et React 19
- Les pages sont générées à l'avance côté serveur : le visiteur et les moteurs de recherche reçoivent directement le contenu en HTML.
- TypeScript
- Les données commerciales (formules, tarifs, garantie, délais) sont décrites de façon stricte, ce qui empêche d'en publier une version incomplète ou incohérente.
- Tailwind CSS
- La charte visuelle — couleurs, espacements, typographie — est définie une fois et réutilisée sur l'ensemble des pages.
- Resend
- Acheminement des messages envoyés depuis le formulaire de contact.
- Vercel
- Hébergement et déploiement : chaque modification part du dépôt de code et est mise en ligne depuis celui-ci.