Skip to main content

Markdown vs. WYSIWYG-Editor

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.

Markdown vs. WYSIWYG

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.

Markdown Syntax

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:

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: Markdown Editor

Wird nicht veröffentlicht
  • Freut mich, dass du hier eine Lanze für Markdown brichst – alles richtig und wichtig. Kleine Korrektur, der Mann heißt John Gruber.

  • Danke für den Hinweis. Wurde auch schon korrigiert.

  • THX Wolfgang, I even can't agree more! You are soo right. "Stop treating the web like a word document." And I would like to add: "Split content from content design and make content readable apart from its design." Let content creators create content and designers make design. I think this Wysiwyg mixture was made for a generation, which had problems to read "screens" and wanted to read on screen like on paper. But I think even my grandmom is able now to read markdown and knows what bbcode is. So there is no need no more to frickle around with html in content. It's like designing for IE6. :-) Thanks for being not allone with it! Greetings from Berlin

  • Welcher Editor ist das auf dem Bild bei "Markdown als Alternative"? Ist das ein Desktop oder Webeditor? Finde ich schön, da er plain markdown darstellt, aber dennoch das Aussehen immitiert, zumindest semantisch. Das hilft den "visuellen" Word und Powerpointnutzern beim Einstieg in MD.

    Als Webeditor kann da http://lab.lepture.com/editor/ empfehlen (stellt auch Zitate abgesetzt dar)

  • Hallo Klaus, danke für den Link. Das auf dem Bild ist kein fix fertiger Webeditor, sondern einfach PHP Markdown in Verbindung mit Codemirror für das Highlighting.

    https://michelf.ca/projects/php-markdown/
    http://codemirror.net/

  • Hi Wolfgang,

    [lepture/editor] nutzt auch Codemirror ;) (ich hatte oben den gh link vergessen). Ich probier mich gerade an einem Wordpress/Mediawiki Plugin um den auch dort verwenden zu können, allerdings klappt mein node build nicht so ;(

    [lepture/editor]: https://github.com/lepture/editor