WYSIWYG Editors: The Guitar Hero of Great Web Design

Published on February 2nd, 2011

Playing a guitar is hard. It takes impeccable timing, hand eye coordination, discipline, and tons of practice. One incorrect hand position and a masterpiece can be off key or sound like a middle school band concert. And even getting to that point requires a lot of technical know-how (learning to read music, how to create chords, etc).

Playing guitar hero is easy. All the complex positions are reduced down to 4 buttons and a 'whammy' bar. Learning all the music notes (treble, bass, quarter notes, staccato) is replaced by a tele-prompter.

The beauty of this simplification is that is significantly lowered the barrier to entry to the experience (because hey, everyone wants to be a rockstar). And even while drunk at a holiday party, I was able to mash enough buttons to get through level 'easy' on my first try... only to be rewarded by my game avatars and digital audience cheer on my blistering 60% accuracy. I honestly have never played more than a single note on a guitar, but that single out of tune note made me realize that I wasn't up to that challenge. But I could get a close enough representation of song and a happy experience that I'll stick to guitar hero for now. And I'm not the only one. I don't know the statistics, but I'm willing to bet the number of guitar hero games out weighs the number of active guitar players many times over.

Getting back to the WYSIWYG editors...

No one in their right mind would claim that playing guitar hero translates in any way to playing music well. And I'll pay a 5 dollar cover charge to see a so-so band at a local pub. I'd never pay any money to watch even the best guitar hero player 'compete'. They are just different leagues.

WYSIWYG editors are the guitar hero of web design. No longer do people have to learn up to 30 tags and things like a div clear or centered float trick. One can take the skills they've learned from any text editor (most notably MS word) and get it immediately onto the great world wide web without any headaches! All the complexities are replaced by buttons and we are led to believe that what we see is truly what we get.

And there was much rejoicing... at least for a while.

The reality is that a WYSIWYG editor is not perfect and there is a cost for that simplicity. It becomes easy to forget that there is a structure behind the curtain. It becomes difficult to take the limited set of buttons and create more complex designs. And the worst part of all, incorrectly pasting and/or marking up content will create tons of garbage code that will fight against you when trying to do further changes. And rather than look under the hood and remove the culprit, people have to try and sort it out through the buttons. This blindness can actually lead to more time lost and more frustration. After all, if you break or fight the backend structure, a small error can totally break the front end look and make it look like a disaster. It can be the equivalent of a broken string on a guitar. You need to be able to replace the string rather than try to play on my compensating with moving to a new finger position.

Am I being too much of a nitpick? Absolutely. Do I use WYSIWYG editors? Absolutely! Editors like CKEditor are amazing and I know I would be extremely frustrated to do ALL my coding by hand. But I use them as a tool to streamline content insertion and I am not afraid to hit the 'source' button to look under the hood and do things right. WYSIWYG can be super useful in creating things that can be tedious, such as nested bulleted lists and large tables. In my opinion, the best reasons to use them is for

1. Very simple structure changes

2. Quick preview of HTML

3. Replacing tedious tasks

My issue would be with those that claim they 'know HTML' and what they really mean is they export from MS word. This is the guitar hero player claiming he can play jimmi hendrix (on medium difficulty mind you). This will get you through a 5 page site for a local dentist. It will not cut it for a medium sized company trying to produced 1-10+ unique pieces of content a day. Not without creating a nightmare of code cleanup.

Respect to WYSIWYG Developers

With my comments, I feel like I need to say how much I respect the creators of WYSIWYG editors like CKEditor. The complexities of handling all possible user input across multiple operating systems across multiple browsers from MS word input and then sanitizing it as best as possible and giving a (usually) accurate real time representation is no easy feat. When used properly, they are an extremely useful tool that has opened the door for countless individuals to feel the sense of empowerment and create web ready content. It's a guitar hero experience for these individuals, who either don't have the time, skill, or patience to do it any other way. Is that respectable? Absolutely. But many people can and should take their skills to the next level and hit that source button every now and again...

Finally. I feel inspired to do some followups on this to outline the benefits of well marked up languages like HTML, latex, etc for templating. That way, some of my opinions may seem a little more justified and less snarky :)  The goal here is not to bash WYSIWYG users...  but to inspire them to take their use of them to the next level. 

Thanks for reading! If you enjoyed this, can I ask you for a favor?

I would like the opportunity to connect with you on an ongoing basis with the intention that I continue to provide you with valuable information and insights to help transform your life personally and professionally. To that end, it would mean a lot to me if you performed one or more of the following.

  1. Sign up for my newsletter to get new articles sent right to your inbox.
  2. Follow me on Twitter or connect with me on LinkedIn. Don't forget to say hi!
  3. Contact me to setup a free, 15-minute consultation.
  4. Share this article with anyone that might benefit from it.

Thanks again for your time and attention! It means the world to me to know that you gave me this opportunity to connect with you.

About Rick Manelius

Quick Stats: CXO of Atomic Form. Graduated from MIT in '03 (BS) and '09 (PhD). Life hacker and peak performance enthusiast. This blog is my experiment in creative writing, self-expression, and sharing what I've learned along my journey. For more information, read my full bio here or contact me.