top of page

Wix Blog

Step-by-Step Guide: How to Design a Website

Wix Blog

Best Websites for Your Inspiration

Resource

Create Your Own Website

WYSIWYG


 

What is WYSIWYG?


WYSIWYG is an acronym for What You See Is What You Get. In computing and website development, this refers to a software whose user interface (UI) allows the user to view their real-time edits on a display that resembles the final published outcome.


With word processors, such as Microsoft Word, the WYSIWYG interface allows the display to simulate the document configurations (e.g. fonts, line breaks, and final pagination) that would appear when printed.


When understanding how to make a website featuring a WYSIWYG software, the platform’s editor displays precisely how each page would appear to an end-user. Some WYSIWYG applications use various modes for emphasizing the subtle differences between what the user sees and what they get:


  • Composition mode: The display shows the user a close-to-the-end result, but composition information like non-printing characters (e.g. visual representations for space, line breaks, pilcrows) also appear.

  • Preview mode: The application presents a display as close to the end result as possible.

  • Layout mode: The display shows the user a close-to-the-end result, with additional non-printed details to facilitate setting a proper layout (e.g. grids or margin lines).



 

You may also be interested in:



 

Why is WYSIWYG software used?


Compared to traditional editors, a WYSIWYG system does not require the user to use markup language like HTML or description codes. Since users don't need to know the commands to create or manipulate online or printed documents’ layout and content, this software is often considered more accessible or user-friendly.


What really distinguishes WYSIWYG software from traditional markup methods is a streamlined workflow that allows the user to visualize the final product as they create and edit it. Anyone— especially developers and UX designers—can easily make adjustments in real time without interruptions. With traditional markup methods, the user is limited to only viewing the walls of code they enter and unable to preview the changes they make.



What are the advantages and disadvantages of WYSIWYG?


Advantages of WYSIWYG:


  • Easy to use: Most WYSIWYG editors use a drag-and-drop interface to arrange elements, allowing users to intuitively create a document or web page without codes or commands. These editors let you build your website from scratch and then resize and format it with the click of a button.

  • Faster: For many users, a WYSIWYG editor works faster than coding a page from scratch, since they don’t need to wait for a generated preview.

  • Flexibility: The user interface of WYSIWYG tools make it possible to change and edit elements or update a design easily and from almost any location or device.


Disadvantages of WYSIWYG:


  • Discrepancies in representation: Occasionally, you’ll want to see what your end result will look like on a variety of devices, such as a tablet or a smartphone. Some WYSIWYG editors do not give users the option to view various screen sizes and resolutions.

  • Inconsistency: WYSIWYG software have different user interfaces, which can make it difficult for users to switch from one to another.

  • Limited functionality: Drag-and-drop interfaces can also present limitations, and users sometimes need HTML to achieve desired customization.


WYSIWYG FAQ

Where are WYSIWYG editors commonly used?

WYSIWYG editors are commonly used in word processors, website builders, email clients, content management systems (CMS) and graphic design software to simplify content creation and editing.

Are WYSIWYG editors suitable for web design?

Can I switch between WYSIWYG and code view in web design tools?

Do WYSIWYG editors deliver clean HTML code?

Are there open-source WYSIWYG editors available?

Are there any limitations to using WYSIWYG editors?


Comments


Related Term

Hypertext Markup Language (HTML)

Related Term

Cascading Style Sheets (CSS)

Ready to create your own website?

The latest trends in business, marketing & web design. Delivered straight to your inbox.

Thanks for submitting!

bottom of page