What is WYSIWYG in web design? (original) (raw)
WYSIWYG is an acronym for What You See Is What You Get. In computing and website development, it 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).
Why is WYSIWYG software used?
Compared to traditional editors, a WYSIWYG system doesn't 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 WYSIWYG website builders, like Wix, 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.
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.