Last Friday, I had the opportunity to host a session on content editors at UXCamp Vienna. This is a topic we've naturally explored extensively in recent years, ultimately choosing Markdown over WYSIWYG editors. In the following article, I want to give you an overview of the session and provide a few arguments for making the switch.
From Print to Web
I won't delve into the history of WYSIWYG here; there's plenty to read on Wikipedia. However, one point must be mentioned: WYSIWYG editors originated in the print sector and were invented for only one reason: mark-up heavy texts were unreadable, and few people could visualise the layout of a document to be printed on the mini-screens of the time.
Thus, the first non-commercial WYSIWYG editor from XEROX Parc evolved into today's MS Word and other text editors. Due to the fact that the implementation of interactive and responsive web systems only became established relatively recently, and HTML was deemed unsuitable for the average content editor, the use of WYSIWYG editors became standard for content creation. And it's still practised today. Because what's familiar is somehow comfortable.
A Wrong Editor Application is Not a Bug
Don't get me wrong, the WYSIWYG editor has its place, but only if the editor can handle Word impeccably (which, incidentally, is a good test beforehand). Unfortunately, this isn't always the case, and so it's all too easy to start playing God a little on your own website and, in the worst-case scenario, to let creative 'bad habits' run wild.
Especially when multiple editors are working in a system, the use of WYSIWYG editors must guarantee that all users ensure the semantic creation of content. This means headings are designated as H1, H2, H3, etc., and not simply bolded or by increasing the font size. Spacing and blank lines are not defined independently and according to taste, and unnecessary text is deleted instead of being coloured white (just so the paragraph is no longer 'visible').
Otherwise, supposed 'design errors' are pre-programmed. Often, an incorrect display is not a bug, but rather improper handling of the available functions. The interaction of invalid HTML and incorrect usage also led to the editor being dubbed WYSIMOLWYG (What You See Is More Or Less What You Get).
Markdown as an Alternative
Ten years ago, John Gruber and Aaron Swartz developed Markdown, a text-to-HTML converter that generates structurally valid HTML. With the help of a simple syntax, editors create their content, which is then rendered according to the design defined in the CSS. It disrupts neither the writing nor the reading flow and allows for much more efficient work compared to pure HTML or WYSIWYG editors, as you can be almost two to three times faster.
Through Markdown extensions, such as Markdown Extra, it's also possible to create footnotes, tables, abbreviations, and ID/class elements. You really don't need much more than that to format text. The quickly learned mark-up also promotes a semantic way of thinking. And who knows when a relaunch is planned and content migration is imminent? With high-quality HTML, the transfer no longer requires tedious post-processing of content.
Other editors, such as CKEditor, boast that their graphical user interface complies with the upcoming WAI ARIA Guidelines of the W3C. That's all well and good, but Markdown doesn't even need a GUI for input.
We use Markdown as our standard content editor, always. In very few exceptions, our clients request the integration of a WYSIWYG editor beforehand. However, it has never actually been used. Of course, at the meeting table, it sounds like a major change that layout and content are separated and that as an editor, you don't see what the final text will look like on the website while you're creating it.
But it also offers many advantages. For example, the integration of images into the text. Simply enter [Image Title](Link to Image “Alt Text”) and you're done. No fussing with layout, guaranteed flawless responsive design, more efficient work, and less frustration in content maintenance. And who knows when a relaunch is planned and content migration is imminent? With high-quality HTML, the transfer no longer requires tedious post-processing of content.
Even the new blog platform Ghost relies on Markdown for semantic reasons and valid HTML, although the editor's split-screen for input can be debated concerning mobile suitability.
If you're curious, why not test Markdown using our tool at www.semantik.zensations.at. Below you'll find links to Markdown plugins and modules for the most common CMS platforms, as well as the slides from my presentation. Which editor do you actually use and why? Just share your experiences with me, I look forward to hearing from you!
Markdown Plugins & Modules:
- Drupal: Markdown filter
- WordPress: WP-Markdown & Jetpack Markdown
- Joomla: ACE X Markdown Editor
- Typo3: Markdown for TYPO3
Which editor do you actually use and why? Just share your experiences with me, I look forward to hearing from you!
Wolfgang Leitner is a Project Manager at Zensations and diligently practices for the next foosball tournament.
And here is the #zentalk in brief, summarising the most important points about Markdown:
