Glossaire

Méthode qui montre deux versions d'une page à deux moitiés du trafic pour comparer leurs résultats. Deux conditions pour conclure : ne changer qu'un élément à la fois, et avoir assez de visiteurs.

Sur un trafic faible, l'écart observé n'est souvent que du hasard : mieux vaut attendre d'avoir assez de visiteurs que de tirer une conclusion d'une poignée de clics.

Conception d'un site utilisable par tous, y compris les personnes en situation de handicap : contrastes suffisants, navigation au clavier, textes alternatifs, structure sémantique. En France, le référentiel RGAA encadre ces bonnes pratiques.

Interface qui permet à deux logiciels de se parler : afficher vos disponibilités depuis un agenda, transmettre une commande à la logistique. Elle définit ce qu'on peut demander et sous quelle forme.

C'est ce contrat, stable dans le temps, qui permet de brancher des outils entre eux sans que l'un casse l'autre. Un service peut évoluer de son côté tant qu'il respecte ce qu'il a promis.

Tout élément graphique produit pour un projet et destiné à être réutilisé : illustration, icône, photo, vidéo, 3D. On les gère comme des ressources : nommées, rangées, déclinées, optimisées.

Format d'image dérivé du codec vidéo AV1, plus efficace encore que le WebP, en particulier sur les aplats et les dégradés. Plus lent à encoder, il se sert en premier choix avec un WebP en repli.

La partie privée d'un site, où l'on gère contenus, commandes et comptes, par opposition au front-office public. Sa clarté décide de la vie du site après la mise en ligne, bien plus qu'on ne l'imagine.

Le travail qui construit une marque : ce qu'elle raconte, ce qu'elle promet, la façon dont elle se montre et dont elle parle. À ne pas réduire au logo, qui n'est qu'un signe parmi d'autres.

Seuil de largeur d'écran à partir duquel la mise en page d'un site s'adapte : passage d'une colonne mobile à une grille desktop, menu qui se replie, typographie qui grossit. C'est la brique de base du responsive design.

Document qui fixe les règles d'usage d'une identité : logo et ses espaces, palette, typographies, traitement des images. Elle rend la marque reproductible par d'autres que ceux qui l'ont créée.

Content Management System : outil qui permet de gérer le contenu d'un site (textes, images, articles) sans toucher au code. Webflow, Sanity ou WordPress en sont des exemples, chacun avec sa philosophie.

Approche où l'interface se construit à partir de briques réutilisables plutôt que page par page. Corriger le composant corrige toutes ses occurrences : c'est ce qui rend un design system opérant.

Écriture destinée à faire agir : titres, accroches, boutons, argumentaires. Chaque phrase s'y juge à son effet plutôt qu'à son élégance, et changer un titre déplace parfois plus qu'une refonte graphique.

Les trois indicateurs de performance que Google mesure sur chaque page : vitesse d'affichage (LCP), réactivité aux interactions (INP), stabilité de la mise en page (CLS). Un site rapide et stable retient mieux l'attention et gagne des positions.

Customer Relationship Management : outil qui centralise contacts, échanges et opportunités commerciales. Connecté au site, il reçoit chaque formulaire avec sa source, sans copier-coller depuis la boîte mail.

Bien branché, il fait disparaître le copier-coller depuis la boîte mail : chaque prospect arrive avec son historique complet, et plus personne ne se demande qui l'a déjà relancé.

Call To Action : le bouton ou le lien qui invite à passer à l'acte. Un bon CTA annonce ce qui va se passer plutôt que d'ordonner | « Voir nos tarifs » fonctionne mieux que « Cliquez ici ».

Code ajouté à la main dans un outil qui ne l'exige pas, typiquement Webflow. Il repousse les limites du no-code, mais doit rester documenté : glissé dans une interface visuelle, il s'oublie vite.

D'où la règle : tout custom code se documente. Glissé dans une interface graphique, il devient invisible pour celui qui reprend le projet, qui passera un temps fou à comprendre d'où vient un comportement.

Mise en forme graphique de données pour les rendre lisibles d'un coup d'œil. Une bonne datavisualisation répond à une question précise et ne ment pas sur les proportions : elle prouve au lieu d'affirmer.

Atelier intensif de quelques jours qui compresse un cycle entier : comprendre, explorer, choisir, prototyper, tester. L'intérêt n'est pas la vitesse, c'est de décider avant d'engager des mois de production.

Bibliothèque vivante de composants, couleurs, typographies et règles d'usage qui garantit la cohérence d'un produit. Un bon design system accélère la production et simplifie la maintenance sur la durée.

Le parti pris visuel d'un projet, et le travail qui consiste à le tenir dans la durée. C'est ce qui distingue un projet cohérent d'une collection de belles pages sans lien entre elles.

Domain Name System : l'annuaire d'Internet, qui traduit un nom de domaine en adresse du serveur qui l'héberge. C'est ce qu'on modifie le jour de la mise en ligne, avec quelques heures de propagation.

Document Object Model : la représentation d'une page que le navigateur construit en mémoire à partir du HTML reçu. Chaque titre, image ou bouton y devient un objet qu'on peut lire, modifier ou écouter.

C'est ce qui rend une page vivante après son affichage : un menu qui s'ouvre, un champ qui signale une erreur. Les lecteurs d'écran et les outils d'analyse lisent cet état-là, pas le fichier envoyé par le serveur.

Balisage invisible qui déclare aux moteurs la nature d'un contenu : ceci est un prix, ceci un avis client. C'est ce qui permet d'afficher étoiles et tarifs dans les résultats, et ce sur quoi s'appuient les IA.

Là où un humain devine la nature d'un contenu à sa mise en page, la machine a besoin qu'on le lui déclare. C'est ce qui distingue une page comprise d'une page seulement lue.

Ossature logicielle qui fournit structure et outils prêts à l'emploi pour construire un site : Astro, Next.js, React. Le choix engage les performances et les profils capables de reprendre le projet.

Partie d'un site ou d'une application qui s'exécute dans le navigateur : le HTML envoyé, les styles, les animations et les interactions. C'est ce que la personne qui visite voit et manipule.

Il se distingue du back-end, qui gère les données, les traitements et les accès côté serveur. Avec un CMS headless, les deux sont nettement séparés : le CMS conserve le contenu, le front-end décide de son rendu.

Generative Engine Optimization : l'équivalent du SEO pour les réponses générées par les IA. On ne vise plus une position dans une liste de liens, mais une citation dans la réponse elle-même.

Les leviers diffèrent du SEO classique : contenu structuré et factuel, sources identifiables, formulations qu'un modèle peut reprendre telles quelles. On ne cherche plus à être cliqué, mais à être repris.

Architecture où l'outil qui stocke les contenus est séparé du site qui les affiche, les deux dialoguant par une API. Le même contenu peut alors alimenter un site, une application ou un écran en boutique.

L'intérêt se voit à la refonte suivante : on peut changer entièrement le design du site sans retoucher un seul contenu, là où un CMS classique mélange les deux et oblige à tout reprendre.

Langage de balisage qui structure le contenu d'une page web : titres, paragraphes, listes, liens, images. Le navigateur lit ce balisage pour construire la page, avant que le CSS l'habille et que le JavaScript l'anime.

La qualité du HTML se voit peu à l'écran et beaucoup ailleurs. Un titre balisé comme un titre est compris par les moteurs de recherche et annoncé correctement par un lecteur d'écran, là où un texte simplement grossi en CSS ne l'est pas.

Service qui stocke les fichiers de votre site et les rend accessibles en ligne 24h/24. Son coût varie selon le trafic, la performance attendue et les services associés (CDN, sauvegardes, certificats SSL).

L'équivalent de la charte graphique pour les mots : ton, vocabulaire employé et vocabulaire évité, façon de s'adresser aux gens. Elle rend la voix reproductible par cinq personnes différentes.

L'ensemble des signes qui rendent une marque reconnaissable au premier coup d'œil : logo, palette, typographies, style d'image. Elle traduit la plateforme de marque en éléments concrets.

Image décrite comme une grille de pixels, par opposition au vectoriel : photos, captures, rendus 3D. Le poids dépend de la définition, et l'agrandissement finit toujours par faire apparaître les pixels.

Langage de programmation du navigateur : il anime les interfaces, réagit aux clics et charge des données sans recharger la page. C'est lui qui donne vie aux interactions d'un site moderne.

Key Performance Indicator : le petit nombre de chiffres qui disent si un projet atteint son objectif. Un bon KPI se rattache à une décision, contrairement au simple nombre de visites.

Chargement différé : les images et vidéos ne sont téléchargées qu'au moment où elles entrent dans l'écran. La page s'affiche plus vite, consomme moins de données et gagne des points en performance web.

Représentation visuelle fidèle du site avant son développement : couleurs, typographies, images et interactions y sont définitives. Réalisée sur Figma, elle sert de contrat visuel entre le studio et le client.

Petite réaction de l'interface à un geste : bouton qui répond au survol, champ qui signale une erreur. On ne les remarque que lorsqu'elles manquent | sans retour visuel, on doute et on reclique.

Méthode qui consiste à concevoir d'abord pour le téléphone, puis à enrichir vers les grands écrans. Elle force à hiérarchiser : sur 375 pixels de large, il faut choisir ce qui compte vraiment.

Planche d'images, de couleurs et de références qui donne à voir une direction avant tout dessin. Elle évite le malentendu coûteux : s'accorder sur « épuré » en pointant des images plutôt que des adjectifs.

Design du mouvement : animer formes, textes ou illustrations pour raconter ce qu'une image fixe ne dirait pas aussi bien. À distinguer des animations d'interface, qui réagissent aux gestes du visiteur.

Approche qui permet de construire des sites et des outils sans écrire de code, via des interfaces visuelles comme Webflow. Elle réduit les délais et les budgets, tout en restant évolutive quand le projet grandit.

Portrait-type d'un utilisateur représentatif, construit sur des entretiens et des données réelles. Il tranche les débats : on ne discute plus de ce qu'« on » préfère, mais de ce dont ce lecteur a besoin.

Intégration fidèle à la maquette au détail près : mêmes espacements, mêmes graisses, mêmes alignements. L'exigence porte sur la fidélité, pas sur la rigidité | le site reste fluide et s'adapte à l'écran.

Document fondateur qui pose ce qu'est une marque avant de dire à quoi elle ressemble : raison d'être, valeurs, promesse, ton. Elle précède la charte graphique, qui n'en est que la traduction visuelle.

Format ouvert qui décrit du texte mis en forme sous forme de données plutôt que de HTML. Chaque paragraphe, chaque titre et chaque bloc sur mesure devient un objet avec son type et ses champs.

C'est le format de rich text de Sanity. Comme le contenu n'est pas stocké en HTML, le même texte peut être rendu en pages sur un site, en composants dans une application ou en texte brut pour un export, sans jamais être réécrit.

Version cliquable d'une maquette, où les écrans s'enchaînent sans une ligne de code. C'est le moyen le moins cher de découvrir qu'un parcours ne fonctionne pas : une heure à corriger, contre dix ensuite.

Phase de vérification entre la production et la mise en ligne : on parcourt le site écran par écran et on consigne chaque écart. Chaque point devient un ticket, corrigé puis validé avant le départ.

C'est le moment où les corrections coûtent encore peu, et c'est la traçabilité qui distingue un vrai recettage d'un simple coup d'œil : chaque écart relevé se retrouve, se corrige et se revalide.

Instruction signalant qu'une page a changé d'adresse définitivement. Les moteurs transfèrent alors à la nouvelle l'ancienneté acquise par l'ancienne : c'est la pièce maîtresse de toute refonte.

Sans plan de redirections, un site qui change d'adresses repart de zéro aux yeux de Google et perd d'un coup des années de positions. C'est la première chose à cadrer avant une refonte, pas la dernière.

Un site responsive adapte automatiquement sa mise en page à la taille de l'écran : mobile, tablette ou desktop. C'est un standard incontournable, plus de la moitié du trafic web étant mobile.

Champ de contenu qui accepte du texte mis en forme plutôt qu'une simple ligne de caractères : des paragraphes, des titres, des listes, du gras, des liens. C'est le champ dans lequel on rédige un article ou une page depuis un CMS.

Selon le CMS, le rich text est soit un jeu de blocs fixé par l'outil, soit une liste définie par le projet. Dans le second cas, un tableau, une checklist ou une démo interactive s'insèrent dans le contenu au même niveau qu'un paragraphe, sans quitter la zone de rédaction.

Capacité d'un site à encaisser la croissance sans être reconstruit : dix fois plus de trafic, ou un pic soudain après une campagne. Elle se joue à la conception, presque jamais après coup.

Tout se décide dans l'architecture et l'hébergement, au début du projet. Un site pensé scalable coûte à peine plus cher à construire ; le rendre scalable après coup revient souvent à le refaire.

Search Engine Optimization : l'ensemble des techniques qui améliorent la visibilité d'un site dans les résultats de recherche. Structure, contenu, performance et liens entrants sont ses quatre piliers.

Search Engine Results Page : la page de résultats d'une recherche, où cohabitent liens, annonces, extraits enrichis et réponses IA. « Être premier » y veut dire de moins en moins de choses.

Plan du site : la liste organisée de toutes ses pages. Sous forme XML, il guide les moteurs de recherche dans leur exploration ; sous forme visuelle, il aide à structurer l'arborescence en amont du design.

L'ensemble des technologies retenues pour un projet : langage, framework, CMS, hébergement. Ce choix détermine qui pourra reprendre le site, à quelle vitesse il évoluera et ce qu'il coûtera à maintenir.

C'est une décision qui engage bien au-delà de la mise en ligne, et qui se prend en fonction du projet plutôt que des modes : les outils doivent servir le site, pas l'inverse.

Page de référence qui rassemble tous les éléments visuels d'un site : couleurs, typographies, boutons, composants et leurs variantes. Véritable vitrine du design system, il sert de contrat entre design et développement et garantit la cohérence du site au fil des évolutions.

Format d'image vectorielle : le fichier décrit des formes plutôt que des pixels, ce qui le garde net à toute taille. Son poids dépend de la complexité du dessin, jamais des dimensions d'affichage.

C'est le format des logos, icônes et pictogrammes. Comme un SVG est du texte, il s'ouvre dans un éditeur de code, se relit dans un diff et peut hériter de la couleur définie en CSS plutôt que de la figer.

Manière d'écrire le code en nommant chaque élément pour ce qu'il est : un titre comme un titre, une navigation comme une navigation. Invisible à l'écran, décisive pour les lecteurs d'écran et les moteurs.

Tierce Maintenance Applicative : l'accompagnement après livraison, entre corrections, évolutions et mises à jour de sécurité. Un site n'est pas figé, et c'est ce qui l'empêche de se dégrader en silence.

Les navigateurs changent, les besoins évoluent, des failles apparaissent : un site laissé sans suivi ne tombe pas d'un coup, il se dégrade lentement, et personne ne s'en aperçoit avant que ça coûte cher.

Le chemin d'un visiteur entre son arrivée et l'action visée : devis, achat, inscription. Aussi appelé funnel, il se rétrécit à chaque étape, et mesurer ces paliers montre où les gens abandonnent.

User Interface : tout ce que le visiteur voit et manipule, des couleurs et typographies aux boutons et espacements. Elle décide de la première impression, mais ne rattrapera jamais un parcours mal pensé.

Schéma du parcours suivi pour accomplir une tâche : trouver une information, demander un devis, commander. Le dessiner avant les maquettes révèle les impasses quand elles ne coûtent qu'un trait de crayon.

User Experience : la façon dont une personne vit son passage sur le site. Elle se joue avant les couleurs, dans l'arborescence et les parcours | un site peut être très beau et très pénible à utiliser.

Notification qu'un service envoie de lui-même dès qu'un événement survient, là où une API attend d'être interrogée. C'est ce qui déclenche les automatisations en temps réel, sans délai ni vérification.

Concrètement : un formulaire validé qui pousse le contact dans le CRM à la seconde, ou un article publié qui reconstruit le site tout seul. Sans webhook, il faudrait interroger le service en boucle.

Format d'image créé par Google qui remplace le JPEG et le PNG : à qualité équivalente, il pèse 25 à 35 % de moins. Il gère la transparence et l'animation, et tous les navigateurs actuels le lisent.

Squelette simplifié d'une page, en niveaux de gris, qui pose la hiérarchie de l'information et les parcours utilisateurs avant tout travail graphique. Il permet de valider la structure sans se laisser distraire par l'esthétique.