Find a post...

DNN-Connect Blogs

Perfect WYSIWYG for DNN/2sxc #1 - Evaluation Overview

WYSIWYG matters…

When IBuySpy got started - and later superseded by DNN - WYSIWYG was all the rage, because we all thought that content management should go from being a web-designer activity (using Dreamweaver) to being a document-editing activity like word processing.

Based on this idea, the WYSIWYG was a strong focus of DNN, which lead to including the telerik-rad-editor in the distribution, and also lead to people saying funny things like "DNN is a CMS because it has a Text/HTML Module".

…much less than it used to matter

We were wrong. Turns out that content management is its own thing, incomparable to anything before - with requirements and possibilities far away from letter-writing technologies. Many wanted to ignore this and keep on following the WYSIWYG-way, but it finally became clear with the advent of responsive design, that separating the content-design from the content was the only way to go. You can read more about this in my old post about the death of WYSIWYG.

A good WYSIWYG in 2016 needs to do much less…

With a professional separation of layout and content (requiring an appropriate module like 2sxc - download in the forge), the WYSIWYG should do much less. Basically it should help the user get things done quickly, the right way.  It should…:

  1. promote good practices (like using headings, strong- and em-tags)
  2. prevent bad practices (like copy-paste word-formatting or using font-tags) 
  3. discourage but support retiring methodologies like placing images in your text
  4. discourage but allow advanced actions like manually editing the HTML
  5. simplify common tasks like cleaning up formatting
  6. manage content-specific assets as most downloads/links/images are never reused

…actually do as little as possible…

Even if the WYSIWYG editor could do way more than what is currently needed, we should not enable cool, special features. Because "special" features always have 2 important downsides. First of all they promote bad practices - causing users to create solutions which don't scale and don't update in the future. Second of all there will come a day where we will have to replace the WYSIWYG again, so by focusing on the important features (which the replacement will have as well) we can ensure that such a migration will work again in the future without much pain.

…but do this very, very well

The list feels very simple, but to do this well is very challenging. Simple examples:

  1. The entire implementation needs to be JS only + some WebAPIs. Anything using server-side code to render is already obsolete and prevents real use in JavaScript based Apps (you can read more about JS-Apps in my blogs)
  2. …but not depend on additional large frameworks like jQuery 
  3. Managing assets in a full file structure discourages users from working well, as it is so cumbersome and time-intensive that users will automatically become lazy and chaos will prevail. 
  4. Copy-pasting from word is so common, it must be auto-cleaned with 100% reliability

The old editor included in DNN failed at this and the CK Editor as it is implemented now is also not up to the task.

The Evaluation

I started an extensive evaluation in the summer of 2015 and did the following

  1. Create a list of relevant user features (like bold, italic, etc.)
  2. Create a list of technical requirements (like CDN support, non-jQuery, etc.)
  3. Create a list of configurability (like toolbars with custom buttons to browse the DNN files)
  4. Create a list of management requirements (like open-source license, widely used, etc.)
  5. Work out which criteria will be the bottleneck (like no-jQuery) to focus on these first
  6. Create a short-list of about 10 editors based on the critical criteria
  7. Re-Evaluate in detail to reduce shortlist to a favorite and max. 4 contenders
  8. Try to implement the favorite and see if it fits

Let's get started with part 2!

Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 800 DNN projects since 1999. He is also chief architect of 2sxc (see forge), an open source module for creating attractive content and DNN Apps.

Read more posts by Daniel Mettler
Daniel Mettler learned programming with the bible translation computer of his parents, deep in the jungles of Indonesia. Since he was only 12 years old at that time and the BIOS only had a version of BASICA, that's what got him started. With 16 he went back to Switzerland and learned German and basic city-survival skills. Equipped with this know-how he founded 2sic internet solutions in 1999 which was focused on web solutions on the Microsoft platform. After a few self-developed CMSs 2sic switched to DNN in 2003 and has been one of the largest partners (17 employees, 700+ projects) in Europe. Daniel is also the chief architect behind the open source 2sxc, a strong promoter of standardization (boostrap, patterns, AngularJS, checklists, etc.) and loves to eat anything - dead or alive. His motto: if the natives eat it, it game.

Hosting liberally provided by

Philipp Becker 5985 7
Geoff Barlow 532 4
DNN-Connect 431 6
Peter Donker 4986 29
Christopher Hammond 668 2
Olivier Jooris 413 1
Daniel Mettler 11926 88
Clint Patterson 1 1
Jos Richters 65 1
James Rosewell 316 2
Will Strohl 1538 27
Ernst Peter Tamminga 434 4
Barry Waluszko 2647 2
Declan Ward 363 1
Gifford Watkins 722 9
Torsten Weggen 2547 3