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 ver­schie­de­ner Editoren scheiden sich daran die Geister. Ist es eine gute Idee, nur ober­fläch­lich an Texten und Websites zu arbeiten und die Programme den ent­spre­chen­den Code im Hin­ter­grund selbst schreiben zu lassen? Wir be­leuch­ten Vor- und Nachteile der Idee und stellen die be­kann­tes­ten WYSIWYG-Editoren vor.

Was genau bedeutet WYSIWYG?

Die etwas ver­wir­ren­de Buch­sta­ben­fol­ge meint – ganz einfach ge­spro­chen –, dass der Text so, wie er im Editor erscheint, auch im End­pro­dukt dar­ge­stellt wird. Diese Tatsache ist für die meisten Nut­ze­rin­nen und Nutzer, wenn sie z. B. nur Word als Text­ver­ar­bei­tungs­pro­gramm kennen, gar nicht anders vor­stell­bar. 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 Schrift­art, Fettdruck, Absätzen usw. gibt auch Ihr Drucker das Dokument aus. Wenn Sie in Ihrem Text z. B. ein be­stimm­tes Wort kursiv setzen möchten, markieren Sie es und klicken dann auf den ent­spre­chen­den Button.

Ei­gent­lich ist ein solcher Text jedoch als Code zu verstehen. Ohne ein Programm wie Word würden Sie in Ihren Text eine Mar­kie­rung eintragen (z. B. <kursiv>Wort</kursiv>), die das Endgerät in­ter­pre­tiert und umsetzt. Dieses Endgerät wäre in unserem Beispiel der Drucker. Aber auch die Um­wand­lung des Word-Dokuments in eine PDF-Datei oder die Dar­stel­lung des Dokuments in einem Browser kann man als Ausgabe – also eine digitale Pu­bli­ka­ti­on – 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 Ge­schich­te dieser Editoren kurz zu be­leuch­ten.

Funk­tio­nen von WYSIWYG-HTML-Editoren

Ein WYSIWYG-Editor für das Erstellen von Websites sollte es auch An­wen­den­den ohne um­fang­rei­che HTML-Kennt­nis­se er­mög­li­chen, eine In­ter­net­sei­te zu kreieren. Bei einem solchen Programm geben Sie den Code nicht per Hand ein, sondern verwenden dazu Funk­tio­nen der Software, die diese – quasi im Hin­ter­grund – in HTML-Code umsetzt.

• Schrift­art: In den Grün­dungs­jah­ren des Webs waren die Mög­lich­kei­ten zum Einsatz ver­schie­de­ner Schrift­ar­ten noch stark be­schränkt. Außer Times New Roman, Verdana und Arial, die auf den meisten Computern in­stal­liert waren, konnten Web­de­si­gne­rin­nen und Web­de­si­gner keine anderen Fonts einsetzen. Schließ­lich durfte man nicht davon ausgehen, dass die Browser der Website-Be­su­chen­de diese auch anzeigen konnten. In­zwi­schen ist dieses Problem weitaus weniger relevant. In einem WYSIWYG-HTML-Editor können Nutzer aus vielen Schrift­ar­ten auswählen.
• Schrift­aus­zeich­nung: Aus­zeich­nun­gen für den Text sind z. B. kursiv, fett, un­ter­stri­chen, durch­ge­stri­chen oder Ka­pi­täl­chen. Bei einem ent­spre­chen­den WYSIWYG-Editor, egal ob für die Er­stel­lung von HTML-Code oder zur Text­ver­ar­bei­tung, müssen die Nutzenden die Mar­kie­run­gen nicht manuell vornehmen, sondern können den je­wei­li­gen Textteil per Knopf­druck editieren.
• Layout: Satz­spie­gel und Weißraum machen einen großen und wichtigen Teil der Er­schei­nung einer Website aus. Durch die Po­si­tio­nie­rung von Inhalten lenken Web­de­si­gnen­de die Auf­merk­sam­keit des Besuchers und geben der Webseite einen be­stimm­ten Stil. Ohne die Mög­lich­kei­ten von WYSIWYG müssten Pro­gram­mie­re­rin­nen und Pro­gram­mie­rer Weißraum, also den Bereich, der nicht mit Inhalten gefüllt ist, pi­xel­ge­nau angeben.
• Glie­de­rung: Ähnlich wie gedruckte Texte müssen Inhalte auf einer Website ge­glie­dert sein, damit Be­su­chen­de sich in diesen zu­recht­fin­den. Durch (Zwischen-)Über­schrif­ten, die man in WYSIWYG-Editoren leicht setzen kann, werden Leser besser durch den Text geführt.
• Tabellen: Mit Listen und Tabellen lassen sich Web­in­hal­te aufwerten. Mit einer Software, die WYSIWYG un­ter­stützt, können Web­de­si­gnen­de die Elemente direkt einfügen und müssen diese nicht um­ständ­lich 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-Er­stel­len­de sie in den HTML-Code einbetten. Ein WYSIWYG-HTML-Editor übernimmt dies au­to­ma­tisch. Meist können Nut­ze­rin­nen und Nutzer die ent­spre­chen­den Objekte sogar per Drag-and-Drop an die ge­wünsch­ten Stellen ziehen.

Über die Ge­stal­tung der Inhalte hinaus haben Editoren, die WYSIWYG un­ter­stüt­zen, noch weitere Funk­tio­nen: Oft ist es z. B. direkt über den Editor möglich, Inhalte auf dem eigenen In­ter­net­auf­tritt zu ver­öf­fent­li­chen. Viele HTML-Editoren helfen den Nutzenden auch bei der Pro­jekt­orga­ni­sa­ti­on: Sie stellen z. B. die Un­ter­sei­ten der Website gut sichtbar in einer Sei­ten­leis­te 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 Si­tua­tio­nen aus. Gerade An­fän­ge­rin­nen und Anfänger können so bereits eigene – wenn auch einfache – Websites kreieren. In den nach­fol­gen­den Ab­schnit­ten haben wir einige der be­kann­tes­ten Programme für Sie zu­sam­men­ge­fasst.

Dream­wea­ver

Macro­me­dia hat Dream­wea­ver bereits im Jahr 1997 (damals noch aus­schließ­lich für Mac OS) auf den Markt gebracht. In­zwi­schen hat der Software-Riese Adobe Macro­me­dia auf­ge­kauft.

SeaMonkey Composer

Mit SeaMonkey holen sich Nutzende eine komplette In­ter­net­suite auf den Computer. Neben Browser, E-Mail- und IRC-Clients und einem Adress­buch ist mit dem SeaMonkey Composer auch ein eigener HTML-Editor in­te­griert.

KompoZer

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

Brackets

Brackets wird von Adobe ver­trie­ben, ist aber im Gegensatz zu Dream­wea­ver Open Source und kostenlos er­hält­lich. Brackets ist in erster Linie ein Text­edi­tor und kein WYSIWYG-Editor. Mit der Vor­schau­funk­ti­on geht das Programm dennoch in die Richtung einer gra­fi­schen Be­ar­bei­tungs­soft­ware.

Net­Ob­jects Fusion

Die erste Version von Net­Ob­jects Fusion ist bereits 1996 er­schie­nen, ent­wi­ckelt von ehe­ma­li­gen Mit­ar­bei­ten­den von Apple. Das WYSIWYG-Prinzip, das von Net­Ob­jects Fusion vertreten wird, erinnert sogar stärker an ein Desktop-Pu­bli­shing-Programm als an einen typischen HTML-Editor. Be­nut­zen­de der Software ar­ran­gie­ren Website-Elemente durch Drag-and-Drop pi­xel­ge­nau.

open­Ele­ment

open­Ele­ment ist ein weiterer kos­ten­frei­er WSYIWYG-HTML-Editor. Dieser basiert al­ler­dings auf dem Chromium-Code, der auch Googles Chrome-Browser zugrunde liegt. Auch hier funk­tio­niert der Bau einer Website durch das Einfügen und Ver­schie­ben von Elementen in einer gra­fi­schen Ansicht.

Ro­cket­Ca­ke

Auch für den kos­ten­lo­sen WYSIWYG-HTML-Editor Ro­cket­Ca­ke benötigen Nut­ze­rin­nen und Nutzer prin­zi­pi­ell keine HTML- oder CSS-Kennt­nis­se. Im Aufbau ähnelt dieser Editor dem Kon­kur­ren­ten open­Ele­ment.

In der Mitte befindet sich der Be­ar­bei­tungs­be­reich, links und rechts eine Liste der Website-Elemente sowie die Da­tei­na­vi­ga­ti­on. Das besondere Feature des Programms: Es er­mög­licht die einfache Er­stel­lung von re­spon­si­ven Websites für mobile Geräte. Dafür ist u. a. der Break­point Editor zuständig: Hiermit legen Web­de­si­gner Punkte im CSS fest, an denen sich bei un­ter­schied­li­chen Dis­play­grö­ßen das Layout ändert. Selbst­ver­ständ­lich ist es auch bei Ro­cket­Ca­ke möglich, den Code direkt zu be­ar­bei­ten.

TOWeb

TOWeb von Lauyan Software verfolgt den gleichen WYSIWYG-Ansatz wie Ro­cket­Ca­ke. Die beiden Programme teilen sich ins­be­son­de­re den Fokus aufs Re­spon­si­ve Design.

Nachteile der WYSIWYG-Idee

Zunächst scheinen WYSIWYG-Editoren die perfekte Lösung zu sein: Auch ohne HTML- oder Pro­gram­mier­kennt­nis­se lassen sich am Computer (Web-)Dokumente erzeugen, die zur Ver­öf­fent­li­chung taugen. Aber aus ver­schie­de­nen Gründen greifen manche Nut­ze­rin­nen und Nutzer doch lieber zu einem Editor wie Notepad++, bei dem sie den Code direkt eingeben müssen.

• Mangelnde Kontrolle: WYSIWYG-Editoren un­ter­neh­men For­ma­tie­run­gen, die man als Nutzerin oder Nutzer nur be­ein­flus­sen kann, wenn man sich durch zahl­rei­che Fenster und Menüs wühlt. Bei der Eingabe von HTML-Code oder anderen Aus­zeich­nungs­spra­chen ist das nicht der Fall: Er­stel­len­de sehen hier genau vor sich, was mit dem Text bei der Kom­pi­lie­rung passieren soll. Deshalb verwenden einige Nut­ze­rin­nen und Nutzer zur Er­stel­lung von Texten für Druckerzeug­nis­se oder PDF-Dateien die Ma­kro­spra­che TeX bzw. das darauf ba­sie­ren­de Software-Paket LaTeX. Ur­sprüng­lich für wis­sen­schaft­li­che Arbeiten ent­wi­ckelt, erlaubt es TeX, genaue For­ma­tie­rungs­vor­ga­ben ein­zu­hal­ten und ma­the­ma­ti­sche wie na­tur­wis­sen­schaft­li­che Formeln besser in den Fließtext ein­zu­fü­gen.

• In­ter­net­spe­zi­fi­sches Probleme und ver­schie­de­ne Dar­stel­lungs­ar­ten: Auch bei WYSIWYG ist nicht zwangs­läu­fig gegeben, dass das Ergebnis wirklich so aussieht, wie es dem Web­de­si­gnen­den auf dem Monitor angezeigt wird. Denn das eine End­ergeb­nis gibt es im World Wide Web nicht. Ver­schie­de­ne Systeme und Browser geben Inhalte mitunter anders aus, hinzu kommen mobile Endgeräte, die wieder andere Dar­stel­lungs­ar­ten haben. Deshalb ist das Ver­spre­chen „What you see is what you get“ zumindest in Bezug auf Websites ein leeres. Web­de­si­gnen­de testen darum für ge­wöhn­lich ihre Seiten erst auf un­ter­schied­li­chen Systemen, bevor sie ihre Er­geb­nis­se online stellen.

• Code­qua­li­tät: WYSIWYG-Editoren erstellen im Hin­ter­grund einen HTML-Code. Man kann aber nicht immer davon ausgehen, dass der so ent­stan­de­ne Code auch unter pro­fes­sio­nel­len Aspekten sinnvoll ist. In der Ver­gan­gen­heit haben Web­de­si­gnen­de immer wieder kri­ti­siert, dass diese Programme Quellcode pro­du­zie­ren, der unnötig auf­ge­bla­sen oder feh­ler­haft ist. Dies führe zu langen La­de­zei­ten und Fehl­an­zei­gen.