{"id":1855,"date":"2014-05-21T17:34:39","date_gmt":"2014-05-21T17:34:39","guid":{"rendered":"https:\/\/www.zensations.at\/?p=1855"},"modified":"2023-08-09T01:23:27","modified_gmt":"2023-08-09T01:23:27","slug":"markdown-vs-wysiwyg-editor","status":"publish","type":"post","link":"https:\/\/www.zensations.at\/blog\/markdown-vs-wysiwyg-editor\/","title":{"rendered":"Markdown vs. WYSIWYG-Editor"},"content":{"rendered":"

Letzten Freitag durfte ich am\u00a0UXCamp<\/a>\u00a0Vienna eine Session rund um das Thema Content-Editoren halten. Damit haben wir uns in den letzten Jahren nat\u00fcrlich ausgiebig besch\u00e4ftigt, uns gegen WYSIWYG-Editoren und f\u00fcr\u00a0Markdown<\/a>\u00a0entschieden. Im folgenden Beitrag m\u00f6chte ich euch einen \u00dcberblick \u00fcber die Session geben sowie ein paar Argumente f\u00fcr den Wechsel liefern.<\/p>\n

\"Markdown<\/p>\n

Von Print zu Web<\/h2>\n

An dieser Stelle werde ich nicht auf die Geschichte von WYSIWYG eingehen, dazu gibt es auf\u00a0Wikipedia<\/a>\u00a0genug nachzulesen. Eines geh\u00f6rt allerdings erw\u00e4hnt: 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.<\/p>\n

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.<\/p>\n

Eine falsche Editor-Anwendung ist kein Bug<\/h2>\n

Versteht mich nicht falsch, der WYSIWYG-Editor hat seine Daseinsberechtigung, allerdings nur, wenn der Redakteur einwandfrei mit Word einwandfrei umgehen kann (\u00fcbrigens ein guter Test vorab). Leider ist das nicht immer der Fall und somit f\u00e4ngt man nur allzu leicht an auf der eigenen Website ein wenig Gott zu spielen und im Worst Case den gestalterischen \u201cbad habbits\u201d dabei freien Lauf zu lassen.<\/p>\n

Gerade wenn mehrere Redakteure in einem System arbeiten, muss beim Einsatz von WYSIWYG-Editoren garantiert werden k\u00f6nnen, dass alle Benutzer die semantische Erstellung der Inhalte garantieren. Das bedeutet, \u00dcberschriften werden als H1, H2, H3 etc. ausgewiesen und nicht einfach bold markiert oder es wird der Schriftgrad erh\u00f6ht. Abst\u00e4nde und Leerzeilen werden nicht eigenst\u00e4ndig und nach Geschmack definiert und nicht ben\u00f6tigter Text wird gel\u00f6scht anstatt ihn wei\u00df einzuf\u00e4rben (nur damit der Absatz nicht mehr „sichtbar“ist).<\/p>\n

Ansonsten sind vermeintliche \u201cFehler im Design\u201d vorprogrammiert. Nicht selten handelt es sich bei falscher Darstellung nicht um einen Bug, sondern um unsachgem\u00e4\u00dfe Handhabung der zur Verf\u00fcgung 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).<\/p>\n

Markdown als Alternative<\/h2>\n

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\u00f6rt weder den Schreib- noch den Lesefluss und erm\u00f6glicht im Vergleich zu reinen HTML- oder WYSIWYG-Editoren ein viel effizienteres Arbeiten, da man beinahe doppelt bis dreifach so schnell ist.<\/p>\n

\"Markdown<\/p>\n

Durch Markdown Extensions, wie etwa\u00a0Markdown Extra<\/a>\u00a0ist es zudem m\u00f6glich Fu\u00dfnoten, Tabellen, K\u00fcrzel und id\/class Elemente anzulegen. Mehr ben\u00f6tigt man wirklich nicht mehr um einen Text zu formatieren. Durch die schnell zu lernenden Auszeichnungen wird zus\u00e4tzlich eine semantische Denkweise gef\u00f6rdert. Und wer wei\u00df schon, wann ein Relaunch geplant ist und eine Content-Migration bevorsteht. Mit hochwertigen HTML ben\u00f6tigt der Transfer kein m\u00fchsames Nachbearbeiten der Inhalte mehr.<\/p>\n

Andere Editoren, wie der\u00a0CKEditor<\/a>\u00a0r\u00fchmen sich damit, dass die grafische Benutzeroberfl\u00e4che den kommenden\u00a0WAI ARIA Guidelines<\/a>\u00a0der W3C entspricht. Sch\u00f6n und gut, aber Markdown ben\u00f6tigt nicht einmal das GUI zur Eingabe.<\/p>\n

Wir verwenden standardm\u00e4\u00dfig 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\u00fcrlich klingt es am Bersprechungstisch nach einer gro\u00dfen Umstellung, dass das Layout und der Content getrennt werden und man als Redakteur nicht sieht, wie der finale Text auf der Website aussieht, w\u00e4hrend man ihn erstellt.<\/p>\n

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 \u201cAlt Text\u201d) eingeben und fertig. Keine Besch\u00e4ftigung mit dem Layout, garantiert makelloses responsive Design, effizienteres Arbeiten und weniger Verzweiflung in der Content-Wartung. Und wer wei\u00df schon, wann ein Relaunch geplant ist und eine Content-Migration bevorsteht. Mit hochwertigen HTML ben\u00f6tigt der Transfer kein m\u00fchsames Nachbearbeiten der Inhalte mehr.<\/p>\n

Auch die neue Blog Plattform\u00a0Ghost<\/a>\u00a0setzt aus Gr\u00fcnden der Semantik und des validen HTML auf Markdown, wobei sich \u00fcber den Splitscreen des Editors zur Eingabe in puncto mobile Tauglichkeit streiten l\u00e4sst.<\/p>\n

Falls ihr neugiergig geworden seid, dann testet Markdown doch einfach einmal anhand unseres Tools auf\u00a0www.semantik.zensations.at<\/a>. Nachstehend findet ihr Links zu Markdown Plugins und Modulen f\u00fcr die g\u00e4ngigsten CMS sowie die Slides zu meiner Pr\u00e4sentation. Welchen Editor nutzt ihr eigentlich und warum? Teilt mir einfach eure Erfahrungen mit, ich freue mich darauf!<\/p>\n

Markdown Plugins & Module:<\/p>\n