WYSIWYG editors: designing content without code

Behind the acronym WYSIWYG hides the expression “What You See Is What You Get”, namely: you get what you see. On this principle, opinions differ. Is it a good idea to only work superficially on texts and websites and let the programs write the corresponding code themselves in the background? Discover here the advantages and disadvantages of the idea and the main WYSIWYG editors.

What does WYSIWYG mean?

This somewhat confusing sequence of letters means, quite simply, that the text as it appears in the editor is also displayed that way in the final product. It's hard to imagine it any other way for most users if they only know Word as a word processing program. Indeed, Microsoft software is a good example of a WYSIWYG editor. What you see on screen, whether it's text or layout with font, bold, paragraphs, etc., will be exactly what your printer renders as well. For example, if you want to italicize a word in your text, all you have to do is select it and click on the corresponding button.

In fact, Word saves you from writing code. Without a program like Word, you would have to enter markers in your text (e.g. Mot), which the terminal interprets and converts. In our example, this terminal would be the printer. But converting the Word document to a PDF file or presenting the document in a browser can also be considered digital publication and therefore output. For HTML editors, the question is whether they need WYSIWYG. Before going into detail, however, it is worth taking a brief look at the history of these publishers.

Functions of WYSIWYG HTML editors

A WYSIWYG editor should allow users without extensive HTML knowledge to create a website. With such a program, users do not enter the code manually, but use the software to do so. This then converts it into HTML code in the background.

• Police : When the Web was created, the possibilities of using different fonts were still very limited. Aside from Times New Roman, Verdana, and Arial, which were installed on most computers, web designers could not use other fonts. Indeed, we could not assume that all browsers could support them. This problem is now less relevant. In a WYSIWYG HTML editor, users can choose from many fonts.
• Font formatting : the text can be italicized, bold, underlined, crossed out or in small capitals. With a WYSIWYG editor, whether for creating HTML code or for word processing, users do not need to make markups manually, but can process the desired part of text with the press of a button.
• Layout : Typing boxes and white space are important in the appearance of a website. By positioning content, web designers can give their site a certain style. Without the capabilities of WYSIWYG, programmers will need to specify white space, that is, areas that are not filled with content, pixel by pixel.
• Structure : as with classic texts, the content of a website must be structured so that visitors can find their way around it. Headings (or subheadings), which can be easily set in WYSIWYG editors, guide readers through the text.
• Paintings : Web content can be enriched with lists and tables. With software that supports WYSIWYG, web designers can directly insert their elements and do not need to enter them in code.
• Media : Websites are not just text. Videos, images, and other graphics make up a large part of the Internet. For these contents to also be displayed, site creators must integrate them into the HTML code. WYSIWYG HTML editors do this automatically. In most cases, users can even drag/drop corresponding objects to desired locations.

Editors that support WYSIWYG have more functions than just designing content: for example, it is often possible to publish content via the editor directly to your website. Many HTML editors do the work for their users: for example, they display the website's subpages in a clearly visible sidebar. In addition, it is interesting to be able to switch in its editor between the WYSIWYG view and the code.

WYSIWYG editors for HTML

Using a WYSIWYG HTML editor pays off in many situations. Beginners in particular can thus already create their own websites. In the following sections, we have grouped together some of the most well-known programs for you.

Dreamweaver

Macromedia launched Dreamweaver from 1997 (then only for Mac OS). Since then, software giant Adobe has acquired Macromedia.

SeaMonkey Composer

With SeaMonkeyusers get a complete Internet suite on their computer. In addition to a browser, email and IRC clients and an address book, SeaMonkey Composer also includes its own HTML editor.

KompoZer

KompoZer also comes from the Mozilla environment. Like SeaMonkey, the structure of this WYSIWYG HTML editor is very simple.

Brackets

Brackets is distributed by Adobe, but unlike Dreamweaver, it is open source and available for free. Brackets is primarily a text editor and not a WYSIWYG editor. With its preview function, the program nevertheless comes close to graphic editing software.

NetObjects Fusion

The first version of NetObjects Fusion appeared in 1996, developed by former Apple employees. The WYSIWYG principle defended by NetObjects Fusion even looks more like a desktop publishing program than a typical HTML editor. Users of the software organize website elements using drag-and-drop, pixel-perfect.

openElement

openElement is another free WYSIWYG HTML editor. It is based on Chromium code, which is also the basis of Google's Chrome browser. Here too, building a website works by inserting and moving elements in a graphical view.

RocketCake

The free WYSIWYG HTML editor RocketCake does not normally require knowledge of HTML or CSS either. The structure of this editor is similar to that of its competitor openElement.

In the center is the editing area, on the left and right a list of website elements as well as file navigation. The particularity of this program is that it allows you to easily create responsive websites for mobile devices. This is notably the role of the breakpoint editor: It allows web designers to define points in the CSS where the layout changes depending on the size of the screen. Of course, RocketCake also allows you to edit the code directly.

TOWeb

TOWeb from Lauyan Software takes the same WYSIWYG approach as RocketCake. The two programs notably share their focus on responsive design.

Disadvantages of the WYSIWYG principle

When starting out, WYSIWYG editors may seem like the perfect solution: even without knowledge of HTML or programming, (Web) documents suitable for publication can be generated on a computer. But for various reasons, some users prefer to use an editor like Notepad++, for which code must be directly entered.

• Lack of control : WYSIWYG editors perform formatting on which the user can only act by navigating through numerous windows and menus. This is not the case when entering HTML or other markup languages: creators see exactly what should happen with the text during compilation. This is why some users use the TeX macro languageor the LaTeX software derived from it, to create texts for printing or PDF files. Originally developed for scientific work, TeX makes it possible to follow precise formatting instructions and to more easily insert mathematical and scientific formulas into the body of the text.
• Internet-specific issues and different display types : even with WYSIWYG, the result is not necessarily as it appears on the site designer's screen. Indeed, the single end result does not exist on the Internet. Different systems and browsers sometimes display content differently, not to mention that mobile devices also have different display modes. This is why the promise “What You See Is What You Get” is meaningless, at least when it comes to websites. This is why web designers usually test their pages on different systems before putting their results online.
• Code quality : WYSIWYG editors create HTML code in the background. However, we cannot always assume that the code thus created is valid for professional use. In the past, web designers have regularly criticized these programs for producing source code unnecessarily inflated or erroneous. This causes long loading times and display errors.