Créer un site vitrine rapide et responsive en partant de zéro

On m'a posé la question trois fois le mois dernier, toujours avec la même formule : « mon neveu dit qu'il peut me faire mon site en un week-end, je le laisse faire ? » Et à chaque fois, je réponds la même chose : ça dépend de ce que vous voulez apprendre, pas de ce que vous voulez obtenir.

Créer un site vitrine rapide et responsive en partant de zéro, ce n'est pas un problème de talent. C'est un problème de chemin. Il y a celui qui vous fait comprendre ce qu'est réellement une page web, et celui qui vous livre un résultat propre en trois heures sans que vous ayez la moindre idée de ce qui se passe sous le capot. Les deux sont respectables. Ils ne mènent pas au même endroit.

Dans cet article, je vais vous montrer la méthode complète, celle que j'utilise quand quelqu'un veut vraiment partir de rien : pas de template importé, pas de thème acheté. Vous allez voir où la plupart des tutos s'arrêtent, et pourquoi c'est précisément là que les choses deviennent intéressantes.

Partir de zéro pour un site vitrine rapide et responsive : ce que personne ne vous dit

La plupart des articles sur le sujet commencent par « choisissez un CMS ». Franchement, c'est mettre la charrue avant les bœufs. Avant de choisir un outil, il faut savoir ce qu'on construit, et à quelle vitesse on veut que ça tourne.

Un site vitrine, c'est une poignée de pages qui présentent une activité, une personne ou une association : accueil, à propos, services, contact. Pas de panier, pas de compte utilisateur, pas de base de données. C'est la contrainte qui change tout, parce qu'elle rend possible un site statique, donc rapide par nature.

Pourquoi la vitesse se joue avant le design

Quand j'ai refait le site d'une amie graphiste l'an dernier, son ancien site mettait 4,8 secondes à s'afficher sur mobile. Elle trouvait ça « normal, c'est joli ». Sauf que joli ou pas, la moitié des visiteurs partait avant de voir quoi que ce soit. On a gardé le même design, changé trois choses : images en WebP, suppression d'un script de galerie qui ne servait à rien, hébergement statique au lieu d'un mutualisé lent. Nouveau temps de chargement : 1,3 seconde. Ses demandes de devis ont augmenté dans les semaines qui ont suivi, sans autre changement.

Le problème ? Personne ne mesure. On juge son propre site sur son ordinateur, avec une bonne connexion, en cache. Ce n'est pas ce que voit un visiteur qui arrive du métro avec 4G capricieuse.

No-code ou code à la main : trancher une bonne fois

Là, je vais être direct, parce que c'est la question qui revient tout le temps et que les réponses molles n'aident personne. Si votre objectif est d'avoir un site en ligne cette semaine et de ne plus y penser : prenez un outil no-code. Squarespace, Webflow, Framer, ou même un simple site statique généré depuis un thème. Vous obtenez quelque chose de propre, responsive, sans écrire une ligne.

Si votre objectif est de comprendre comment fonctionne une page web, alors oui, ouvrez un éditeur de texte. Vous allez souffrir. Vous allez passer deux heures à comprendre pourquoi votre image déborde de son conteneur. Et vous saurez le faire pour toujours.

Le pire des deux mondes, et je l'ai vécu : commencer en no-code, puis vouloir « ajuster un petit détail » en CSS par-dessus un thème verrouillé. Deux jours perdus à me battre contre des styles que je ne contrôlais pas. Bref. Choisissez un camp.

La mise en place technique, étape par étape

On part du vide. Un dossier, quatre fichiers, un navigateur. Rien d'autre.

Nom de domaine et hébergement : le triptyque de départ

1. Réservez un nom de domaine chez un registrar connu (OVH, Gandi, Namecheap). Comptez 10 à 15 € par an. Évitez les extensions exotiques qui font fuir les moteurs de recherche.
2. Choisissez un hébergement statique. Pour un site vitrine, c'est gratuit chez plusieurs fournisseurs ou facturé quelques euros par mois. Pas besoin d'un serveur costaud : vous ne faites que servir des fichiers.
3. Créez un dossier local mon-site/ avec un fichier index.html à la racine. C'est votre page d'accueil.
4. Ajoutez un style.css dans un sous-dossier css/, et un dossier images/. Cette arborescence simple vous sauvera la vie quand vous aurez vingt fichiers.

La structure HTML minimale, celle que j'écris systématiquement, ressemble à ceci : un <head> avec la balise viewport, le titre, la description, et le lien vers le CSS. Puis un <body> avec un en-tête, une section principale, un pied de page. Rien de plus.

La balise viewport, ce détail oublié qui casse tout

Sans <meta name="viewport" content="width=device-width, initial-scale=1">, votre site s'affichera en miniature sur mobile, zoomé à l'envers, illisible. C'est la ligne la plus importante de tout votre fichier, et c'est celle que les débutants oublient le plus souvent.

Ensuite, on code en mobile-first. C'est-à-dire qu'on écrit le CSS pour le téléphone d'abord, puis on ajoute des media queries pour les écrans plus larges. Pourquoi ? Parce que c'est plus simple d'ajouter que de retirer. On empile verticalement, on prévoit des marges généreuses, on utilise des unités relatives (rem, %) plutôt que des pixels fixes.

Media queries et breakpoints : la méthode simple

Deux breakpoints suffisent pour 90 % des sites vitrines. Un à 768 px (tablette, on passe souvent à deux colonnes) et un à 1024 px (desktop, on peut élargir les marges). Au-delà, on ne touche plus à rien.

Ce que je vois le plus souvent chez les débutants : quinze media queries, des seuils à 480, 600, 720, 900 pixels… et un résultat incohérent. Simplifiez. Vous n'avez pas besoin de traiter le dernier iPhone dans un breakpoint dédié.

Images et performances : le vrai gisement de vitesse

Voilà l'information que j'aurais aimé qu'on me donne à mes débuts : une image mal optimisée pèse plus lourd que tout le reste de votre site réuni. Une photo prise au téléphone peut faire 4 Mo. Convertie en WebP et compressée, elle descend souvent sous 100 Ko. Diviser par quarante le poids d'une image, c'est trente secondes de travail.

Trois réflexes à installer :

• Convertir systématiquement en WebP (supporté par tous les navigateurs modernes).
• Ajouter loading="lazy" sur toutes les images sauf celles du premier écran.
• Dimensionner l'image à la taille d'affichage réelle. Une vignette de 300 px n'a pas besoin d'un fichier en 3000 px.

Et les Core Web Vitals dans tout ça ?

Ce sont les indicateurs que Google regarde pour juger de l'expérience d'une page. Trois comptent vraiment pour un site vitrine : la vitesse d'affichage du contenu principal, la stabilité visuelle (les éléments qui sautent au chargement), et la réactivité aux clics. Un site statique, avec des images légères et des dimensions déclarées, les réussit presque naturellement. C'est pour cette raison que je pousse le statique pour ce type de projet.

Comparer les voies possibles avant de se lancer

Approche	Temps pour un débutant	Coût annuel	Ce que vous apprenez
Code manuel (HTML/CSS)	2 à 4 semaines	15 à 40 €	Le fonctionnement réel du web
Générateur statique (thème prêt)	2 à 5 jours	15 à 40 €	La gestion de contenu et de fichiers
Éditeur no-code (Webflow, Framer, Squarespace)	1 à 2 jours	150 à 350 €	La mise en page visuelle, peu de technique
Constructeur WordPress + thème	3 à 7 jours	70 à 200 €	Un écosystème complet, mais lourd

Vous voyez le schéma. Plus vous prenez la main, moins vous payez, mais plus vous investissez du temps. Le no-code n'est pas gratuit non plus : c'est du temps gagné contre de l'argent dépensé, chaque année. Personne ne vous le dit franchement, mais un abonnement à 20 € par mois, sur cinq ans, c'est 1200 € pour un site vitrine qui aurait pu coûter 75 € en tout.

La mise en ligne, ou l'étape que tout le monde redoute

Franchement, c'est plus simple que ça en a l'air. Une fois vos fichiers prêts, vous les transférez sur votre hébergement (par FTP ou via une interface web), vous pointez votre domaine vers ce serveur, et vous attendez que la propagation DNS se fasse. Comptez de quelques minutes à quelques heures.

Deux vérifications à faire absolument le jour de la mise en ligne :

• Tester le site sur un vrai téléphone, pas sur le simulateur du navigateur. Le rendu tactile et le comportement du scroll ne sont pas les mêmes.
• Vérifier que votre formulaire de contact envoie bien les messages. J'ai mis un site en ligne pour un client, convaincu que tout marchait, et j'ai découvert deux semaines plus tard que le formulaire écrivait dans le vide. Deux semaines de demandes perdues. Vérifiez. Vraiment.

Comment tester réellement le responsive

Le mode « responsive » des outils de développement de Chrome ou Firefox est utile, mais il ment sur un point : la taille du fichier. Il ne simule pas la 4G lente, ni le processeur d'un téléphone d'entrée de gamme.

La méthode que j'utilise : je charge le site sur mon propre téléphone, en désactivant le wifi, en 4G, dans un endroit où le réseau est moyen. Si la page s'affiche correctement en trois secondes dans ces conditions, elle est prête. Sinon, retour à l'optimisation des images.

Ce qui se joue après la mise en ligne

Un site vitrine n'est jamais fini. Mais il n'a pas besoin d'être parfait pour être utile. Le piège dans lequel je suis tombé plusieurs fois, c'est de continuer à peaufiner des détails invisibles en repoussant la mise en ligne. Un site en ligne avec trois coquilles sert plus qu'un site parfait dans un dossier.

Ce qui compte ensuite, c'est ceci : est-ce que les visiteurs trouvent ce qu'ils cherchent ? Est-ce qu'ils vous contactent ? Vous pouvez passer des semaines sur l'animation de votre menu déroulant sans que personne ne le remarque, alors qu'un titre mal formulé sur la page d'accueil fait fuir tout le monde.

Mon conseil, et je le tiens : après la mise en ligne, ne touchez plus au code pendant deux semaines. Regardez ce que les gens font réellement sur votre site. Vous serez surpris. Ce que vous croyiez prioritaire ne l'était pas, et le petit détail que vous aviez laissé de côté est ce qui bloque.

Un site vitrine, au fond, c'est une conversation avec des inconnus. Vous avez le droit de la préparer. Vous n'avez pas le droit de ne jamais l'entamer.