---
title: Maquette de site web : ce qui change une fois en ligne
description: Pourquoi un site ne ressemble jamais tout à fait à sa maquette : les états manquants, les contenus réels, le responsive, les polices et la performance. Ce qu'il faut demander à valider.
url: https://www.agence-de-communication-pau.fr/guides/de-la-maquette-au-site-en-ligne/
sources: Volumes Google Ads (relevé du 29/08/2026), SERP Google organique live
licence: Chiffres réutilisables en citant la source et la date de relevé.
---

Maquette de site web : ce qui change une fois en ligne 

 Aller au contenu 

 Accueil / Guides / De la maquette au site en ligne : ce qui se perd entre les deux

 site 
# De la maquette au site en ligne : ce qui se perd entre les deux
 J'ai validé une maquette magnifique. Le site livré était le même, et il ne fonctionnait pas. Ce que la maquette ne montrait pas, c'est tout ce que je n'avais pas pensé à demander. 

## Parlons de votre projet

 Un rappel sous 24 h ouvrées. Sans engagement.

 Par Aurélie Ducasteaux · 3 septembre 2026

## Une maquette est une photographie d'un site à l'arrêt
 C'est la phrase qui m'aurait fait gagner six mois. Une maquette montre un état, à un instant, avec un contenu choisi, sur une largeur d'écran choisie, sans interaction.
 Un site vit dans le mouvement. Il a des états, des contenus qui débordent, des largeurs qu'on n'a pas prévues, des gens qui naviguent au clavier, une connexion qui rame. Rien de tout cela n'est dans l'image.
 L'écart n'est pas un défaut du prestataire. C'est la différence entre un dessin et un objet, et elle se comble en demandant à voir les bonnes choses au bon moment.

## Les états qu'une maquette ne montre presque jamais
 Faites la liste, elle est courte et elle change tout.
 Le survol et le focus. À quoi ressemble un lien survolé, un bouton pressé, un champ actif ? Le focus est celui qu'on oublie systématiquement, et c'est celui qui rend un site utilisable au clavier. Un focus supprimé pour des raisons esthétiques rend le site inutilisable pour une partie des visiteurs.
 Les erreurs. Un champ mal rempli, un formulaire incomplet, un message d'erreur. Ce sont les écrans les plus vus par les gens qui essaient de vous contacter, et ceux qu'on ne dessine jamais.
 Le vide. Une liste sans résultat, un blog sans article, une recherche qui ne trouve rien. Sur un site neuf, l'état vide est l'état normal pendant plusieurs mois.
 Le chargement. Que voit-on pendant que la page arrive ? Un blanc, un décalage, un texte qui saute quand la police se charge ?
 Le trop-plein. Un titre de douze mots, un menu de neuf entrées, un nom de produit à rallonge. La maquette porte toujours le titre parfait de six mots.

## Le contenu réel casse toujours quelque chose
 C'est le point le plus fréquent, et le plus évitable.
 Une maquette est composée avec du texte choisi pour tenir. Votre vrai contenu ne tient jamais pareil : un titre plus long passe sur trois lignes et pousse le bouton hors de l'écran ; une description de deux mots laisse un trou ; une photographie verticale là où la maquette prévoyait un format horizontal déforme la grille.
 La parade tient en une phrase, et elle se demande avant le début des maquettes : maquetter avec du contenu réel , ou à défaut avec les cas extrêmes. Le titre le plus long que vous aurez, le plus court, la photo la plus mauvaise. Une maquette qui tient dans ces trois cas tiendra partout.
 Cela suppose d'avoir des contenus au moment des maquettes, ce qui est rarement le cas et qui est précisément le nœud de la plupart des projets qui traînent.

## Le responsive : trois largeurs ne suffisent pas
 Une maquette montre en général un écran large et un téléphone. Parfois une tablette.
 Un site est consulté sur un continuum de largeurs, avec des zooms, des barres latérales, des fenêtres redimensionnées. Entre les deux largeurs maquettées, il existe des états intermédiaires que personne n'a regardés, et c'est là que les grilles cassent.
 Deux vérifications à faire vous-même, en cinq minutes, sur le site en recette. Réduisez lentement la largeur de votre navigateur, du plus large au plus étroit, et regardez ce qui se chevauche, ce qui déborde, ce qui devient illisible. Puis, sur un téléphone, augmentez la taille de texte du système à 150 % : c'est ce que font beaucoup de gens de plus de cinquante ans, et c'est le test qui casse le plus de sites.

## Les polices : le décalage entre la maquette et le rendu
 Une maquette est fabriquée sur un ordinateur où toutes les polices sont installées. Sur un site, la police doit être chargée par le navigateur, et il se passe quelque chose entre le début de la lecture et l'arrivée du fichier.
 Deux comportements possibles, tous deux visibles. Soit le texte reste invisible le temps du chargement, et la page paraît vide. Soit il s'affiche dans une police de secours puis change, et la mise en page saute.
 Trois questions à poser : quelles polices sont utilisées, combien de fichiers cela représente, et d'où elles sont chargées. Cette dernière question a une conséquence qui dépasse la technique : une police chargée depuis un service tiers transmet l'adresse IP de vos visiteurs à ce service, ce qui est un traitement de données à part entière. Héberger les fichiers de police sur votre propre serveur supprime la question et accélère le chargement.

## Ce que la maquette ne dit pas sur le poids
 Une image de maquette pèse ce qu'elle pèse ; le site, lui, télécharge. Une page qui contient six photographies en pleine largeur, une vidéo en fond et trois polices arrive lentement sur une connexion moyenne, et la maquette ne le montre pas du tout.
 C'est mesurable, et cela se demande à la recette : le poids total de la page d'accueil, et le temps d'affichage du contenu principal sur une connexion mobile moyenne. Ce sont deux chiffres, ils se lisent avec des outils publics et gratuits, et ils permettent une discussion factuelle plutôt qu'une impression.
 Le compromis se négocie au moment des maquettes, pas après. Une image de fond en pleine largeur pesant deux mégaoctets se remplace par une image plus petite ou par un aplat de couleur, et cette décision appartient à celui qui dessine.

## Ce qu'il faut valider, et à quel moment
 L'ordre compte, parce que chaque étape verrouille la suivante.
 L'arborescence d'abord , avant tout dessin. Quelles pages existent, comment on passe de l'une à l'autre. Une maquette validée sur une arborescence fausse ne sert à rien.
 Une maquette de gabarit, pas de page. Un site n'a pas quarante pages différentes : il a cinq ou six modèles. Validez les modèles, et sachez lesquels.
 Un prototype cliquable plutôt qu'une image, dès que le budget le permet. Il montre les états, les transitions, ce qui se passe quand on clique.
 Une recette sur le site réel , avec vos contenus, sur vos appareils. C'est la seule validation qui engage, et c'est celle qu'il faut inscrire au planning avec un délai, parce qu'elle prend du temps.

## Les cinq questions que je pose maintenant avant de valider une maquette
 Elles ne coûtent rien et elles évitent l'essentiel des mauvaises surprises.
 Est-ce que je vois l'état de focus des liens et des champs ? Est-ce que cette maquette a été faite avec mes textes ou avec du texte de remplissage ? Qu'est-ce qui se passe si ce titre fait deux fois plus long ? Combien pèse cette page une fois en ligne ? Et qu'est-ce que je vois entre la largeur d'un ordinateur portable et celle d'une tablette, qui n'est sur aucune de ces images ?
 La cinquième est celle qui met le plus mal à l'aise, et c'est bon signe : elle porte sur ce que personne n'a regardé.

## Les trois documents que je demande maintenant avec les maquettes
 Ils ne coûtent presque rien à produire et ils suppriment l'essentiel des désaccords à la recette.
 Un inventaire des composants. La liste des briques réutilisables : bouton principal, bouton secondaire, champ de formulaire, message d'erreur, encart, tableau, citation, image légendée. Chacune dessinée une fois, dans tous ses états. Grâce à cet inventaire, une page qui n'a pas été maquettée ressemble quand même au reste du site.
 Les règles typographiques. Les tailles de texte utilisées, leurs interlignages, la largeur maximale d'une colonne de texte, et ce qui se passe quand un titre fait trois lignes. Une maquette montre un titre ; ces règles disent ce que devient n'importe quel titre.
 La liste des contenus attendus par gabarit. Pour chaque modèle de page : quels blocs sont obligatoires, lesquels sont facultatifs, quelle longueur maximale pour chaque champ. C'est ce document qui vous dira, quand vous écrirez la vingt-septième page, que le chapeau doit tenir en deux cent cinquante signes.
 Sans ces trois documents, chaque page nouvelle est une négociation, et le site diverge en six mois.

## La recette : comment la mener pour qu'elle serve
 C'est l'étape qu'on bâcle parce qu'elle arrive quand tout le monde est fatigué et pressé.
 Prévoyez-la au planning, avec une durée. Une semaine sur un site vitrine, avec les gens qui vont l'utiliser. Une recette faite en deux heures la veille de la mise en ligne ne trouve rien.
 Faites-la sur vos appareils réels. Pas seulement sur l'ordinateur du bureau : le téléphone de la personne qui répond au téléphone, la tablette de l'accueil, l'ordinateur portable du commercial. Les écarts se voient là.
 Testez les parcours, pas les pages. Trouver un service depuis l'accueil, remplir le formulaire, recevoir le message. Les visiteurs font cela, et une page parfaite dans un parcours cassé ne sert à rien.
 Vérifiez le formulaire jusqu'au bout. Envoyez-le vraiment, vérifiez que le message arrive, vérifiez dans quelle boîte, vérifiez que quelqu'un la relève. J'ai vu un site tourner quatre mois avec un formulaire qui envoyait sur une adresse fermée.
 Écrivez les anomalies dans un tableau unique , avec une colonne pour l'état. Les corrections envoyées par courriel se perdent, et personne ne sait plus ce qui reste.

## Questions fréquentes
 Faut-il valider une maquette image ou un prototype cliquable ?
 Un prototype dès que le budget le permet : il montre les états, le survol, le focus, les transitions, c'est-à-dire tout ce qu'une image ne peut pas montrer. Sur un petit projet, une maquette image reste acceptable à condition d'y ajouter explicitement les états et de tester le contenu réel.
 Pourquoi mon site ne ressemble-t-il pas exactement à la maquette ?
 Parce qu'une maquette est un dessin à taille fixe et qu'un site s'adapte à des milliers de largeurs, avec des contenus qui varient et des polices qui se chargent avec un décalage. Des écarts de quelques pixels sont normaux ; un élément qui déborde ou un texte illisible ne l'est pas. La distinction se fait sur ce qui gêne l'usage, pas sur la conformité au pixel près.
 Combien de gabarits faut-il maquetter ?
 Autant que le site en a de différents, et ce nombre est le vrai indicateur de charge d'un projet. Un site vitrine courant en compte cinq à huit : accueil, page de service, page de contact, liste d'articles, article, page légale. Quarante pages sur six gabarits demandent six maquettes, pas quarante.
 Qui doit fournir les contenus, et quand ?
 Le client dans la majorité des projets, et c'est la cause numéro un des retards. Le bon moment est avant les maquettes, pas après : maquetter avec du contenu réel évite l'essentiel des reprises. Si vous ne pouvez pas fournir les textes à temps, faites chiffrer la rédaction dans le devis plutôt que de la reporter indéfiniment.

## À lire ensuite
 Sur le même axe éditorial.
 site Les certifications Google : ce qu'elles prouvent et ce qu'elles ne prouvent pas site Faire son site gratuitement : ce que ça coûte vraiment site Faire un site avec une IA : ce qui sort, et ce qu'il reste à faire site Un site internet, c'est une charge ou une immobilisation ?