Letzten Freitag durfte ich am UXCamp Vienna eine Session rund um das Thema Content-Editoren halten. Damit haben wir uns in den letzten Jahren natürlich ausgiebig beschäftigt, uns gegen WYSIWYG-Editoren und für Markdown entschieden. Im folgenden Beitrag möchte ich euch einen Überblick über die Session geben sowie ein paar Argumente für den Wechsel liefern.
Von Print zu Web
An dieser Stelle werde ich nicht auf die Geschichte von WYSIWYG eingehen, dazu gibt es auf Wikipedia genug nachzulesen. Eines gehört allerdings erwähnt: WYSIWYG-Editoren entspringen dem Printbereich und wurden nur aus einem Grund erfunden: Die mit Markup versehenen Texte waren unleserlich und nur wenige Menschen konnten sich das Layout des zu druckenden Dokuments auf den damaligen Mini-Bildschirmen vorstellen.
Darum entwickelte sich der erste nicht kommerzielle WYSIWYG-Editor von XEROX Parc zum heutigen MS Word und anderen Text-Editoren. Aufgrund der Tatsache, dass sich die Umsetzung interaktiver und responsiver Websysteme erst vor vergleichsweise wenigen Jahren etabliert hat und HTML einem durchschnittlichen Content-Redakteuer nicht zuzumuten war, hat sich die Benutzung von WYSIWYG-Editoren in der Content-Erstellung etabliert. Und wir auch heute noch gelebt. Weil bekanntes auch irgendwie bequem ist.
Eine falsche Editor-Anwendung ist kein Bug
Versteht mich nicht falsch, der WYSIWYG-Editor hat seine Daseinsberechtigung, allerdings nur, wenn der Redakteur einwandfrei mit Word einwandfrei umgehen kann (übrigens ein guter Test vorab). Leider ist das nicht immer der Fall und somit fängt man nur allzu leicht an auf der eigenen Website ein wenig Gott zu spielen und im Worst Case den gestalterischen “bad habbits” dabei freien Lauf zu lassen.
Gerade wenn mehrere Redakteure in einem System arbeiten, muss beim Einsatz von WYSIWYG-Editoren garantiert werden können, dass alle Benutzer die semantische Erstellung der Inhalte garantieren. Das bedeutet, Überschriften werden als H1, H2, H3 etc. ausgewiesen und nicht einfach bold markiert oder es wird der Schriftgrad erhöht. Abstände und Leerzeilen werden nicht eigenständig und nach Geschmack definiert und nicht benötigter Text wird gelöscht anstatt ihn weiß einzufärben (nur damit der Absatz nicht mehr „sichtbar“ist).
Ansonsten sind vermeintliche “Fehler im Design” vorprogrammiert. Nicht selten handelt es sich bei falscher Darstellung nicht um einen Bug, sondern um unsachgemäße Handhabung der zur Verfügung stehenden Funktionen. Durch das Zusammenspiel aus nicht validem HTML und der falscher Benutzung erhielt der Editor auch die Bezeichnung WYSIMOLWYG (What you see is more or less what you get).
Markdown als Alternative
John Gruber und Aaron Swartz haben vor zehn Jahren Markdown, einen Text-to-HTML Converter, der strukturell valides HTML erzeugt, entwickelt. Mit Hilfe eines simplen Syntax erstellen Redakteure ihren Content, der im Anschluss anhand des im CSS definierten Designs ausgegeben wird. Es stört weder den Schreib- noch den Lesefluss und ermöglicht im Vergleich zu reinen HTML- oder WYSIWYG-Editoren ein viel effizienteres Arbeiten, da man beinahe doppelt bis dreifach so schnell ist.
Durch Markdown Extensions, wie etwa Markdown Extra ist es zudem möglich Fußnoten, Tabellen, Kürzel und id/class Elemente anzulegen. Mehr benötigt man wirklich nicht mehr um einen Text zu formatieren. Durch die schnell zu lernenden Auszeichnungen wird zusätzlich eine semantische Denkweise gefördert. Und wer weiß schon, wann ein Relaunch geplant ist und eine Content-Migration bevorsteht. Mit hochwertigen HTML benötigt der Transfer kein mühsames Nachbearbeiten der Inhalte mehr.
Andere Editoren, wie der CKEditor rühmen sich damit, dass die grafische Benutzeroberfläche den kommenden WAI ARIA Guidelines der W3C entspricht. Schön und gut, aber Markdown benötigt nicht einmal das GUI zur Eingabe.
Wir verwenden standardmäßig Markdown als Content-Editor und zwar immer. In ganz wenigen Ausnahmen verlangen unsere Kunden vorab auch die Integration des WYSIWYG-Editors. Zum Einsatz kam dieser aber bisher noch nie. Natürlich klingt es am Bersprechungstisch nach einer großen Umstellung, dass das Layout und der Content getrennt werden und man als Redakteur nicht sieht, wie der finale Text auf der Website aussieht, während man ihn erstellt.
Aber es bietet eben auch jede Menge Vorteile. So zum Beispiel auch die Einbindung von Bildern in den Text. Einfach [Bild-Titel](Link zum Bild “Alt Text”) eingeben und fertig. Keine Beschäftigung mit dem Layout, garantiert makelloses responsive Design, effizienteres Arbeiten und weniger Verzweiflung in der Content-Wartung. Und wer weiß schon, wann ein Relaunch geplant ist und eine Content-Migration bevorsteht. Mit hochwertigen HTML benötigt der Transfer kein mühsames Nachbearbeiten der Inhalte mehr.
Auch die neue Blog Plattform Ghost setzt aus Gründen der Semantik und des validen HTML auf Markdown, wobei sich über den Splitscreen des Editors zur Eingabe in puncto mobile Tauglichkeit streiten lässt.
Falls ihr neugiergig geworden seid, dann testet Markdown doch einfach einmal anhand unseres Tools auf www.semantik.zensations.at. Nachstehend findet ihr Links zu Markdown Plugins und Modulen für die gängigsten CMS sowie die Slides zu meiner Präsentation. Welchen Editor nutzt ihr eigentlich und warum? Teilt mir einfach eure Erfahrungen mit, ich freue mich darauf!
Markdown Plugins & Module:
- Drupal: Markdown filter
- WordPress: WP-Markdown & Jetpack Markdown
- Joomla: ACE X Markdown Editor
- Typo3: Markdown für TYPO3
Welchen Editor nutzt ihr eigentlich und warum? Teilt mir einfach eure Erfahrungen mit, ich freue mich darauf!
Wolfgang Leitner ist Projektmanager bei Zensations und übt fleißig für das nächste Wuzzelturnier.
Und hier nun auch der #zentalk in der Kurzfassung mit den wichtigsten Punkten zu Markdown: