Find Out More About WYSIWYG Web Editors
WYSIWYG – what is it? Why WYSIWYG website builder are so attractive for novice webmasters? What are leading WYSIWYG editors? What are the advantages of WYSIWYG editors? What are the similarities of WYSIWYG editors and MS Word? Why professional web developers usually do not like WYSIWYG web builders? What are the myths about WYSIWYG editors, and why it is not true? In this article we will answer on these and many other questions.
First of all let’s define what is WYSIWYG website builders or as is often said – WYSIWYG editors, although in reality it is a bit different concepts. WYSIWYG means What You See Is What You Get – the general principle of work of many modern web interfaces and online soft. WYSIWYG editors are no exception and allow even beginners webmasters to edit/build websites since they don’t imply the presence of any special knowledge in the field of website development. Leading WYSIWYG website builders are Wix, Shopify, Weebly, Jimdo, BigCommerce, Moonfruit and many others ( full list ), each of them has their own specialization, their own pros and cons. And now let’s sort out the specific points related to the WYSIWYG editors.
Arguably, every novice website creator finds WYSIWYG editors the strongest enabler for venturing into the vast virtual world of WWW. Free website builders talk at length about their WYSIWYG website builders that users can quickly learn and leverage to create sophisticated and aesthetically impressive web pages. Enabling users to create web designs without requiring any knowledge of HTML, these visual editors are also simple to operate, courtesy the resemblance to standard text editors regularly used with Windows and other operating systems. That said, there is always a tussle, a mental debate, a tug of war going on between web users who love to code their way to creating web designs, and those who consider WYSIWYG more powerful. Let’s try to find out some less obvious facts and attributes of WYSIWYG editors, so that you can appreciate their importance, uniqueness, limitations, and more.
WYSIWYG editors are NOT like Word
It’s understandable how web users compare their visual editors to MS Word or any popular text editor. However, realizing that these two platforms of content creation are not similar, in technical terms, is important for web developers. Desktop based word processing applications are designed to work with static layouts.
On the contrary, website builders that include WYSIWYG editors in their interfaces do so to generate HTML version of the content created through the visual editor. This HTML content is specifically used for dynamic web pages. Then, WYSIWYG editors generate semantic content, whereas desktop word processors generate formatted content.
Semantic content is optimized to work with web bots, search engine crawlers, different screen sizes, and dynamic environments, whereas formatted content is pretty lifeless. You’d often notice how pasting content from MS Word to WYSIWYG editor tends to mess the formatting up. Now you know why that happens.
Understanding how WYSIWYG editors fit into the complete online website builder experience
Beginners tend to view the visual editor as the website builder itself, which is not the truth. A WYSIWYG editor is entrusted with the task of generating rich semantic content on the web, mostly on pre-existing pages. Creating a website involves several other phases, such as getting hosting space, a domain name, domain hosting, and more. Also, it’s important to understand that WYSIWYG builders differ from desktop word processors as they can’t save the created content in a file format, such as .doc, .txt, etc.
At the end of your editing session in the editor, what’s created is a long HTML code that when executed, will generate content that looks visually like what you created in the editor. The HTML code itself is not even remotely similar to the visual content! If you want to transform the HTML to a document format, you’ll need a special convertor to work in tandem with the WYSIWYG editor. Most website builders don’t offer such convertors, purely because there’s no need of them!
Debunking the WYSIWYG editors generate bad and bloated code’ myth
Purists have often contested that website builders don’t generate optimized code for the website. However, this is far from the truth. Firstly, the code generation is done by the WYSIWG editor integrated into the website builder, not the builder itself. Then, no WYSIWYG editor can be generalized as a tool that created inefficient HTML code.
The common accusations are that the code generated by these editors includes lots of additional and unnecessary tags, elements that are not closed, and blocks that are not intuitively easy to understand by human observation. Bad nesting is another commonly talked about flaw in HTML code generated by WYSIWYG editors. However, website builders implement functionalities to ensure that the code generated is optimized on all these parameters. What’s more, sophisticated website building packages such as Dreamweaver even let you customize how HTML code is to be formatted, which enables you to use the tool for adding foreign HTML code without messing up the cohesiveness of the original code.
Similarly, popular website builders ensure that the HTML code created by the WYSIWYG editors is optimal, concise, and efficient. In fact, most website builders allow you to use your HTML and CSS skills to supplement the visual editor.
Some more facts to help you understand WYSIWYG editors better
Before we wind up, here are a couple of facts to help you use visual editors better:
- Interaction between web browsers and visual editors – Depending on the accessibility settings of the web browser you use, the WYSIWYG editor’s accessibility might be affected. That’s because these editors require a browser to function, and are hence not immune from accessibility flaws built into the browser. If you find your visual editor messed up, try in a different browser!
- Beyond buttons – Modern website builders facilitate sophisticated WYSIWYG editors which not only allow buttons to perform functions such as text alignment, font resizing, etc., but are also drag and drop enabled.