WYSIWYG: Ich sehe was, was du auch siehst

Hinter dem Akronym WYSIWYG steckt der Ausdruck „What you see is what you get“, also: Was du siehst, ist das, was du bekommst. Als Prinzip verschiedener Editoren scheiden sich daran die Geister. Ist es eine gute Idee, nur oberflächlich an Texten und Websites zu arbeiten und die Programme den entsprechenden Code im Hintergrund selbst schreiben zu lassen? Wir beleuchten Vor- und Nachteile der Idee und stellen die bekanntesten WYSIWYG-HTML-Editoren vor.

Die etwas verwirrende Buchstabenfolge meint – ganz einfach gesprochen –, dass der Text so, wie er im Editor erscheint, auch im Endprodukt dargestellt wird. Diese Tatsache ist für die meisten Nutzer, wenn sie z. B. nur Word als Textverarbeitungsprogramm kennen, gar nicht anders vorstellbar. Denn bei der populären Software von Microsoft handelt es sich um genau solch einen WYSIWYG-Editor. So wie Sie dort einen Text eingeben, inklusive der Schriftart, Fettdruck, Absätzen usw. gibt auch Ihr Drucker das Dokument aus. Wenn Sie in Ihrem Text z. B. ein bestimmtes Wort kursiv setzen möchten, markieren Sie es und klicken dann auf den entsprechenden Button.

Eigentlich ist ein solcher Text jedoch als Code zu verstehen. Ohne ein Programm wie Word würden Sie in Ihren Text eine Markierung eintragen (z. B. „<kursiv>Wort</kursiv>“), die das Endgerät interpretiert und umsetzt. Dieses Endgerät wäre in unserem Beispiel der Drucker. Aber auch die Umwandlung des Word-Dokuments in eine PDF-Datei oder die Darstellung des Dokuments in einem Browser kann man als Ausgabe – also eine digitale Publikation – ansehen. Für HTML-Editoren spielt die Frage, ob WYSIWYG oder nicht, eine wichtige Rolle. Bevor es aber in die Details geht, ist es sinnvoll, die Geschichte dieser Editoren kurz zu beleuchten.

Vor dem Computerzeitalter war im Grunde genommen alles WYSIWYG, da keine Kompilierung notwendig war: Wenn man auf ein Blatt Papier schreibt oder eine Schreibmaschine benutzt, erhält man ein konkretes Ergebnis. Erst durch die Entwicklung von Computern und Schreibprogrammen wurde es nötig, sich damit zu beschäftigen, wie das, was der Nutzer auf dem Bildschirm eingibt, beim Drucken aussehen wird. Nachdem Lochkarten zur Programmierung nicht mehr ausreichten, benötigten Software-Entwickler und Wissenschaftler eine andere Möglichkeit, Code einzugeben: einen Texteditor. Die ersten Textverarbeitungsprogramme waren deshalb Editoren für Programmierer. Die Zeichenfolgen, die man in diese Programme eingegeben hat, waren aber niemals dafür gedacht, als Dokument ausgegeben zu werden.

Eines der ersten Textverarbeitungsprogramme war WordStar, das 1978 erschien und mit dem Autor George R. R. Martin auch heute noch einen prominenten Anwender hat. WordStar lief ursprünglich auf dem Betriebssystem CP/M und hatte nur wenige Funktionen. In der ersten Version mussten Schreibende noch mit Markierungen für den Drucksatz arbeiten. Doch das Programm war – so die allgemeine Meinung – der erste WYSIWYG-Editor. Hiermit war es möglich, einen Text kursiv oder fett zu setzen und das Ergebnis direkt auf dem Monitor zu sehen. Problematisch war zum damaligen Zeitpunkt, dass die grafischen Kapazitäten der Computer nicht so weit fortgeschritten waren: Die Computersysteme konnten noch keine authentische Abbildung eines Druckerzeugnisses auf dem Monitor darstellen.

Mit den zunehmenden Möglichkeiten von PC- und Mac-Systemen ließ sich auch Text in all seinen gestalterischen Facetten immer besser auf dem Monitor darstellen. Aber bei der Textverarbeitung hört das Prinzip von WYSIWYG nicht auf: Besonders bei der Erstellung von Websites spielen Editoren, die schon bei der Eingabe die Ausgabe darstellen, eine große Rolle. Die meisten Internetauftritte sind in der Hypertext Markup Language (HTML) geschrieben. Wie bei Auszeichnungs- und Programmiersprachen allgemein muss der Code zunächst kompiliert werden, ehe das Ergebnis sichtbar wird.

Wer also eine Website per HTML erstellt, muss die spätere Ausgabe bereits vor Augen haben. Deshalb setzen sich zunehmend WYSIWYG-HTML-Editoren durch, die diese Arbeit erleichtern. Der erste seiner Art war 1995 WebMagic von Silicon Graphics. In den beiden darauffolgenden Jahren kamen die bekannten Editoren FrontPage von Microsoft (inzwischen nicht mehr angeboten) und Dreamweaver von Macromedia (heute Teil von Adobe) dazu. Die Nachfrage nach guten Editoren ist groß, doch was muss solch eine Software können?

Ein WYSIWYG-Editor für das Erstellen von Websites sollte es auch Anwendern ohne umfangreiche HTML-Kenntnisse ermöglichen, eine Internetseite zu kreieren. Bei einem solchen Programm geben Nutzer den Code nicht per Hand ein, sondern verwenden dazu Funktionen der Software, die diese – quasi im Hintergrund – in HTML-Code umsetzt.

• Schriftart: In den Gründungsjahren des Webs waren die Möglichkeiten zum Einsatz verschiedener Schriftarten noch stark beschränkt. Außer Times New Roman, Verdana und Arial, die auf den meisten Computern installiert waren, konnten Webdesigner keine anderen Fonts einsetzen. Schließlich durfte man nicht davon ausgehen, dass die Browser der Website-Besucher diese auch anzeigen konnten. Inzwischen ist dieses Problem weitaus weniger relevant. In einem WYSIWYG-HTML-Editor können Nutzer aus vielen Schriftarten auswählen.

• Schriftauszeichnung: Auszeichnungen für den Text sind z. B. kursiv, fett, unterstrichen, durchgestrichen oder Kapitälchen. Bei einem entsprechenden WYSIWYG-Editor, egal ob für die Erstellung von HTML-Code oder zur Textverarbeitung, müssen die Nutzer die Markierungen nicht manuell vornehmen, sondern können den jeweiligen Textteil per Knopfdruck editieren.

• Layout: Satzspiegel und Weißraum machen einen großen und wichtigen Teil der Erscheinung einer Website aus. Durch die Positionierung von Inhalten lenken Webdesigner die Aufmerksamkeit des Besuchers und geben der Webseite einen bestimmten Stil. Ohne die Möglichkeiten von WYSIWYG müssten Programmierer Weißraum, also den Bereich, der nicht mit Inhalten gefüllt ist, pixelgenau angeben.

• Gliederung: Ähnlich wie gedruckte Texte müssen Inhalte auf einer Website gegliedert sein, damit Besucher sich in diesen zurechtfinden. Durch (Zwischen-)Überschriften, die man in WYSIWYG-Editoren leicht setzen kann, werden Leser besser durch den Text geführt.

• Tabellen: Mit Listen und Tabellen lassen sich Webinhalte aufwerten. Mit einer Software, die WYSIWYG unterstützt, können Webdesigner die Elemente direkt einfügen und müssen diese nicht umständlich in Form eines Codes eingeben.

• Medien: Websites bestehen nicht nur aus Text. Videos, Bilder und andere grafische Elemente machen einen großen Teil des World Wide Web aus. Damit auch diese Inhalte angezeigt werden, müssen Website-Ersteller sie in den HTML-Code einbetten. Ein WYSIWYG-HTML-Editor übernimmt dies automatisch. Meist können Nutzer die entsprechenden Objekte sogar per Drag-and-Drop an die gewünschten Stellen ziehen.

Über die Gestaltung der Inhalte hinaus haben Editoren, die WYSIWYG unterstützen, noch weitere Funktionen: Oft ist es z. B. direkt über den Editor möglich, Inhalte auf dem eigenen Internetauftritt zu veröffentlichen. Viele HTML-Editoren helfen den Nutzern auch bei der Projektorganisation: Sie stellen z. B. die Unterseiten der Website gut sichtbar in einer Seitenleiste dar. Darüber hinaus ist es sinnvoll, wenn man innerhalb des Editors zwischen der WYSIWYG- und der Code-Ansicht wechseln kann. Denn so komfortabel das Prinzip von „Was du siehst, ist das, was du bekommst“ auch ist: Den Programmen sind Grenzen gesetzt und Fehler können entstehen, ohne dass man die Ursache kennt.

Zunächst scheinen WYSIWYG-Editoren die perfekte Lösung zu sein: Auch ohne HTML- oder Programmierkenntnisse lassen sich am Computer (Web-)Dokumente erzeugen, die zur Veröffentlichung taugen. Aber aus verschiedenen Gründen greifen manche Nutzer doch lieber zu einem Editor wie Notepad++, bei dem sie den Code direkt eingeben müssen. Denn so haben sie die komplette Kontrolle darüber, wie das Endergebnis aussehen wird. Auch abseits von HTML trifft das zu: Wer schon mal bei der Gestaltung eines Briefes in Word am Rande der Verzweiflung war, weiß, was damit gemeint ist. Das Programm unternimmt Formatierungen, die man als Nutzer nur beeinflussen kann, wenn man sich durch zahlreiche Fenster und Menüs wühlt.

Bei der Eingabe von HTML-Code oder anderen Auszeichnungssprachen ist das nicht der Fall: Ersteller sehen hier genau vor sich, was mit dem Text bei der Kompilierung passieren soll. Deshalb verwenden einige Nutzer zur Erstellung von Texten für Druckerzeugnisse oder PDF-Dateien die Makrosprache TeX bzw. das darauf basierende Software-Paket LaTeX. Ursprünglich für wissenschaftliche Arbeiten entwickelt, erlaubt es TeX, genaue Formatierungsvorgaben einzuhalten und mathematische wie naturwissenschaftliche Formeln besser in den Fließtext einzufügen.

Hinzu kommt ein internetspezifisches Problem: Auch bei WYSIWYG ist nicht zwangsläufig gegeben, dass das Ergebnis wirklich so aussieht, wie es dem Webdesigner auf dem Monitor angezeigt wird. Denn das eine Endergebnis gibt es im World Wide Web nicht. Verschiedene Systeme und unterschiedliche Browser geben Inhalte mitunter anders aus, hinzu kommen mobile Endgeräte, die wieder andere Darstellungsarten haben. Deshalb ist das Versprechen „What you see is what you get“ zumindest in Bezug auf Websites ein leeres. Webdesigner testen darum für gewöhnlich ihre Seiten erst auf unterschiedlichen Systemen, bevor sie ihre Ergebnisse online stellen.

WYSIWYG-Editoren erstellen im Hintergrund einen HTML-Code. Man kann aber nicht immer davon ausgehen, dass der so entstandene Code auch unter professionellen Aspekten sinnvoll ist. In der Vergangenheit haben Webdesigner immer wieder kritisiert, dass diese Programme Quellcode produzieren, der unnötig aufgeblasen oder fehlerhaft ist. Dies führe zu langen Ladezeiten und Fehlanzeigen.

Dennoch ist es nicht grundsätzlich verkehrt, auf einen WYSIWYG-Editor zu setzen. Gerade Anfänger können so bereits eigene – wenn auch einfache – Websites kreieren. Diese Programme sind die bekanntesten:

Macromedia hat Dreamweaver bereits im Jahr 1997 (damals noch ausschließlich für Mac OS) auf den Markt gebracht. Inzwischen hat der Software-Riese Adobe Macromedia aufgekauft und führt die Entwicklung von Dreamweaver – ebenso wie von Flash, einem weiteren Projekt von Macromedia – weiter. Der Editor ist sowohl im WYSIWYG- als auch im Code-Modus verwendbar. Beide Ansichten lassen sich auch nebeneinander anzeigen, so dass Änderungen im Code direkt in der Vorschau sichtbar werden und umgekehrt. Die Vorschau funktioniert sogar mit verschiedenen Browsern und auf mobilen Geräten. Letztere lassen sich über einen QR-Code mit dem Projekt verbinden. Mit einer integrierten Publishing-Funktion können Nutzer die erstellten Inhalte auch direkt auf ihre Server verschieben und so online stellen. Dreamweaver ist Teil der Creative Cloud und kann deshalb abonniert werden.

Mit SeaMonkey holen sich Nutzer eine komplette Internetsuite auf den Computer. Neben Browser, E-Mail- und IRC-Clients und einem Adressbuch ist mit dem SeaMonkey Composer auch ein eigener HTML-Editor integriert. Das Anwendungspaket ist aus der inzwischen eingestellten Mozilla Application Suite hervorgegangen – die Entwickler stehen aber noch immer in enger Verbindung mit der Mozilla Foundation. Der Composer ist wie die komplette Suite sehr einfach gehalten und eignet sich deshalb in erster Linie für unkomplizierte Website-Projekte. Man kann zwischen einer HTML- und der WYSIWYG-Ansicht wechseln – viel mehr kann das kleine, kostenlose Programm nicht. Besonders für Puristen ist dieser Editor aber interessant.

Auch der KompoZer ist aus dem Umfeld von Mozilla heraus entstanden. Wie bei SeaMonkey ist der Aufbau dieses WYSIWYG-HTML-Editors sehr schlicht gehalten. Nutzer können zwischen der grafischen Darstellung und dem Quelltext wechseln. Nützliche Features sind z. B. der Formular-Assistent, ein CSS-Editor, ein FTP-Site-Manager, mit dem Nutzer ihre Projekte hochladen können, sowie ein Markup-Cleaner, der den geschriebenen Code nach überflüssigen Zeilenwechseln durchsucht und die komplette Website auf W3C-Konformität überprüft. KompoZer wird derzeit, genau wie SeaMonkey, nicht weiterentwickelt. Das Projekt wurde unter verschiedenen Open-Source-Lizenzen veröffentlicht.

Die Weiterentwicklung des KompoZer nennt sich BlueGriffon und wartet mit mehr Features auf. So kann man sich wie bei Dreamweaver beide Ansichten parallel anzeigen lassen. In der kostenpflichtigen Version (es gibt auch eine abgespeckte, kostenlose Ausgabe) ist zudem ein EPUB-Editor enthalten. Hiermit lassen sich eBooks erstellen. Ab der Basic License stehen den Nutzern zudem ungefähr 2.500 Templates zur Verfügung, die den Aufbau einer eigenen Website erleichtern.

Brackets wird von Adobe vertrieben, ist aber im Gegensatz zu Dreamweaver als Open Source und kostenlos erhältlich. Brackets ist in erster Linie ein Texteditor und kein WYSIWYG-Editor. Mit der Vorschaufunktion geht das Programm dennoch in die Richtung einer grafischen Bearbeitungssoftware. Alle Veränderungen werden in Echtzeit in einem Browserfenster angezeigt. Der einzige Nachteil ist, dass dies nur mit Google Chrome funktioniert. Wie andere Webbrowser die Website darstellen, kann man nur nachträglich überprüfen. Eine weitere nützliche Funktion: CSS-Dateien lassen sich direkt über den Code an den entsprechenden Stellen öffnen und dort bearbeiten – das beschleunigt das Schreiben des Codes, da Webdesigner nicht zwischen verschiedenen Dateien hin und her wechseln müssen. Auch diese Änderungen werden direkt in der Live-Vorschau angezeigt. Inzwischen haben Entwickler bereits hunderte Erweiterungen für Brackets bereitgestellt. Hierzu gehören teilweise rein optische Anpassungen der Benutzeroberfläche, aber auch nützliche Tools zur Autovervollständigung oder zum Debuggen.

Die erste Version von NetObjects Fusion ist bereits 1996 erschienen, entwickelt von ehemaligen Mitarbeitern von Apple. Das WYSIWYG-Prinzip, das von NetObjects vertreten wird, erinnert sogar stärker an ein Desktop-Publishing-Programm als an einen typischen HTML-Editor. Benutzer der Software arrangieren Website-Elemente durch Drag-and-Drop pixelgenau. Dadurch sind überhaupt keine HTML-Kenntnisse notwendig. Erfahrene Webdesigner haben aber die Möglichkeit, in den Quelltext umzuschalten, um Änderungen direkt im HTML-Code vorzunehmen. Ein weitere Besonderheit ist die Projektmanagement-Ansicht: Hier wird die Navigation der Website bestimmt. In Form eines Baumdiagramms ordnen Nutzer die einzelnen Unterseiten und deren Verknüpfungen untereinander an. NetObjects Fusion ist kostenpflichtig und wird nur für Windows angeboten. Die kostenlose Version – Essentials – richtet sich vor allem an Privatanwender.

openElement ist ein weiterer kostenfreier WSYIWYG-HTML-Editor. Dieser basiert allerdings auf dem Chromium-Code, der auch Googles Chrome-Browser zugrunde liegt. Auch hier funktioniert der Bau einer Website durch das Einfügen und Verschieben von Elementen in einer grafischen Ansicht. Während man den Bearbeitungsbereich in der Mitte vorfindet, sind die verfügbaren Elemente rechts in einer Seitenleiste angeordnet. So können Nutzer die gewünschten Objekte einfach in den WYSIWYG-Editor ziehen. Die einzelnen Seiten des Projekts findet man im Site Explorer oder, wenn geöffnet, als Tabs über dem Bearbeitungsbereich, damit man schnell von einer Seite zur nächsten wechseln kann. Bei jeder Unterseite können Webdesigner sich zudem den Quellcode anzeigen lassen, um Änderungen direkt dort vorzunehmen. Das Programm ist sowohl kostenlos als auch unter einer Open-Source-Lizenz, aber bisher nur für Windows verfügbar.

Auch für den kostenlosen WYSIWYG-HTML-Editor RocketCake benötigen Nutzer prinzipiell keine HTML- oder CSS-Kenntnisse. Im Aufbau ähnelt dieser Editor dem Konkurrenten openElement: In der Mitte befindet sich der Bearbeitungsbereich, links und rechts eine Liste der Website-Elemente sowie die Dateinavigation. Das besondere Feature des Programms: Es ermöglicht die einfache Erstellung von responsiven Websites für mobile Geräte. Dafür ist u. a. der Breakpoint Editor zuständig: Hiermit legen Webdesigner Punkte im CSS fest, an denen sich bei unterschiedlichen Displaygrößen das Layout ändert. Selbstverständlich ist es auch bei RocketCake möglich, den Code direkt zu bearbeiten.

TOWeb von Lauyan Software verfolgt den gleichen WYSIWYG-Ansatz wie RocketCake. Die beiden Programme teilen sich insbesondere den Fokus aufs Responsive Design. Hinzu kommt bei TOWeb der einfache Bau eines eigenen Online-Shops sowie Unterstützung bei der Suchmaschinenoptimierung. Letzteres schafft die Software, indem sie Alt-Tags und Meta-Titel zur Bearbeitung bereitstellt sowie einen W3C-konformen HTML-Code erzeugt. Bei der Publishing-Funktion können Nutzer sogar aus vorgefertigten Hosting-Diensten auswählen und damit den Upload vereinfachen – was besonders für Anfänger interessant sein dürfte. TOWeb ist ein kostenpflichtiges Angebot. Wer sich jedoch auf eine Website beschränken möchte, kann das Programm auch kostenlos nutzen. Für jedes weitere Projekt (und vor allem für die E-Commerce-Lösungen) ist der Kauf eines der drei Pakete obligatorisch.

Editoren, die den eigentlichen Code im Hintergrund verstecken, machen es möglich, sich komplett auf das Design zu konzentrieren. Deshalb sind WYSIWYG-Editoren, egal ob es sich um Textverarbeitungen oder HTML-Editoren handelt, für Anwender interessant, die vom Aussehen des Endprodukts ausgehen. Diese sind in vielen Fällen sicherlich Anfänger, aber auch für Mediengestalter dürfte dieser Ansatz gewinnbringend sein. Statt sich um die Feinheiten einzelner Markierungen zu kümmern, kann man sich voll auf Layout und Inhalte konzentrieren. Dies hat aber – wie gezeigt – Nachteile: Wer über die vorgesehenen Design-Funktionen des jeweiligen Editors hinaus Veränderungen vornehmen möchte, trifft auf eine Grenze des WYSIWYG-Prinzips und muss doch selbst in den Quellcode eingreifen. Nur dann haben Nutzer wirklich die volle Kontrolle über das Endergebnis.