Notes on WYSIWYG

(X)HTML & CSS, Musings / Wednesday September 2nd, 2009 / No comments

I've been having quite a few discussions recently on the merits and disadvantages of using WYSIWYG editors, like Dreamweaver and iWeb, and even direct PSD to HTML converters such as SiteGrinder, for the creation of websites. Is it possible to create valid, accessible, and cleanly marked-up pages with such tools? These applications all too often create tag soups consisting primarily of tables and absolutely positioned elements, that browsers struggle to render and search engines fail to comprehend. However, in the hands of a skilled designer, can these problems be overcome?

A note on the definition of WYSIWYG: a web WYSIWYG editor is a program that automatically generates HTML / CSS code based on a visual design. Photoshop by itself is not a WYSIWYG editor, because it does not generate HTML - it only aids in the design process.

The main problems I perceive with WYSIWYG editors is that it is all too easy to use improper techniques when creating a site - for example, using double line-breaks instead of paragraph blocks, or using a "layout table", instead of proper CSS. Utilizing only the basic interfaces that such editors provide, it is very difficult and confusing to gain fine control over the layout and appearance of a page, and this more often that not leads to the designer resorting to crude techniques, as above, to achieve the perfection (ironically) they desire. The fact that the underlying code is often fully hidden beneath the WYSIWYG interface is also detrimental, as the designer cannot see for themselves the result of the actions they perform on that interface. Here the WYSIWYG editors themselves are sometimes to blame, as they often do not follow accepted standards when implementing the designer's commands (e.g. <font> tags instead of CSS). This problem I've seen particularily in SiteGrinder, which while claiming to generate valid and well-formed code inevitably ends up producing HTML that is littered with empty elements and oxymoronic tags (e.g. one-line paragraphs split straight down the middle of sentences).

Nevertheless, if the designer is very careful, I suppose it is entirely possible to create a well-formed, valid, and accessible page in a WYSISYG editor, but as soon as they start doing things like using absolute positioning to get that image in "just the right place", instead of properly applying margins (because they can't, the interface doesn't allow for it), or having spans directly inside paragraphs just to change the font-size (did the editor really just put that in?), then the quality rapidly goes downhill, with the designer unable or incapable of rectifying things.

Therefore, it is desirable that designers attempting to use a WYSIWYG editor still have a functional knowledge of the mechanisms of HTML, so that during the creation of the sites the designer can still understand the correct way to achieve their goal (e.g. apply margins, don't make it absolutely positioned). Without such knowledge, it is next to inevitable that the designer will sooner or later be forced to use the WYSIWYG interfaces in such a way that the code of the page is deformed. Then you can say goodbye to validity, accessibility, searchability and speed.