WYSI-dangerous: Why WYSIWYG editors are bad for your website

Suppose you are fed up with rush-hour traffic and you’re looking for a new way to get to make your daily commute. “I’ve got just the thing,” I say: a personal-sized airplane that will deliver you to work like the Jetsons. Don’t worry, you don’t need to know anything about flying—it’s all automated. No knowledge of flight dynamics, weather, or navigation is required. Just push the right buttons on the dash and the computer will take care of the rest. It’s as easy as driving a car!

I hope you’d say, “thanks but no thanks.” Sure, someday that will be a reality, but you realize that right now flying is a much more complex operation than driving. You’re operating in three dimensions instead of two; there are more external factors, like weather and turbulence; you can’t just pull over onto the shoulder. The consequences of making wrong choices are much higher and aviation AI just isn’t sophisticated or trustworthy enough yet.

The perils of WYSIWYG × 10,000

So it is with content management. Nearly all the commercial and popular CMS and blogging platforms now come with a WYSIWYG editor that’s “as easy to use as Microsoft Word.” And, if you’re running your polka website or a blog about scrapbooking, that may be fine. If you’re running the 10,000-page website of a university, a 200-page website of a corporation, or you’re just a web professional who appreciates doing things right, the mere mention of WYSIWYG, especially when pitched with “as easy as Word,” should have you running in fright! Here’s why:

Web pages are inherently more complex than a Word document

Unlike a document destined to be printed on 8.5″ × 11″ paper, a website is dynamic. Different browsers, screen sizes, computer capabilities, and connection speeds all come into play. People expect more: images, video, slideshows, attractive formatting and design, and maybe even fluid layout. A document is usually written once, printed, and done. A web page lives on for decades and will probably need to be updated many times for the currency of the content, changing visual styles, and current expectations and computer/network capabilities.

WYSIWG tools just aren’t intelligent enough, yet

Does the WYSIWYG editor in your CMS let you resize images? Great! When it does so, does it start from a full-sized original, resample with the appropriate algorithm, sharpen just the right amount for the scene, choose the most appropriate file type and compress it just the right amount? I didn’t think so. Does it let you paste from Word? Fantastic! *refresh* Ouch. That’s going to be a mess to fix.

WYSIWG Distracts users with the formatting

Or, put another way, WYSIWYG fails to separate the presentation and the content, which is an important design principle. Given a WYSIWYG editor, most people want to make sure their content looks just right. So they add an Important note and ask that everyone {font-size:150%;font-family:“Lucida Handwriting”,“Brush Script”,“Comic Sans”}Please read the following carefully. They add fifteen spaces around a bit of text or add some extra line breaks between paragraphs. They aren’t dumb—quite the opposite actually. They know enough about how people read on the web to want their text to “stand out.” They just don’t know enough about design and usability to do it in appropriate way.

Also, if you allow users access to color, font, and size controls, what happens when you redesign?

WYSIWG often hides important technical details.

Do you have some Javascript that encodes emails? Or special CMS/blog codes that include other content or loop over child pages? Or a flash video inserted between those two paragraphs? Or is there a div wrapping that whole section? WYSIWYG editors often can’t or don’t display everything that might be in the underlying HTML. Important things get deleted, broken, or moved around and the user is mystified as to why their page broke.

WYSIWYG seldom gets you WYG

It’s hard to get your web site’s styles to work in the WYSIWYG editor, and even if you are successful at getting the editor to connect with your site’s CSS, it almost never matches pixel-for-pixel, especially when you involve images and tables and floating elements and wrapping. Users are given a false sense of security about how it will look on the page.

Validation? S**t happens.

Most WYSIWYG editors claim to “output perfectly valid XHTML 1.0” (as if it’s the highest standard and more virtuous than HTML 4), but somehow users find a way to mess it up. Or, it’s technically valid, but not semantic. Or, it’s just a mess—think one big paragraph with double <br>s where paragraphs should be.

Slow, buggy, not available in browser X

Most WYSIWYG editors have some sort of “gotcha”. Even if you got one that was fast and worked in every browser, including your smart phone, you still hit a speed and capability ceiling if you’re an advanced user.

The virtues of an intermediate markup language

Of course, you went down the WYSIWYG road because pure HTML is out of the question, right? Even we web professionals get fatigued editing plain HTML all day—that’s why there are tools like Dreamweaver for designers and HAML for Rails developers. If we do edit raw HTML, it’s in TextMate with all our shortcuts and syntax highlighting and text wrangling tools. HTML is too ugly and takes too long to write in a plain textarea in your CMS.

Formatting languages like Textile and Markdown are a helpful proxy to HTML. The problem is, you (and your users) have to learn it. I’m convinced that it’s:

(By the way, I prefer Textile to Markdown, so that’s where I’m coming from, but my comments apply to either.)

Teaching the basics in 10 seconds

Nearly every Textile-enabled application comes with a quick reference somewhere nearby. Some people link directly to the Hobix Textile Quick Reference or their own guide and others just give examples of the basics—strong, em, images, links, headings, and lists—in a bar beside the text box. It can be helpful to glance over there if you forget. I’m always forgetting the formatting of Markdown links (the order of the text vs. the link and the square brackets vs. the parentheses aren’t especially memorable).

A worthwhile investment

If you learn Textile, you’ll be able to use it all over the web. Flavors differ, but the heart of it is the same. Spending a little extra time to learn Textile pays off big the next time you encounter it.

Helpful tools make it easier

The Textile editor in Radiant CMS

The textile editor helper plugin for Rails applications or the textile editor extension for Radiant CMS can help users feel a lot more comfortable when faced with a big blank text box. Eventually they discover that it’s faster and easier to just type the asterisks rather than highlighting text and pushing the B button, but it’s comforting knowing it’s there if you forget. It’s also particularly handy when increasing the indentation on a whole bunch of list items. That sort of thing.

Live preview is also quite helpful. Have you tried RedCloth with the instant preview on this site yet?

I’m convinced that Textile makes the most sense for CMS and heavily-used web apps

For use in a CMS or CMS-like blog where you have multiple users with a range of experience (novice to professional), control structures embedded in the content, and good separation between presentation and design, Textile is just the best—way better than a WYSIWYG editor!

Sure, I’ve written a few applications over the years that would have been better off with a barebones WYSIWYG editor than Textile for accepting lists of publications, short bios, or personal notes from a huge novice user base, but for managing content of any length and complexity by a set of people trained to use the application (CMS or otherwise), Textile is it.

— by Jason Garber, Friday, June 05, 2009