Buyers guide to WYSIWYG web editors

Date: Wed Nov 14 2007
One of the preferred ways to build a web site is to use WYSIWYG web editing software. This software provides an experience similar to the typical "word processor", but with features specific to editing web sites. While many word processors today can produce HTML output, they are not suitable for regular web site building tasks. Unfortunately they lack a whole slew of useful features and will make for an unpleasant experience in maintaining your web site. So:
Do not use a word processor (e.g. Star Office, Microsoft Word, etc)

With that out of the way let's review the possible methods for building a web site.

HTML editing with a simple text editor like Notepad. While many do this, it's highly not recommended. Editing raw HTML gets in the way of creative expression because you're constantly thinking about arcane technicalities such as the proper construction of tags.

Blogs, Wiki's and other sorts of Content Management Systems offer a lot of useful features in managing an overall web site. They tend to automatically produce RSS feeds, to automatically generate navigational structure to the web site, to provide a simple method of customizable themes on the site, and more. Generally a CMS allows the author to edit the web site through the web browser. Unfortunately CMS systems often do not offer a WYSIWYG experience, and instead you're still editing HTML.

WYSIWYG web editors provide a what you see is what you get user interface. Further they help the user edit a whole web site, rather than focusing on a single page.

Desirable features in WYSIWYG web editors

Mix of WYSIWYG and HTML editing: The main purpose of a WYSIWYG web editor is to let you edit web pages in a way that looking like their display in a web browser. While they all do a good job at this, there are many instances where you have to edit the HTML directly. Sometimes the web editor software gets a little confused and isn't doing the right thing. Other times you are copying a block of HTML from a web service into your pages. In both cases you just have to edit the HTML code directly.

Rich set of objects in pallette: These editors tend to have a pallette of predefined objects that you can drag into a web page and customize. The simplest of these are the HTML objects like tables and images, and may touch on Applets, Flash animations, form elements, javascript snippets and more.

Extensible set of objects in pallette (e.g. a Library): This allows you to create your own web page design elements and when you want to use them, just drag from the pallette. Or in some cases you can buy predefined objects designed by professionals. This is presented as a "library" of components or page layouts.

Convenient toolbars and property boxes: There will be a "toolbar" of common operations such as paragraph formatting or text sizing. There will also be several special windows that let you examine detailed properties of several types of objects, and edit them.

User defined templates: While we are using the WYSIWYG approach, "templates" of a sort are very useful. Say you want a consistent page layout across your web site, with three or four common page layouts. With good WYSIWYG editing applications there a "library" in which you store these templates. You design a sample page and store it in the library, and in the sample page you mark which areas can be edited and which cannot. Each time you create a new web page, you can choose which of these page designs to use through choosing the template for the page. Further, any changes to the template page get automatically propagated to each page that uses the template. This gives an immediate benefit to consistency on the web site, as each page is guaranteed to be updated to match its template. It also saves a lot of time, because without this feature keeping consistency either means never changing the page layout or manually updating each and every page any time you change the page layout.

"Site Browser": A web site is a conglomeration of a whole slew of files of many kinds. Further the files must all be under one directory and arranged under that directory in the way you want them arranged on your web site.

Editing javascript actions: You can create a sense of more aliveness to your web pages through javascript, such as drop-down menus and buttons that change their look as the user mouses over them. You can either learn javascript yourself, and manually write the code for each page element you use the javascript in, or the WYSIWYG editor helps you write the javascript.

Uploading to web server using FTP or WEBDAV: Of course the web site content is stored on a server computer, while you're editing the files contained on your local computer. This means copying the files to the server computer. This is done with either the FTP or WEBDAV file transfer protocols, and no you don't have to know what either of thos acronyms mean. It would be nice if the editor software would directly fetch the files to edit from your web server without having to keep a local copy on your computer, but I don't know of web editor software which can do that. They do, however, keep track of file access dates to minimize the amount of data to upload when you update your site.

Control web page look & style using Cascading Style Sheets (CSS): CSS is a relatively new and upcoming standard that revolutionizes and simplifies controlling the look of your site. Rather than set "style" information on each object you're customizing, you instead define the overall style of your site in a "CSS" file (a "style sheet") and then reference the CSS file from every page of your web site. Then for certain types of changes all you need do is change the CSS file, and every page on your web site is updated automagically. Further end users can also use CSS files of their own, for example if they have vision difficulties they could define a CSS file that makes all the text bigger letting them read it.

Help with the new Section 508 Accessibility standards: Speaking of handicapped people, the U.S. federal government has new standards for "Accessibility" they're requiring of many web sites. It's called "section 508" and it's a big deal. It makes your web site "accessible" (that is, usable) by people with vision issues.

Color and pallette management: There are pleasing combinations of colors, and then there are displeasing combinations. It's helpful to have a definable color pallette so you can choose the pallette and then use just those colors.

Design mode/helpers for precise object placement: Often web designers want to make their web pages look like what you can get in print media using software like InDesign. This means precise placement of objects. It can be done by hand, but it's better to let the software do it because it's so hard.

XML and XHTML editing: The Internet is slowly moving to using XML formats for the files. While it's not important to precisely know what this means, it is important to consider this for the future compatibility. HTML in particular is not XML compliant, and ought to be phased out sometime in the future if anybody gets brave enough to actually do so. XHTML is an XML compliant form of HTML which the world could transition to, if there were to be enough bravery to do so.

Use open standards: The web is about openness, and its viewability on any computer. The web will not work if web sites have proprietary lockins that force users to use a specific computer. Hence it is best if your web editing software uses the open, rather than proprietary, standards.