WYSIWYG (What You See Is What You Get)

Was ist WYSIWYG?

WYSIWYG ist ein Akronym für den englischen Satz „What You See Is What You Get“ (deutsch: „Was du siehst, ist das, was du bekommst“). Es bezeichnet eine Benutzeroberfläche in Softwareprogrammen, bei der der Inhalt während der Bearbeitung auf dem Bildschirm genau so aussieht wie im fertigen Endprodukt (z. B. auf dem ausgedruckten Papier, als PDF oder als veröffentlichte Webseite).

 

Das Ziel von WYSIWYG ist es, die technische Komplexität der zugrundeliegenden Codesprache (wie HTML, LaTeX oder Programmiersprachen) vor dem Nutzer zu verbergen. Statt Befehle wie <b>Fett</b> oder \textbf{Fett} einzutippen, klickt der Nutzer einfach auf ein „Fett“-Symbol in einer Symbolleiste, und der Text wird sofort visuell fett dargestellt.

 

Der Begriff steht im Gegensatz zu WYSIAYG („What You See Is All You Got“ – oft bei einfachen Texteditoren) oder reinen Code-Editoren, bei denen man den Rohcode sieht und das Ergebnis erst nach einem Kompilierungs- oder Vorschau-Schritt beurteilen kann.

 

Funktionsprinzip

In einem WYSIWYG-Editor läuft im Hintergrund ein automatischer Übersetzungsprozess:

 
  1. Eingabe: Der Nutzer formatiert Text, fügt Bilder ein oder ändert Layouts über grafische Symbole und Menüs.
  2. Interpretation: Die Software übersetzt diese Aktionen in Echtzeit in den entsprechenden Quellcode (z. B. HTML-Tags, CSS-Stile oder Druckbefehle).
  3. Darstellung: Der Editor rendert (berechnet) diesen Code sofort so, dass er das finale Ergebnis simuliert.
  4. Ausgabe: Beim Speichern oder Drucken wird der generierte Code verwendet, der exakt dem entspricht, was der Nutzer auf dem Bildschirm gesehen hat.
 

Anwendungsbereiche

1. Textverarbeitung (Word Processing)

Dies ist der bekannteste Bereich. Programme wie Microsoft Word, Google Docs, LibreOffice Writer oder Apple Pages sind klassische WYSIWYG-Editoren.

  • Früher: Nutzer mussten in Systemen wie WordPerfect oder LaTeX Befehle eingeben, um Seitenränder oder Schriftarten zu definieren.
  • Heute: Der Nutzer sieht das Blatt Papier virtuell auf dem Monitor, inklusive Schriftart, Größe, Bildern und Seitenumbrüchen.
 

2. Webdesign und Content Management Systeme (CMS)

Im Bereich der Webseiten-Erstellung spielen WYSIWYG-Editoren (oft auch Rich Text Editors genannt) eine zentrale Rolle.

  • CMS: Plattformen wie WordPress, Joomla oder TYPO3 nutzen WYSIWYG-Editoren (z. B. TinyMCE, CKEditor), damit Redakteure Artikel schreiben können, ohne HTML zu können.
  • Website-Baukästen: Dienste wie Wix, Squarespace oder Jimdo basieren komplett auf dem WYSIWYG-Prinzip. Der Nutzer zieht Elemente per Drag-and-Drop an die richtige Stelle, und das System generiert den Code im Hintergrund.
  • Vorteil: Demokratisierung des Webs – jeder kann eine Seite erstellen.
  • Nachteil: Der automatisch generierte Code ist oft „aufgebläht“ (Code-Bloat), weniger sauber und für Suchmaschinen (SEO) manchmal suboptimal im Vergleich zu handgeschriebenem Code.
 

3. Desktop Publishing (DTP)

Programme wie Adobe InDesign oder QuarkXPress nutzen WYSIWYG, um komplexe Layouts für Printmedien (Magazine, Broschüren) zu erstellen. Hier ist die Übereinstimmung zwischen Bildschirm und Druckergebnis (Farbgenauigkeit, Beschnitt) kritisch.

 

4. E-Mail-Clients

Moderne E-Mail-Programme (Outlook, Gmail, Apple Mail) ermöglichen das Formatieren von Nachrichten (Fett, Kursiv, Farben, eingebettete Bilder) via WYSIWYG, statt reinen Text zu versenden.

 

Vor- und Nachteile

Vorteile

  • Benutzerfreundlichkeit: Keine Lernkurve für Programmiersprachen oder Auszeichnungssprachen (Markup Languages). Ideal für Einsteiger.
  • Effizienz: Schnelles Arbeiten durch visuelle Kontrolle; man sieht Fehler im Layout sofort.
  • Fokus auf Inhalt: Der Nutzer kann sich auf den Text und das Design konzentrieren, ohne von technischem Syntax-Ballast abgelenkt zu werden.
  • Zugänglichkeit: Ermöglicht Menschen ohne technisches Hintergrundwissen die Erstellung professionell aussehender Dokumente und Webseiten.
 

Nachteile

  • Code-Qualität: Automatisch generierter Code ist oft redundant, unnötig komplex oder enthält veraltete Tags. Dies kann die Ladezeit von Webseiten erhöhen.
  • Eingeschränkte Flexibilität: Bestimmte, sehr spezifische oder komplexe Formatierungen lassen sich über die grafische Oberfläche oft nicht umsetzen. Hier muss man doch wieder in den „Code-Modus“ wechseln.
  • Plattformabhängigkeit: Was auf einem Bildschirm (z. B. Windows/Chrome) perfekt aussieht, kann auf einem anderen (z. B. Mobile/Safari) leicht abweichen, da der Editor nur eine Simulation ist.
  • „Hidden“ Commands: Nutzer verstehen oft nicht, was im Hintergrund passiert, und können Fehler im Code nicht selbst diagnostizieren oder reparieren.
 

Geschichte

Der Begriff wurde in den 1970er Jahren geprägt. Ein Pionier war das Bravo-Textverarbeitungssystem am Xerox PARC (1974), das als erstes WYSIWYG-Funktionen auf einem Bitmap-Display zeigte. Bevor es WYSIWYG gab, arbeiteten Nutzer mit „Command-Line“-Editoren, bei denen Formatierungsbefehle als Text im Dokument sichtbar waren (z. B. .bp für Seitenumbruch), und das Ergebnis sah man erst nach dem Drucken oder einem speziellen Kompilierungsschritt.

 

Mit dem Aufkommen des Apple Macintosh (1984) und später Microsoft Windows wurde WYSIWYG zum Standard für persönliche Computer und revolutionierte die Büroarbeit und den Verlagssektor.

 

Fazit

WYSIWYG ist eine der wichtigsten Erfindungen im Bereich der Human-Computer Interaction. Es hat die Hürde zur digitalen Inhaltserstellung massiv gesenkt und dazu beigetragen, dass Computer nicht nur Werkzeuge für Experten, sondern für die breite Masse wurden. Ob beim Schreiben einer Hausarbeit, dem Designen einer Einladung oder dem Publizieren eines Blogartikels – WYSIWYG sorgt dafür, dass das Ergebnis auf dem Bildschirm der Realität entspricht. Trotz der Nachteile bei der Code-Effizienz im Webbereich bleibt es der dominierende Standard für die Erstellung visueller Inhalte.

Kontakt

Adresse
PHNETZ Internetagentur
Peter Höppner
Robert‑Bosch‑Straße 8
86551 Aichach

Telefon
📞 +49 (0)8251 8628574

E‑Mail
✉️ service@phnetz.de