WYSIWYG: I spy with my little eye

The acronym WYSIWYG stands for 'what you see is what you get'. Is it a good idea to work superficially on texts and websites and let the programs write the code themselves in the background? We highlight the advantages and disadvantages of this idea and introduce the most popular WYSIWYG HTML editors.

Simply put, the somewhat confusing sequence of letters means that how the text appears in the editor is how it will be displayed in the final version. For most users that have Word as their word processing program, it’s hard to imagine it looking any different. This is because Microsoft’s popular software is a WYSIWYG editor. The way you enter the text, including font, bold print, paragraphs, etc. is exactly how it will be printed. For example, if you want to italicize a specific word in your text, you select it and then click on the corresponding button.

However, texts like this should be seen as code. Without programs such as Word, you would enter a tag in your text (e.g. '<italic>word</italic>'), which the device then interprets and implements. In our example, the device would be the printer. However, converting the Word document into a PDF file or displaying the document in a browser can also be seen as an output e.g. a digital publication. The question of whether an HTML editor is a WYSIWYG editor or not plays an important role. But before going into detail, it makes sense to briefly look at the history of these editors.

Before computers were invented, everything was WYSIWYG, because no compilation was needed: when you write on a piece of paper or use a type writer, you get a concrete result. It was only when computers and writing programs started being developed that developers realized how important it was for users to see what their work looked like before printing it. After punch cards were no longer sufficient for programming, software developers and scientists needed another way to enter a code: a text editor. The first word processing programs were therefore editors for programmers. However, the character sequences you entered in these programs were never meant to be displayed as a document.

One of the first word processing programs was WordStar, which was released in 1978 and still has a prominent user today in author George R.R. Martin. WordStar originally ran on the operating system CP/M and only had a few functions. In the first version, writers still had to work with tags for the typesetting. But the general opinion is that the program was the first WYSIWYG editor. It was possible to use italics or bold formatting in a text and see the results on the monitor straightaway. The problem at the time was that the computer graphics weren’t very advanced: the computer systems couldn’t display an exact reproduction of what the text would look like when printed or published.

With the possibilities of PC and Mac systems increasing, text could be displayed better on the monitor. But the WYSIWYG principle doesn’t stop at word processing: editors, which already display the result as you input the text, play an important role in the creation of websites. Most websites are written in the Hypertext Markup Language (HTML). As with markup and programming languages in general, the code must first be compiled before the result is visible.

Therefore, if you create a website using HTML, you need to be able to see the subsequent result. This is why WYSIWYG HTML editors are becoming increasingly popular, since they make this task easier. The first of its kind was WebMagic by Silicom Graphics in 1995. In the following two years, the well-known editors FrontPage from Microsoft (now no longer available) and Dreamweaver from Macromedia (today part of Adobe) were added to the mix. The demand for good editors is high, but what should a software be able to do?

A WYSIWYG editor for creating websites enables users without extensive HTML knowledge to create websites. With programs like these, users do not enter the code by hand, but use the software’s functions to convert it into HTML code in the background.

• Font: in the early days of the web, the font possibilities were still very limited. Apart from Times New Roman, Verdana, and Arial, which were installed on computers as standard, web designers didn’t have many fonts available to them and it was difficult to know whether the website visitor’s browser could display them or not. Nowadays, this is hardly ever a problem. With WYSIWYG HTML editors, users can choose from a variety of fonts.
  
  
• Font style: This is when the text is marked in italics, bold, underlined, crossed out, for example. With a corresponding WYSIWYG editor, whether it’s for creating HTML code or for word processing, users do not have to change the text manually, but can edit the respective part of the text by highlighting it and then pressing a button.
  
  
• Layout: Print space and white space make up a large and important part of a website’s appearance. By positioning content in certain ways, web designers direct the visitor’s attention to where they want it to be, and are also able to give the website a certain style. Without the possibilities of WYSIWYG, programmers would have to specify white space i.e. the area not filled with content, down to the pixel.
  
  
• Structure: Similar to printed texts, website content must be structured so that visitors can find their way around. Titles and subheadings can be added using WYSIWYG editors, and help to guide readers through the text more easily.
  
  
• Tables: Web content can be enhanced with lists and tables. With software that supports WYSIWYG, web designers can insert elements directly and don’t have to enter them in code form.
  
  
• Media: Websites are not only made up of text; videos, images, and other graphic elements make up a large part of the World Wide Web. For this content to be displayed properly, website creators must embed them in the HTML code. A WYSIWYG HTML editor does this automatically. In most cases, users can even drag-and-drop objects to the desired places.

In addition to the content design, editors that support WYSIWYG also have other functions: For example, it is often possible to publish content directly via the editor on your own website. Many HTML editors also help users with project organization e.g. they display the subpages of the website in a clearly visible sidebar. In addition, it makes sense to switch between the WYSIWYG view and code view within the editor. Even though the principle of 'what you see is what you get' is great, the programs are limited and errors can occur without you knowing the cause.

At first, WYSIWYG editors seem to be the perfect solution: Even without HTML or programming skills, it is possible to create (web) documents on your computer that are suitable for publication. But for various reasons, some users prefer to use an editor like Notepad++, where they have to enter the code directly. This gives them complete control over what the final result will look like. This is also true aside from HTML: anyone who has ever been on the verge of despair when creating a letter using Word, will know what this means. The program takes care of formatting, which users can usually only influence after browsing through numerous windows and menus.

This is not the case when entering HTML code or other markup languages: creators can see exactly what should happen to the text as they’re creating it. For this reason, some users use the macro language TeX or the LaTeX software package based on it to create texts for print products or PDF files. Originally developed for scientific work, TeX enables you to adhere to exact formatting specifications and to better integrate mathematical and scientific formulas into the body text.

The internet can sometimes cause problems: With WYSIWYG, the result might not necessarily look like what’s displayed on the monitor. This is because there isn’t just one end result on the World Wide Web. Different systems and different browsers sometimes display content, as well as the fact that some devices have different display modes. That’s why the promise 'what you see is what you get' is an empty one, at least when it comes to websites. Therefore, web designers usually test their pages on different systems before they put their results online.

WYSIWYG editors create HTML code in the background. However, you cannot always assume that the resulting code makes sense from a professional point of view. In the past, web designers have repeatedly criticized these programs by saying they produce source code that is unnecessarily long or incorrect, which leads to longer loading times and errors.

It’s not bad to rely on a WYSIWYG editor – even beginners can create their own – albeit simple – websites. These programs are the most popular:

Macromedia released Dreamweaver in 1997 (then exclusively for Mac OS). Meanwhile, the software giant Adobe bought out Macromedia and continues to develop Dreamweaver – as well as Flash, another Macromedia project. The editor can be used in both WYSIWYG and code mode. Both views can also be displayed side by side so that any changes in the code can be seen in the preview. The preview even works with different browsers and mobile devices. The latter can be linked to the project via a QR code. With an integrated publishing function, users can also move the created content directly to their servers and place it online. Dreamweaver is part of the Creative Cloud and can therefore be subscribed to.

With SeaMonkey, users get a complete internet suite on their computer. In addition to browsers, e-mail, IRC clients, and an address book, SeaMonkey Composer also has its own HTML editor integrated. The application package was developed from the discontinued Mozilla Application Suite, but developers are still in close contact with the Mozilla Foundation. Like the entire suite, the Composer is very simple and is therefore best suited to uncomplicated website projects. You can switch between the HTML and WYSIWYG view, but the small, free program can’t do much more. This editor is especially interesting for purists.

KompoZer was also created from the same environment as Mozilla. Just like with SeaMonkey, the structure of the WYSIWYG HTML editor is very simple. Users can switch between the graphical display and the source code. Useful features include the form assistant, a CSS editor, an FTP site manager that allows users to upload their projects, and a markup cleaner that searches written code for unnecessary changes and checks that the entire website complies with W3C. Like SeaMonkey, KompoZer is not currently undergoing any further development. The project was published under various open source licenses.

The further development of KompoZer is called BlueGriffon and has even more features. As with Dreamweaver, you can display both views parallel to each other. The paid version (there is also a leaner, free version) also includes an ePub editor. This can be used to create eBooks. From the basic license onwards, users will also have access to about 2,500 templates that will make it easier to create their own website.

Brackets is distributed by Adobe, but unlike Dreamweaver, it’s open source and is free of charge. Brackets is primarily a text editor and not a WYSIWYG editor. With the preview function, the program is nevertheless similar to graphical editing software. All changes are displayed in real time in a browser window. The only disadvantage is that this only works with Google Chrome. How web browsers display the website can only be checked afterwards. Another useful feature: CSS files can be opened and edited directly from the code in the appropriate places – this speeds up the code writing, since web designers do not have to switch between different files. These changes are also displayed in the live preview. Developers have already developed hundreds of extensions for Brackets. This includes not only visual adjustments to the user interface, but also useful tools for auto completion or debugging.

The first version of NetObjects Fusion was released in 1996 and was developed by former Apple employees. The WYSIWYG principle represented by NewObjects is even more reminiscent of a desktop publishing program than a typical HTML editor. Users of the software use the drag-and-drop feature to arrange website elements with pixel accuracy. Therefore, no HTML knowledge is necessary. However, experienced web designers can switch to the source code to make changes directly in the HTML code. Another special feature is the project management view: here the website’s navigation is determined. Users arrange the individual subpages and their links in the form of a tree diagram. NetObjects Fusion is fee-based and only available for Windows. The free version – Essentials – is aimed primarily at private users.

openElement is another free WYSIWYG HTML editor. However, this is based on the Chromium code, which is also based on Google’s Chrome browser. Again, you can build a website by inserting and moving elements in a graphical view. While the editing area is in the middle, available elements are arranged to the right in a sidebar. This way, users can simply drag thedesired objects into the WYSIWYG editor. The individual pages of the project can be found in Site Explorer or, when opened, as tabs above the editing area, so you can quickly move from one page to the next. Web designers can also view the source code on each subpage to make changes right there. The program is both free of charge and works under the open source license, but so far, it’s only available for Windows.

The free WYSIWYG HTML editor, RocketCake also doesn’t require any HTML or CSS knowledge. Its structure is similar to that of its competitor, openElement: the editing area is in the middle, a list of website elements and file navigation are on the left and right. The special feature of the program is that it makes it easy to create responsive websites for mobile devices. The Breakpoint Editor is responsible for this: web designers use it to define points in the CSS where the layout changes with different display sizes. Of course, it’s also possible to edit code directly in RocketCake.

TOWeb from Lauyan Software follows the same WYSIWYG approach as RocketCake. The two programs focus particularly on responsive design. In addition, TOWeb offers the simple construction of its own online store as well as support with search engine optimization. The software creates the latter by providing alt tags and meta titles for editing as well as generating HTML code that complies with W3C. With the publishing function, users can even choose from pre-designed hosting services to make uploading easier, which should be particularly interesting for beginners. TOWeb has a price tag, but if you don’t mind restricting yourself to one website, you can use the program for free. For each further project (and especially for e-commerce solutions), you are required to purchase one of the three options.

Editors where the code is hidden in the background make it possible for you to completely concentrate on the design. That’s why WYSIWYG editors, whether word processors or HTML editors, are interesting to users who want to see how the end product will look. These users are more often than not beginners, but this approach should also be worthwhile for media designers. Instead of taking care of the subtleties of individual markets, you can concentrate on the layout and content. However, this has some disadvantages: If you want to make changes beyond the design functions of the respective editor, you hit the limit of the WYSIWYG principle and still have to make changes in the source code yourself. Only then do users really have full control over the result.