WYSIWYG est l’acronyme de « What You See Is What You Get » – en français : « ce que vous voyez est ce que vous obtenez ». C’est le principe derrière tous les éditeurs visuels qui permettent de modifier le contenu d’un site web comme on tape un document dans Word : on met en gras, on insère une image, on crée un lien, et le résultat s’affiche en temps réel.
C’est un terme que plus personne ne connaît alors que tout le monde utilise l’outil au quotidien. Quand vous modifiez une page sur votre site WordPress, vous utilisez un éditeur WYSIWYG. Quand vous rédigez un email dans Gmail ou Outlook, c’est un WYSIWYG aussi. Le concept est partout, mais le nom s’est perdu en route.
L’éditeur WYSIWYG est au cœur de la promesse d’accessibilité du web : permettre à un dirigeant, un assistant ou un responsable marketing de mettre à jour son site sans dépendre d’un développeur à chaque virgule. Mais cette autonomie a un revers : sans cadre, l’éditeur peut devenir le meilleur ennemi de la cohérence visuelle de votre site.
Derrière l’interface visuelle, l’éditeur WYSIWYG génère du code HTML. Quand vous mettez un mot en gras, il écrit <strong>mot</strong>. Quand vous insérez une image, il crée une balise avec un chemin, des dimensions et des attributs. Le principe est simple : vous manipulez le visuel, la machine écrit le code.
Le problème, c’est que cette traduction n’est pas toujours propre. Un test documenté a montré qu’un éditeur pouvait générer 18 200 caractères de code pour 93 caractères de contenu réel. Le copier-coller depuis Word est le pire coupable : il injecte du code propriétaire Microsoft invisible à l’écran – des styles, des balises et du formatage caché qui alourdissent la page et peuvent casser la mise en forme. Le résultat ressemble à ce que vous vouliez, mais le code en dessous est un champ de bataille. Et c’est ce code que Google lit pour référencer votre site.
Mise à jour du site par le client – c’est l’usage premier. Modifier un texte, ajouter une actualité, changer un horaire ou insérer une photo sans appeler l’agence à chaque fois. Pour une TPE qui ne dispose pas d’un service communication dédié, cette autonomie est essentielle. C’est d’ailleurs une valeur fondamentale chez MozArtsduWeb : un site doit pouvoir vivre sans dépendance technique au quotidien.
Rédaction de contenus éditoriaux – articles de blog, fiches produit, descriptions de services. L’éditeur WYSIWYG permet de structurer un texte avec des titres, des listes, des liens et des images sans toucher au code. Sur un site e-commerce, c’est ce qui permet au commerçant de rédiger ses propres fiches produit.
Emails et newsletters – les outils d’emailing comme Mailjet ou Brevo utilisent des éditeurs WYSIWYG pour composer les newsletters. Le principe est identique : construire visuellement un contenu qui sera envoyé en HTML.
L’éditeur par blocs (Gutenberg) – WordPress a fait évoluer son éditeur classique vers un système de blocs : au lieu d’un champ texte libre, le contenu est composé de blocs typés (paragraphe, image, citation, bouton). C’est un progrès qui structure mieux le contenu et limite les dérives, même si le principe WYSIWYG reste le même.
Épurer l’éditeur – un bon éditeur WYSIWYG n’est pas celui qui offre le plus de boutons, c’est celui qui n’en propose que les bons. Retirer les options de changement de police, de couleur et de taille de texte empêche la majorité des dérives visuelles. Le design est défini par la charte graphique du site, pas par l’inspiration du moment.
Ne jamais copier-coller depuis Word – c’est la règle d’or. Si vous devez récupérer un texte rédigé dans Word, passez-le d’abord par un éditeur de texte brut (Bloc-notes sur Windows, TextEdit en mode texte sur Mac) pour supprimer le formatage caché. Votre site vous remerciera.
Respecter la structure – un titre est un titre (H2, H3), pas du texte en gras et en majuscules. Une liste est une liste à puces, pas des tirets tapés à la main. Cette rigueur facilite la lecture, améliore le référencement naturel et maintient la cohérence visuelle du site.
Se former à l’outil – une heure de formation à l’éditeur au moment de la livraison du site évite des mois de corrections. Comprendre pourquoi certains boutons ont été retirés et comment utiliser ceux qui restent, c’est un investissement minime pour un résultat durable.
Le site sapin de Noël – trois polices différentes, du texte rouge sur fond jaune, des images étirées, du centrage partout : c’est ce qui arrive quand l’éditeur donne un accès total sans cadre. Chaque modification isolée semble anodine, mais l’accumulation crée un site incohérent qui nuit à la crédibilité de l’entreprise. Un éditeur bien configuré par l’agence rend ce scénario impossible.
Le faux sentiment de contrôle – ce que vous voyez dans l’éditeur n’est pas exactement ce que vos visiteurs verront. Le rendu dépend du thème, du navigateur et de l’appareil. Un texte qui semble parfait dans l’éditeur peut déborder sur mobile ou s’afficher différemment sur Chrome et Safari. Prévisualisez toujours avant de publier.
Le code invisible – l’éditeur WYSIWYG cache le HTML qu’il génère. C’est son atout pour les non-techniciens, mais c’est aussi son piège : des balises orphelines, des styles en dur et du code superflu s’accumulent sans qu’on les voie. Sur le long terme, cela alourdit les pages et peut créer des incohérences difficiles à diagnostiquer sans un développeur.
L’autonomie ne remplace pas l’accompagnement – l’éditeur WYSIWYG donne l’autonomie pour les contenus du quotidien, pas pour les modifications structurelles. Déplacer un bloc, ajouter une section ou modifier la mise en page globale : ces interventions relèvent de la maintenance professionnelle, pas de l’éditeur visuel.
