Créer un site vitrine de A à Z : le parcours complet

Créer un site vitrine ressemble rarement à ce qu’on imagine au départ. On croit que le travail consiste à choisir un thème et à remplir des pages ; il consiste surtout à décider quoi dire, à qui, et dans quel ordre. Les chantiers qui s’enlisent partagent tous le même symptôme : la technique a démarré avant que le contenu ne soit tranché. Le parcours décrit ici suit l’ordre inverse, celui qui fonctionne. Sept étapes, de la feuille blanche à la mise en ligne, avec à chaque fois la question à résoudre avant de passer à la suivante.

Étape 1 : cadrer avant de créer un site vitrine

Un site vitrine sert à convaincre un visiteur qu’il est au bon endroit et à lui donner un moyen d’entrer en contact. Tout le reste est décoration. Avant de créer un site vitrine, trois réponses doivent être écrites noir sur blanc.

À qui s’adresse-t-il ? Un particulier qui cherche un artisan et un donneur d’ordre qui compare des prestataires ne lisent pas la même page. Que doit-il comprendre en dix secondes ? Cette phrase deviendra le titre principal de l’accueil. Que doit-il faire ensuite ? Appeler, écrire, remplir un formulaire, se déplacer : une seule action prioritaire, pas quatre.

Ces trois réponses tiennent sur une demi-page. Elles conditionnent l’arborescence, la longueur des textes, le type d’images et jusqu’au choix du thème. Un projet qui saute cette étape la paiera plus tard, sous forme de refonte. Le cadrage écrit n’est pas un exercice d’école : c’est le document auquel on revient chaque fois qu’une décision hésite.

Le piège du site trop grand

La tentation consiste à prévoir douze pages pour paraître sérieux. Un site vitrine efficace en compte souvent cinq ou six, toutes réellement écrites. Mieux vaut quatre pages denses qu’une douzaine de pages à moitié remplies qui donnent une impression d’abandon. On peut toujours ajouter ; on retire beaucoup plus difficilement.

Étape 2 : poser l’arborescence et les adresses

L’arborescence est la carte du site. Elle se dessine sur papier, en listant les pages et leur relation hiérarchique. Un modèle classique tient en cinq entrées : l’accueil, une page qui présente l’activité, une page qui détaille l’offre, une page qui montre des réalisations ou des références, une page de contact. Les mentions obligatoires et la politique de confidentialité s’ajoutent en pied de page.

Chaque page reçoit une adresse. Cette adresse se construit à partir du titre et doit rester courte, lisible et stable. Une adresse modifiée après la mise en ligne casse les liens existants et disperse la valeur accumulée. On la fixe une fois, correctement, et on n’y revient plus. La stabilité des adresses compte davantage que leur élégance.

Le menu principal reprend l’arborescence sans la trahir. Quatre à six entrées suffisent. Les menus déroulants à trois niveaux, sur un site de six pages, signalent une arborescence mal pensée plutôt qu’une richesse de contenu.

Le pied de page mérite le même soin que le menu, car il accueille des éléments obligatoires et des raccourcis utiles. Mentions légales, politique de confidentialité, coordonnées et rappel de l’activité y trouvent leur place. Un visiteur qui arrive en bas d’une page sans y trouver de quoi continuer repart sans rien faire.

Une dernière question se règle à ce stade : le site aura-t-il un blog ? Publier régulièrement demande un rythme tenable, et une rubrique d’actualités abandonnée depuis deux ans nuit davantage qu’elle ne sert. Mieux vaut y renoncer d’emblée que d’afficher une dernière publication vieille de vingt-quatre mois.

Étapes 3 et 4 : le socle technique, puis l’apparence

Préparer le socle

Le nom de domaine et l’hébergement se règlent avant la conception visuelle, parce qu’ils déterminent l’environnement de travail. La procédure complète, du choix de l’extension à la création du compte administrateur, est détaillée dans notre article sur l’hébergement, le nom de domaine et l’installation.

Un point mérite d’être anticipé : le lieu de construction. Travailler directement sur l’adresse définitive est possible, à condition de bloquer l’indexation pendant les travaux et de la débloquer au lancement. Travailler sur une adresse temporaire suppose une migration ensuite, opération simple mais qui laisse des adresses résiduelles dans la base si elle est bâclée. Pour un premier projet, la construction sur l’adresse finale, discrètement, reste la voie la plus sûre.

Choisir l’apparence sans se piéger

Le thème détermine la mise en page, la typographie, le comportement sur téléphone et, en grande partie, la vitesse d’affichage. Il détermine aussi la facilité avec laquelle vous modifierez un détail dans un an. Le choix se fait donc sur des critères de fond, pas sur une capture d’écran séduisante remplie de photographies professionnelles que vous n’aurez pas.

Trois questions filtrent l’essentiel. Le thème est-il maintenu et compatible avec la version courante du logiciel ? Propose-t-il les gabarits dont votre arborescence a besoin ? Reste-t-il lisible une fois vos vrais textes et vos vraies images en place ? Notre analyse des critères qui comptent vraiment dans le choix d’un thème détaille la méthode d’évaluation.

Un thème de la bibliothèque officielle, sobre et bien entretenu, suffit à la très grande majorité des sites vitrines. La sobriété assumée vieillit mieux que l’effet de mode, et elle laisse le contenu occuper le premier plan.

Étape 5 : écrire les contenus, vraiment

C’est l’étape la plus longue et celle que tout le monde sous-estime. Le texte de remplissage rassure pendant la construction et ruine la mise en ligne, parce qu’il masque les problèmes de mise en page jusqu’au dernier moment. Un gabarit qui semblait parfait avec des paragraphes calibrés se déforme dès que les vrais titres arrivent, plus longs ou plus courts que prévu.

Chaque page suit une structure simple : un titre qui annonce clairement le sujet, un paragraphe d’introduction qui répond à la question du visiteur, des intertitres qui découpent la lecture, et un appel à l’action à la fin. Les blocs de texte de quinze lignes sans respiration font fuir sur téléphone, où se produit la majorité des visites.

Le tableau ci-dessous donne des ordres de grandeur utilisables comme repère de rédaction.

Les images suivent la même exigence de vérité. Une photographie authentique, même imparfaite, convainc davantage qu’une banque d’images reconnaissable au premier coup d’œil. Le poids des fichiers, lui, se surveille dès le début : c’est la première cause de lenteur sur les sites vitrines.

Trois pages appellent une vigilance particulière. L’accueil doit répondre en une phrase à la question du visiteur, avant tout défilement. La page de contact doit annoncer un moyen de réponse vérifié et un délai réaliste, faute de quoi la première impression se joue sur un silence. Les mentions légales et la politique de confidentialité, enfin, ne se bricolent pas : leur contenu dépend de la nature de l’activité et des données réellement collectées par le site.

Étape 6 : monter les pages dans l’éditeur

Le montage arrive une fois les textes écrits. L’éditeur de blocs assemble la page par empilement d’éléments : titres, paragraphes, images, colonnes, boutons. Les motifs enregistrés permettent de réutiliser une structure d’une page à l’autre, ce qui garantit une cohérence visuelle sans effort supplémentaire. La prise en main de cet outil et de ses raccourcis fait l’objet de notre dossier sur les blocs, motifs et modèles.

Une règle de discipline évite bien des dégâts : on ne modifie pas les couleurs ou les tailles bloc par bloc. On les définit une fois dans les réglages globaux, puis on s’y tient. Un site dont chaque titre a reçu un ajustement manuel devient impossible à faire évoluer, et il suffit d’un changement de charte pour transformer la retouche en chantier de plusieurs jours.

Le passage sur téléphone se vérifie page par page, pas à la fin. Un texte superposé à une image se comporte souvent très bien sur un grand écran et très mal sur un écran de six pouces. Les colonnes, en particulier, s’empilent verticalement au-dessous d’une certaine largeur : un montage à quatre colonnes devient une longue bande que personne ne fera défiler jusqu’au bout.

Étape 7 : contrôler, publier, entretenir

Avant la mise en ligne, une liste de vérifications s’impose. Les mentions légales et la politique de confidentialité sont présentes et accessibles depuis toutes les pages. Le formulaire de contact envoie réellement un message, testé depuis une adresse extérieure. Les liens du menu et du pied de page fonctionnent. Le certificat de sécurité est actif et toutes les adresses basculent en connexion chiffrée. Le blocage de l’indexation, s’il avait été activé pendant les travaux, est levé.

Un dernier passage sur un téléphone réel, pas seulement en mode simulation dans le navigateur, révèle souvent deux ou trois détails invisibles autrement : un bouton trop petit, un menu qui recouvre le contenu, une image qui déborde.

Après la publication, le travail change de nature sans s’arrêter. Une vérification mensuelle des mises à jour, une sauvegarde vérifiée, un coup d’œil aux formulaires reçus : un quart d’heure par mois suffit à maintenir un site vitrine en bon état pendant des années. Créer un site vitrine n’est pas un projet qui se termine, c’est un objet qui se tient.

Ce parcours en sept étapes ne raccourcit pas le travail, il le met dans le bon ordre. Cadrer, structurer, installer, habiller, écrire, monter, contrôler. Chaque étape sautée revient plus tard, avec des intérêts.