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-Editoren vor.

Was genau bedeutet WYSIWYG?

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 Nutzerinnen und 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.

Funktionen von WYSIWYG-HTML-Editoren

Ein WYSIWYG-Editor für das Erstellen von Websites sollte es auch Anwendenden ohne umfangreiche HTML-Kenntnisse ermöglichen, eine Internetseite zu kreieren. Bei einem solchen Programm geben Sie 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 Webdesignerinnen und Webdesigner keine anderen Fonts einsetzen. Schließlich durfte man nicht davon ausgehen, dass die Browser der Website-Besuchende 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 Nutzenden 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 Webdesignende die Aufmerksamkeit des Besuchers und geben der Webseite einen bestimmten Stil. Ohne die Möglichkeiten von WYSIWYG müssten Programmiererinnen und 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 Besuchende 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 Webdesignende 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-Erstellende sie in den HTML-Code einbetten. Ein WYSIWYG-HTML-Editor übernimmt dies automatisch. Meist können Nutzerinnen und 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 Nutzenden 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.

WYSIWYG-Editoren für HTML

Auf einen WYSIWYG-HTML-Editor zu setzen, zahlt sich in vielen Situationen aus. Gerade Anfängerinnen und Anfänger können so bereits eigene – wenn auch einfache – Websites kreieren. In den nachfolgenden Abschnitten haben wir einige der bekanntesten Programme für Sie zusammengefasst.

Dreamweaver

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.

SeaMonkey Composer

Mit SeaMonkey holen sich Nutzende 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.

KompoZer

Auch der KompoZer ist aus dem Umfeld von Mozilla heraus entstanden. Wie bei SeaMonkey ist der Aufbau dieses WYSIWYG-HTML-Editors sehr schlicht gehalten.

Brackets

Brackets wird von Adobe vertrieben, ist aber im Gegensatz zu Dreamweaver 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.

NetObjects Fusion

Die erste Version von NetObjects Fusion ist bereits 1996 erschienen, entwickelt von ehemaligen Mitarbeitenden von Apple. Das WYSIWYG-Prinzip, das von NetObjects Fusion vertreten wird, erinnert sogar stärker an ein Desktop-Publishing-Programm als an einen typischen HTML-Editor. Benutzende der Software arrangieren Website-Elemente durch Drag-and-Drop pixelgenau.

openElement

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.

RocketCake

Auch für den kostenlosen WYSIWYG-HTML-Editor RocketCake benötigen Nutzerinnen und 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

TOWeb von Lauyan Software verfolgt den gleichen WYSIWYG-Ansatz wie RocketCake. Die beiden Programme teilen sich insbesondere den Fokus aufs Responsive Design.

Nachteile der WYSIWYG-Idee

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 Nutzerinnen und Nutzer doch lieber zu einem Editor wie Notepad++, bei dem sie den Code direkt eingeben müssen.

• Mangelnde Kontrolle: WYSIWYG-Editoren unternehmen Formatierungen, die man als Nutzerin oder 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: Erstellende sehen hier genau vor sich, was mit dem Text bei der Kompilierung passieren soll. Deshalb verwenden einige Nutzerinnen und 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.

• Internetspezifisches Probleme und verschiedene Darstellungsarten: Auch bei WYSIWYG ist nicht zwangsläufig gegeben, dass das Ergebnis wirklich so aussieht, wie es dem Webdesignenden auf dem Monitor angezeigt wird. Denn das eine Endergebnis gibt es im World Wide Web nicht. Verschiedene Systeme und 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. Webdesignende testen darum für gewöhnlich ihre Seiten erst auf unterschiedlichen Systemen, bevor sie ihre Ergebnisse online stellen.

• Codequalität: 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 Webdesignende immer wieder kritisiert, dass diese Programme Quellcode produzieren, der unnötig aufgeblasen oder fehlerhaft ist. Dies führe zu langen Ladezeiten und Fehlanzeigen.