Tipps zur Verwendung von WYSIWYG Editoren

Computer Tastatur

WYSIWYG - eine Abkürzung die viele Anwender bereits gelesen haben. WYSIWYG steht für "What You See Is What You Get" und wurde vor allem durch diverse Content Management Systeme (WordPress, Joomla, Typo3 ...) geprägt, die es Endanwendern erstmals ermöglichten, Inhalte ähnlich wie in den seit Jahren bekannten Desktop-Anwendungen (MS Word, Open-Office etc.) - ohne Kenntnis von HTML - zu bearbeiten.

Nachdem ich durch meine Arbeit nahezu wöchentlich mit Anwendern zu tun habe, die WYSIWYG-Editoren recht eigenwillig und nicht optimal nützen, möchte ich mit diesem kurzen Beitrag etwas Licht ins Dunkel bringen und Ihnen ein paar Tipps an die Hand geben, die das Ergebnis bei der Arbeit mit diversen Editoren deutlich verbessern wird.

1. Nutzen Sie den empfohlenen Browser

Zwar sind neue WYSIWYG-Editoren (wie beispielsweise jener in WordPress) inzwischen sehr sauber entwickelt und auch mit den meisten Browsern kompatibel. Dennoch dürfen Sie nicht die gleichen Anforderungen wie beispielsweise ein Dokumentenverarbeitungsprogramm wie Microsoft Word stellen. Der Editor besteht aus HTML Markup und einer ordentlichen Portion Javascript mit CSS und diese Konstellation alleine kann schon dafür sorgen, dass der Editor in dem ein oder anderen (mobilen) Browser nicht wie erwartet funktioniert. Mein Tipp: Lesen Sie nach, welchen Browser der Hersteller empfiehlt und verwenden Sie diesen. Damit werden Sie den meisten Problemen aus dem Weg gehen.

2. HTML ist nicht gleich Druckdokument

Bedenken Sie immer, dass Sie mit einem Online Editor im Normalfall auch Online Content generieren. D.h. die erzeugte Datenstruktur (HTML, XML o.ä.) ist so aufgebaut, dass Sie von Maschinen (Browser, Suchmaschinen-Robots etc.) gelesen werden kann – diese Maschinen sind dann für eine vom Menschen lesbare Darstellung des Inhalts verantwortlich. Dies bedingt auch, dass die Datenstruktur möglichst schlank (und damit performant) gehalten wird. Wenn Sie im Gegensatz dazu zum Beispiel einen Blick in den „Quelltext“ eines Word Dokuments – das ursächlich für die Erstellung von Druckdokumenten gedacht ist – werfen werden Sie sehen, dass Sie eine Flutwelle von Markup-Auszeichnungen überrollt. Das ermöglicht natürlich eine wesentlich komplexere Auszeichnung der Darstellung und ist für ein Druckdokument auch zulässig – für Dokumente die möglichst schnell über diverse Datenleitungen übertragen werden sollen allerdings unbrauchbar und normalerweise auch unnötig.

3. No-Go: Direktes Copy & Paste

Ein absolutes No-Go ist das 1:1 Kopieren von formatiertem Text (mit STRG-C, STRG-V) aus einem Dokument oder einer anderen Website in einen WYSIWYG Editor. Dieses Vorgehen führt in den meisten Fällen zu abenteuerlichen Formatierungen bei der Ausgabe des verfassten Texts. Warum? Weil Sie so nicht nur den Text sondern auch die Formatierung aus dem Originaldokument direkt – wenn auch unsichtbar – mit in den WYSIWYG Editor übernehmen. Das führt dazu, dass Sie im Quelltext Ihrer Website plötzlich unbrauchbare Word-Formatierungen oder die CSS Notationen einer anderen Website ausliefern die nicht zu Ihrer Website passt (bzw. im Fall von Word von vielen Browsern einfach missinterpretiert wird). Lösen können Sie dieses Problem recht einfach. Sie müssen lediglich Ihre Arbeitsweise ein wenig anpassen:

  • „Als Text einfügen“ Funktion nutzen Die meisten modernen WYSIWYG Editoren bieten in der Toolbar genau aus diesem Grund bereits einen Button der „Als Text einfügen“ heißt. Fügen Sie Ihren Text aus der Zwischenablage durch einen Klick auf diesen Button ein, wird die Formatierung im Hintergrund entsorgt und Sie haben sauberen Text in Ihrem Editor.
  • Zwischenschritt über Texteditor Sollten Sie einen älteren WYSIWYG-Editor nutzen, der diese Funktion noch nicht bietet, können Sie die Formatierung löschen indem Sie den Text aus Ihrem Originaldokument in einen reinen Texteditor (unter Windows beispielsweise „Editor“) kopieren und von dort wieder mittels Copy&Paste in Ihren WYSIWYG-Editor weiterkopieren.

4. Enter ist nicht gleich Enter / Absatz vs. Zeilenumbruch

Ein Thema das mir noch recht häufig unterkommt ist, dass viele Anwender den Unterschied zwischen einem Absatz (Paragraph) und einem Zeilenumbruch nicht kennen. Für viele mag das etwas pingelig klingen aber der Unterschied ist gerade in der Zeit von mobilen Geräten, Reader-Apps und verteiltem Content durchaus wichtig.

Zeilenumbruch

Um eine Zeile umzubrechen drücken Sie an der Stelle an der Sie umbrechen möchten die Tastenkombination „SHIFT + ENTER„. Das führt dazu, dass eine neue Zeile begonnen wird – allerdings mit dem selben Abstand und identischer Formatierung als würden die Zeile einfach im Fließtext umbrechen. Im Quellcode wird dieser Zeilenumbruch mit <br /> ausgezeichnet.

Absatz / Paragraph

Im Gegensatz zum Zeilenumbruch führt ein einfacher Druck auf „ENTER“ zum Ende und Neubeginn eines Absatzes. Dieser Unterschied ist deshalb wichtig, weil Absätze je nach Art der Ausgabe (Website, Mobilgerät etc.) mit einer Vielzahl von Formatierungskriterien versehen sein können. So kann der Abstand zur vorherigen Zeile am Smartphone beispielsweise wesentlich geringer sein als der Abstand auf dem Desktop. Oder diverse Reader Apps lesen die erste Überschrift und den ersten Absatz für eine Artikelvorschau aus. Dafür ist die für einen Absatz im Quellcode hinterlegte Notation <p></p> relevant.

5. Nutzen Sie HTML Elemente zur Strukturierung

Wenn Sie sich Ihren WYSIWYG Editor ansehen, finden Sie in der Toolbar oft die Möglichkeit einem Text die Eigenschaft „Überschrift 1 / H1“ oder andere Standard HTML Eigenschaften zuzuordnen. Nutzen Sie diese mächtigen Werkzeuge! Natürlich könnten Sie Überschriften mit einigen Editoren auch manuell „erstellen“, indem Sie Schriftgröße, Farbe und Ausprägung definieren. Genau wie bei dem Vergleich von Zeilenumbruch und Absatz ist es aber auch hier wieder so, das „Maschinen“ am anderen Ende genau diese korrekte Auszeichnung der Elemente zur Informationsgewinnung nutzen. Ganz abgesehen davon, dass Sie sich vermutlich die Finger wund tippen werden um eine zukünftige Design-Änderung an den Überschriften in all Ihren Dokumenten vorzunehmen. Eine Reader-App am Smartphone stellt dann eine Überschrift ersten Grades (H1) beispielsweise in perfekter Größe für das jeweilige Endgerät dar oder Ihre Website liefert diese Überschrift dank passender CSS Auszeichnung optimal in den Textfluss integriert aus.

6. Trennen Sie Design und Content!

Der Letzte (und wahrscheinlich wichtigste Tipp): Design und Content gehören nicht zusammen! Nutzen Sie den Editor um Ihren Inhalt sauber mit den vorgegebenen (HTML-) Elementen zu strukturieren. Überlassen Sie das Design Ihren Webdesignern und Softwareentwicklern, die sich dann um die Ausgabe Ihres Contents auf den unterschiedlichen Plattformen kümmern. Wenn Sie den Entwicklern manuell geänderte Schriftgrößen, bunte gefärbte Textabschnitte, total witzige Smileys und mit Leerzeichen eingerückte Listen ersparen, werden Sie sich mit Sicherheit sehr dankbar zeigen. Für Viele werden diese Punkte vermutlich „Binsenweisheiten“ darstellen. Da ich aber selbst in der Zusammenarbeit mit erfahrenen Online-Redakteuren oft sehr „spannende“ Ansätze bei der Verwendung von WYSIWYG Editoren sehe, hoffe ich dem ein oder anderen mit diesen Tipps ein wenig die Arbeit zu erleichtern.

Kommentar verfassen

Folge mir auf Twitter

Hol Dir kostenlos Tipps und Tricks zu Shopware, E-Commerce und andere Open-Source Produkte.

Folge @synonymousrocks