why clients shouldn’t have WYSIWYG

wysiwyg-exampleI keep running across blogs linking to an open-source WYSIWYG editor for content management systems. I share a lot of links to open source software but I keep skipping by this one. The reason is simple: giving clients the ability to affect the style of their site’s content leads to things like the example on the right — non-designers making design calls with a limited palette. Several bright, primary text colors, none of which matches the original design of the site, distract your eye from the actual content. WYSIWYG editors rely on inline old-school HTML tags which override the stylesheet a designer has created.

wysiwyg-example2In addition, WYSIWYG solutions rely on jamming a whole lot of HTML into the content area of a site. Depending on how this data is called into the pages, it can affect the original code in all sorts of horrible ways. In the example to the right, you’ll notice that the footer text has become blue because of an unclosed font tag.

I think the solution to this is really in the client-designer relationship. The designer needs to make suggestions to the client about how best to use their content management system. And secondly, clients need to trust their designers when we make design calls. The type is part of the design. Too often, I find clients and designers square off on issues like this: clients want absolute control over their content; designers want absolute control over the style. What rarely gets communicated is that both design and content work together to communicate well.

Of course, if to avoid too much friction over the design of the site, the designer could just restrict the control the client has. One great start is not to install a WYSIWYG editor.

wysiwyg-betterI built the site from which these examples are taken. I have limited control over the WYSIWYG editor. So I took a swing at re-styling the page by adding two classes to the CSS — .blue and .orange — that contained nothing but a color already used on the site. That way, to create emphasis and separation, the client only has to use a tiny bit of code:

<span class=”orange”>TEXT TO EMPHASIZE<⁄span>

For contrast, look at some of the code that the WYSIWYG editor crammed into the textarea:

<p><font size=”2″><font size=”2″><font color=”#008080″><⁄font><⁄font><⁄font><⁄p><font size=”2″><font size=”2″><font color=”#ff0000″><⁄font><⁄font><⁄font><⁄font><⁄font>

That code literally does nothing since no text is wrapped in all those opened and closed font tags. But that’s a typical example of the garbage output from a WYSIWYG editor.

(WYSIWYG stands for What You See is What You Get and refers to the cute set of buttons above a textarea in a web form that allow a user to format the text colors, sizes, font face, alignment, decoration, weight, et cetera.)