Imagine a world where creating digital content is as intuitive as arranging physical objects on a canvas. A realm where your creative vision seamlessly transforms into a digital reality, where the boundaries between design and output blur, and where what you see during the creative process is precisely what you get in the final result. In what has only taken off in the mid twenty-teens, this latest innovation in web design has become ubiquitous, from DIY site-makers, to WordPress, to offline visual editors that generate code as you build.
WYSIWYG (pronounced “wissy-wig”) stands for “What You See Is What You Get”. It describes software that allows users to create or edit content in a visual interface, closely resembling the final output. You likely use such software all the time. A great example is a word processor. When you print your document, the printed form matches what you see on-screen. That is to say, what you see is what you get.
What We'll Cover
What it means for websites
More often than not, you’ve heard of WYSIWYG web tools as “page builders” or “visual editors”. They often include features such as formatting options, drag-and-drop functionality, and the ability to insert images and other multimedia elements into the content. WYSIWYG editors can be useful for users who are not familiar with coding or markup languages. It also offers convenience for those who are familiar with coding but prefer editing visually and in real-time.
WYSIWYG editors can be a great way to create and edit content, but they have some limitations. One limitation is that they can be slow and unresponsive, especially when working with large documents. They need to load not just the tools needed to edit, but also all the means by which to display the final website in real-time. Another limitation is that they can be difficult to use for complex formatting tasks. Despite these limitations, WYSIWYG editors are a popular choice for many users. They are easy to use and provide a clear visual representation of the final product.
What’s great about it?
There are several reasons why someone might want a WYSIWYG application for their website, even if most of the work is handled by a dedicated designer or design company:
- User-friendly: A WYSIWYG application can be more user-friendly for anyone not familiar with coding or markup languages. It can allow them to create and edit content without needing to know HTML, CSS, or JavaScript.
- Efficiency: WYSIWYG editors can be more time-efficient than coding directly in HTML or CSS. This is especially true for simple or straightforward website layouts. They can allow anyone to create or update their website content more quickly than if they had to write the code from scratch.
- Design consistency: A WYSIWYG editor can help ensure design consistency across a website. By using pre-designed templates or layouts, anyone can create content that matches the overall design of the website without needing to know the specific design elements or CSS styles.
- Accessibility: For customers who have accessibility needs, a WYSIWYG editor can make it easier to create accessible content. It also typically includes responsive design features by default. Many WYSIWYG editors also come with accessibility features built-in. Such features include adding alt text to images or create headings that are correctly structured for screen readers.
Even if you have technical know-how and want to manage a website yourself, WYSIWYG applications save you time and hassle, which ultimately save you money. Much of this convenience is priced-in by the multitude of third party plugins. The same goes for the earlier-mentioned site builders, which have tiered pricing depending on desired features and functionality.
What’s not so great about it?
While the main perks of WYSIWYG are broadly grouped under “time efficient”, there is a tradeoff. The cons can be best summed up by “technically inefficient”, namely:
- Code Bloat: WYSIWYG-generated code can be messy. It often includes unnecessary tags, inline styles, and excess markup. This can impact site performance and SEO.
- Limited Customization: While great for basic designs, WYSIWYG struggles with intricate layouts or unconventional styling. If you have specific requirements, you might hit roadblocks.
- Dependency on Tool Quality: Not all WYSIWYG editors are created equal. Some produce cleaner code than others. Choose wisely!
WYSIWYG and WordPress
WordPress is still the primary content management system (CMS) and design platform used in web development. If you haven’t used it in a few years, you may be interested to know WYSIWYG builders have made their way to this popular platform.
Most WYSIWYG editors are either desktop applications or freemium site builders with their own interface, code, and set of benefits and drawbacks. You may have heard of WordPress being the platform driving the majority of websites on the internet. Much like other site builders, WordPress has its own set of benefits, drawbacks, interface, and functionality.
More recent versions of WordPress feature the native Gutenburg page editor as the default design tool for your webpages. Initial iterations on the editor were certainly not WYSIWYG. You would need to preview what you made to see everything the way it would show up after publication. More recent changes to Gutenburg, however, are shifting closer in the editor to what you could expect to see after publishing your pages. Combined with the customization potential of the WordPress platform, and you have a solution that marries convenience with capability.
What you should get
We think WYSIWYG applications are worth looking into if you are interested in managing your website directly. It helps you edit website content quickly and efficiently, and avoid having to code every page in HTML, PHP, or CSS. This means you can iterate quickly on a design, and ultimately better control how your website looks with less headache.
Remember, the best approach depends on your goals, skills, and project requirements. Whether you embrace WYSIWYG or hand-craft every line of code, the key is to create delightful user experiences.
