By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

The Dangers of WYSIWYG

Why extended WYSIWYG functionality is bad. This article uses design and abuse of blockquote as examples.

Created: 2012-02-25 16:46

By. BlueBoden

WYSIWYG editors are very dirty, and sometimes they give the user more control than they really should. There are just things that are better left with a real web-designer, and not the user with no knowledge of HTML and CSS.

The reason why I'm bringing this up now, is because I'm working with a CMS system that is absolutely awful. The WYSIWYG part only works in IE and when you edit the source in a desperate attempt to circumvent the ugly WYSIWYG editor, its still changing the source-code and breaking things.

What's even worse is, that its using div element's instead of paragraph element's. You can change this in the source, but it just automatically changes it back if you ain't careful when you insert linebreaks. Its also using the Blockquote element for indention, and inserting empty paragraphs with Non Breaking Spaces. I'm not sure how the Blockquote abuse will effect the SEO score of a site, but i suspect that it can't be good.

You should think it wouldn't be that hard to use div elements for indention. That is, if you really think that functionality is even required in the first place!

On a site that I'm working on, i recently added a margin to paragraphs, this margin would be entirely dependent on how many line breaks was inserted before some text, by hitting return. This is far better then inserting empty paragraphs or br element's.

However, to add such complex stuff, such as the ability to set width and heights of elements, indention, and whatever, is just totally not needed. Why? Well because its a bad practice, thats why! I can go with colors, bold, and fonts, etc. Basically just stuff that doesn't require the technical knowledge of a designer to use.

Why not to support advanced WYSIWYG

When people use the advanced stuff, it often won't look as they expect in all browsers and resolutions anyway, which again makes their site seem amateurish. Not to mention that many WYSIWYG tools is using the elements incorrectly, potentially harming the site in the SERP's.

The ignorant user might also blame the designer when elements doesn't display as they want on the page, which could bring a support nightmare on your hands. But it can also be difficult to implement, due to poor cross-browser support for JavaScript, differences in how systems handle line breaks, etc.

Leave it with the designer

The designer should handle how the majority of content is displayed, and should standardize a pattern throughout the site, so that users feel comfortable on the entire site. It isn't nice to suddenly smash a different font in the users face, where the user doesn't expect it. Such lack of design pattern, might end up lowering the readability of the text and might also spoil the fine contrast between elements.

Spoil the contrast between elements, and you will effectively create a feeling that elements are just floating around on the page, at the mercy of the browser.

It can also be a problem when your CMS solutions allow the user to insert images in the textural content of their page, (I've seen much contrast oppression here.) In such cases it might be beneficial for the user to get a small introduction course by the designer, so a certain design pattern is maintained throughout the site, or at least throughout the Page. Its not just a issue with images, this goes for videos and other elements inserted by users as well.