Free Web Editors

Mozilla Composer

Mozilla is a free open source web browser that comes with a WYSIWYG web editor. Since it is one of the few free WYSIWYG editors that is still being maintained, I decided to take a look at it to evaluate if it's useful for newcomers wishing to develop their own website.

Where to find Mozilla Composer

Mozilla Composer comes together with the Mozilla web browser on which the Netscape browser is based. You can download Mozilla for various operating systems, including Windows, Linux and Mac OSX, from http://www.mozilla.org/

Testing Mozilla Composer

To test Mozilla Composer's ability to generate a usable and "real" web page (as compared to creating a rudimentary dummy page that is too simple for a real website), I used an old version of one of the pages on affiliated-business.com as a model. Basically, my aim was to re-create that page using the WYSIWYG portion of Mozilla Composer.

The reason that I had to use an old version of affiliated-business.com's page is because the new versions of the pages on affiliated-business.com use CSS for layout. Since Composer is mostly a pre-CSS HTML editor, it was not possible to re-create the page without manually entering most of my code into the HTML Source editor. Since my purpose was to test Composer as a WYSIWYG editor, I decided that it was simpler to use an earlier version of my site.

I used the version of Mozilla Composer that was distributed along with Mozila 1.2.

Mozilla Composer At a Glance

More details for the individual items in the above table follow.

WYSIWYG and HTML Source Editing

When Mozilla Composer is run, the web editor allows you to work in a WYSIWYG interface, called the "Normal" mode. This mode allows you to create and edit your web page and view the changes in a mostly WYSIWYG interface. I say "mostly" because the editor still gives you some sort of visual indication of things like tables with no borders so that you know where the table cells are (otherwise, the table will be invisible to you even while editing, making it difficult to work properly on your page).

There is also a "Preview" mode. This is similar to the "Normal" mode except the appearance of your page is exactly what it should appear in a Mozilla browser window. In spite of its name, you can still edit in this window.

The HTML editor also sports a "HTML source" mode, where you can view and edit the code generated by the editor.

There is also a "HTML Tags" mode. This mode shows you your web page in a mostly WYSIWYG format but with the addition of your main HTML tags highlighted on the screen. I actually found some use for this mode (to my surprise), when I was searching for extraneous HTML tags created by the editor since the graphical representation of the tags made it easier to look for them.

You switch between modes by using your mouse to click the appropriate tabs at the bottom of the screen. I have not found any keyboard interface to those tabs: even the Windows standard Ctrl-TAB key (to switch between child windows within a single enclosing window) does not work. This is inconvenient for people who like to work with the keyboard.

Drag and Drop Editing

I tested this facility using the Windows version of Composer. The web editor allows you to drag an image from an Explorer window onto the page. The editor then creates an image tag on your page. You cannot really position the image into any spot on the page - the image tag will be created in the portion of your page you dragged it to, according to the flow of the document. You cannot for example drag it to the centre of the screen and expect the editor to create either a table or CSS code to position it at that spot.

Likewise, when you create or edit your document, there is no way for you to drag images and text and position them at some arbitrary position on the screen, expecting the editor to generate the necessary layout code to keep them there.

In this sense, this editor requires you to have some knowledge of the tricks webmasters use to position their images and text, that is, either by using tables, which the editor supports, or by manually entering CSS code into the HTML Source portion of the editor.

Cascading Style Sheet (CSS) Code Generation

Mozilla allows you to set the editor to "use CSS styles instead of HTML elements and attributes". This CSS support in the editor is partial in many respects:

1. The CSS styles generated are always inline styles. They are applied to an element using the "style" attribute of that element, instead of either putting them all in a style sheet at the start of the page or in a separate file. This needlessly bloats the code on the page.
2. Not all formatting information are generated with CSS styles. For example, the font size menu items invariably generates HTML font tags with size attributes.
3. There is no built-in support for creating and editing a style sheet using the WYSIWYG modes.
4. For people who are using Mozilla Composer as their HTML editor, there is no facility for positioning elements using CSS in the WYSIWYG portion of the editor. If you don't know how to write "raw" CSS code, you will probably wind up using tables for layout, since table support in the Composer is fairly complete.

Generates Valid HTML Code

For those who have used certain commercial WYSIWYG web editors and come to expect numerous errors each time your page is validated against the W3 Consortium's standards, you will be pleasantly surprised to find that the code generated by Mozilla validates with no errors. Or at least, this was true of the page I generated for this test. Since this is a real web page and not a rudimentary web page (see above for more information), I think it's fairly safe to say that Composer generates valid HTML code as a whole (if not always).

For those who are interested, the code generated conforms to HTML 4.01.

Table Management

Mozilla Composer comes with fairly good support for creating and maintaining tables. I found that I could do whatever I needed to do with my tables purely through the WYSIWYG interface.

Form Management

As far as I can tell, Mozilla Composer has no direct support for creating and maintaining forms from the WYSIWYG interface. You can of course enter your form code using the HTML Source interface, and it will display correctly in the WYSIWYG tab.

Even for the absolute beginner, this may not be a problem, since many are likely to be using cut and paste form codes (along with the scripts to handle the backend) obtained from places like affiliated-business.com anyway. There is no way, though, that they can modify the form fields in Composer's WYSIWYG mode should they find the need to.

More than anything else, I think this lack of support for editing and creating forms is a major deficiency in the web editor.

Code Bloat Anyone?

I suppose it's unrealistic to expect a WYSIWYG editor to generate the same optimized code that one gets when one manually creates a page. As far as I know, none of the WYSIWYG editors I've examined (commercial or otherwise) ever manages the task.

In Mozilla Composer, code bloat comes in the form of the duplication of code that arises when formatting information is replicated across your entire document for all the various paragraph tags, span tags and so on. For example, the editor automatically creates new span tags with the font you selected everytime you create a new paragraph, instead of simply enclosing the entire block in (say) a div block with the appropriate style.

For example, you might get the following code:

Observe how the style is implemented in a span tag and how this tag is duplicated for each paragraph. A more efficient method will be to specify the tag as part of an enclosing div block, like:

Their CSS implementation is probably a straightforward and literal porting of the old metaphor of using the HTML font tags. This becomes obvious if you uncheck the "Use CSS styles instead of HTML elements and attributes" option. You get the following code instead:

As you can see, the old idiom requires the use of font tags within each block level tag. When Mozilla Composer is required to generate CSS code, it simply converts the font tag into an inline span tag with the font-family style.

You probably also noticed that the editor has a tendency to create unnecessary <br> tags as well.

Verdict

In general, I was favourably impressed with the editor. For a free WYSIWYG editor, Mozilla Composer is an editor that allows newcomers to quickly get started with their web page. Although it has a few deficiencies (form management, lack of support for arbitrarily positioning elements) that web designers might want, it is possible to work around them since the editor comes with a built-in HTML source editing mode.

Review of Nvu, a Free Standalone WYSIWYG Web Editor

The source code for Composer has been taken out of the Mozilla Suite and revised so that it can work as a standalone application. The program has also been improved, some of the minor complaints that I had about the old Composer appear to have been fixed, and many new features added. This new standalone WYSIWYG web editor is named Nvu.

Nvu (pronounced as "N view") can be obtained, free of charge, from http://www.nvu.com/ .

I used Nvu 0.90 (the Windows version) for this review. Please note that this is an early development version (even pre-Beta, which means that it's not ready for general public use since things are still being added, changed and tested), so there are bugs in its functionality. Although I encountered a few bugs as I tested the editor, for the most part, I will not mention the bugs here since they will probably be squashed by the time the release version is out.

I'm reviewing this from the point of view of its being used as a tool by novice web designers to create a website. Such a web designer will not know how to read or write "raw" HTML or CSS code and will rely on the WYSIWYG component to do all the work.

Nvu's Features at a Glance

Details for the above follow in the sections below.

In General

If you are familiar with Mozilla Composer, Nvu is not much different in terms of user interface. You are presented with a blank screen, much like a word processor, where you can proceed to write your page and insert graphics. Facilities that you typically need to create a page, such as the insertion of links, images, tables and forms, are available either from the toolbar, the menus or keyboard shortcuts, which make the editor convenient to use for people who are accustomed to working in different ways. For example, novices who like big self-explanatory buttons will find the toolbars helpful, while seasoned users who prefer not to lift their fingers off the keyboard can operate almost entirely using the keyboard. (You still need to use the mouse for some things: for example, you cannot switch between Normal, Tags, Source and Preview modes using the keyboard in Nvu 0.90.)

More so than its predecessor, Mozilla Composer, it is possible to create your entire site using Nvu's WYSIWYG editor. Basic tasks like insertion of images and links are easily accomplished, while more complex tasks such as table management are made easier with the use of the WYSIWYG interface.

Nvu also allows you to easily switch between the WYSIWYG editing mode ("Normal" mode), the HTML source mode where you can view the HTML code that the web editor generates ("Source"), a preview mode which allows you to see the page as the Gecko engine (the browser engine that powers the Mozilla browser and Firefox) would render it, and a "Tags" mode (which mystifies me till this day as to its purpose for existence) that shows your page with the HTML tags highlighted.

Table Management

Nvu's table management is, in my opinion, one of its strongest features. Creating a table, resizing it, adding rows to it is fairly easy. For example, resizing the table to a different fixed size is a matter of dragging the edges inwards or outwards. You can add rows to an existing table pretty much the same as you can in word processors like Microsoft Word - just tab from the bottommost cell in the table and another row is automatically created for you.

The only faults I can find with it at this time, for this version, are relatively minor. For example, the default width for the table that is created is only 100 pixels. In my opinion, the editor should leave the table size unspecified by default, allowing the browser to resize the table to suit the content. In any case, as I said earlier, this is a minor issue: it's a relatively simple matter to either resize the table with your mouse, or, if you prefer relative sizes, to invoke the table properties page with the "Table | Table Properties" menu and adjust from there.

Form Management

Form management is new in Nvu (that is, relative to Composer). The interface allows you to create forms for your site along with elements that you usually need for a form, like buttons, text input fields, text areas, etc.

As it stands in this development version, it is somewhat buggy, but I guess it will be fixed before Nvu reaches its release version. For example, while you can create a button using the interface, there is no way for you to specify the text to appear on the button using the WYSIWYG interface. Or at least, it's not obvious to me how you can do it, short of switching to the Source mode and adding it between the <button> and </button> tags. There are other glitches, but that is to be expected for a pre-Beta.

Cascading Style Sheet (CSS) Support

Nvu's CSS support, while improved over Mozilla Composer in some respects, must be counted as partial. On the plus side, all presentational aspects designed in the WYSIWYG editor appear to use CSS. For example, fonts, table sizes, etc, are all done using CSS.

The major failing in its CSS support is, however, its lack of support for users to design a multi-column layout using the WYSIWYG interface. As far as I can tell, there is no way (in this version) to create DIV blocks (or "layers" as commercial WYSIWYG web editors like DreamWeaver call it) that you can position arbitrarily. Sure you can invoke the CSS editor to do it yourself, or you can type it manually into the source editor, but a user who does not know CSS would have to resort to using the old metaphor of tables to create a site with more than one column. Bear in mind that the creation of multiple columns for layout is not an esoteric feature that only a few web designers want - it is a design used by many websites you see today.

Related to this is the web editor's inability to arbitrarily position a graphic at any point in a document. That is, you cannot drag an image and put it at any spot in the window. The position on the page where the image will land depends on the flow of your document. You cannot, thus, drag it (say) to the center of the screen and expect the editor to create the necessary CSS code to position it at the spot.

Having said that, in case someone new to web design is reading this, I must reiterate that it doesn't mean that there is no way to do these things in Nvu in the WYSIWYG mode. These failings merely relate to Nvu's CSS support in the WYSIWYG mode. You can still accomplish arbitrary positioning of images and create multi-column sites using the age-old method of using invisible tables to lay out your site.

Built-in Publishing (FTP)

Nvu includes built-in FTP support that allows you to upload your pages to your web host. It is usable as far as built-in FTP clients go and suffices for the basic task of uploading your pages to your site.

Other Features

There are numerous other features in Nvu. I will only mention the following:

• CSS Editor

  The web editor includes a built-in CSS editor that allows you to create your CSS styles interactively. It requires you to have a basic understanding of CSS so is probably only useful for people who already know CSS and just want something interactive to write the style sheet for them.

• Templates

  Nvu comes with support for templates. You can, for example, create a basic layout that you want for all your pages and save it as a template file. That template can then be loaded for each page you create for your site.

• Table of Contents

  The editor is able to generate a table of contents from all the header elements (eg H1, H2, etc) in your current document. It may be a useful feature if your document is long, and you want to have a table of contents at the beginning that links to various sections on your page.

• Markup Cleaner

  The Nvu web editor has a facility called "Markup Cleaner" which is able to remove some of the artifacts introduced by the WYSIWYG editing mode, such as empty blocks and trailing <br> tags. It's better than nothing, although when I tested it, it wasn't able to remove all the empty blocks or trailing <br> tags the Normal mode editor created, even when run a few times. (It needed to be run a few times in succession because each run appeared only to catch some of the instances of the things it was suppose to clean.)

Verdict

Nvu is an easy-to-use free WYSIWYG web editor with many features that allow you to create and maintain a fully functional website, complete with forms. Its current packaging as a standalone web editor, divorced from the Mozilla Suite in which it was born, is a factor in its favour, since it is now possible to recommend people to use it without introducing needless confusion. As it stands, it's primary deficiency is that it does not allow the user to create and arbitrarily position DIV blocks (so that one can, for example, create multiple columns and position graphic images), but this lack can be worked around by using other facilities already provided by the editor.