We recommend:

 Get Started Today, It's Easy!

WYSIWYG and Drag-and-Drop Principles in Website Builders

You may often hear the terms ‘WYSIWYG’ and ‘drag-and-drop’ and wonder what exactly these terms refer to. If you’re a frequent reader of this blog, you certainly know what they mean, so you can simply skip this post. But if you’re a newcomer, this article is right for you.

What-you-see-is-what-you-get or WYSIWYG refers to an application that shows users what they’re about to build/print/produce before the final product is ready. WYSIWYG systems display content in a form closely corresponding to its appearance as a finished product.

WYSIWYG is especially popular in the web publishing industry. By working in a program providing a WYSIWYG editor, let’s say a site builder like Weebly or Wix, a user doesn’t have to know HTML in order to create a website. Using such an application feels more like a text editor than a complex web publishing app. Just about any modern website builder provides a WYSIWYG interface.

Wix Editor

Now let’s talk about drag-and-drop. It refers to manipulating objects by using the mouse, where you select one or more files and drag them to another place.

Drag-and-drop is a very common feature in website builders. Let’s take Weebly as an example. It provides a WYSIWYG interface where users can select objects in the left-hand toolbar and add them to the page through drag-and-drop.

Weebly Drag-and-Drop

Or uCoz website builder:

uCoz Constructor

Though the two editing principles do significantly simplify the process of website creation, they still have some drawbacks. Unlimited freedom is great, but the lack of structure can also become annoying. For instance, if you decide to add an element at the top of the ready page, you’ll have to move each object down the page in order to prevent overlapping. It can also be difficult to align elements perfectly.

What I’m trying to say is that full control isn’t always the best option. Many platforms limit their drag-and-drop capabilities to prevent user-side errors, produce cleaner code, and also give the ability to switch templates. Wix site builder, for example, doesn’t let users to swap designs.