Optimizely Logo

Optimization glossary

WYSIWYG

What is WYSIWYG?

WYSIWYG (pronounced “wizzywig”) stands for “What You See Is What You Get.” It refers to editors or software that allow users to design and create content in a visual format, where what you see on the screen is exactly how it will look when published.

For marketers, WYSIWYG tools are an essential. They’re designed to make content creation easier for non-developers, allowing marketers to quickly create landing pages, design email campaigns, or format blog posts without getting tangled in HTML or CSS. Instead of focusing on coding, marketers can concentrate on the creative and strategic aspects of website content.

History of WYSIWYG

WYSIWYG has been around since the 1970s. Early word processors, like Microsoft Word and Apple’s MacWrite, were some of the first tools to use this approach. They let users see how their documents would look when printed out. In the 1990s, WYSIWYG editors were adapted for web design. Editors like Adobe Dreamweaver meant users could visually build websites without writing HTML.

Now, WYSIWYG is used everywhere — from content management systems to email marketing platforms. It’s made creating digital content easier for everyone, not just developers.

How WYSIWYG editors work

WYSIWYG editors work by showing a visual interface where users can create and edit content as it will appear in its final format. When you type text, add images, or apply formatting like bold or italics, the WYSIWYG editor automatically translates these actions into the appropriate HTML or CSS code behind the scenes.

The magic of WYSIWYG lies in its ability to handle complex code without requiring the user to know anything about it. It uses a backend translation engine to convert visual elements into code while at the same time displaying a clean, intuitive frontend editor.

For marketers, this means creating a landing page or email campaign can be as easy as using a word processor. You can drag and drop images, edit text, and experiment with formatting in real-time, knowing all the while that what you’re seeing on your screen is what your audience will experience when they visit your website.

Key features to look for in a WYSIWYG editor

While different WYSIWYG editors vary in functionality, most of them share a few core features that make them powerful tools for content creation: 

  1. Text formatting: You can change font size, style, and color, and apply formatting such as bold, italics, or underline without needing to know any HTML or CSS.
  2. Image/media embedding: WYSIWYG editors allow you to easily add images, videos, or other media to your content by dragging and dropping or clicking a button.
  3. Tables and lists: Creating tables, bullet points, or numbered lists is simple with built-in features that automatically apply the correct formatting.
  4. Linking: Users can easily add hyperlinks to their text, images, or other elements without manually writing out the HTML link tag.
  5. Drag-and-drop interface: Many WYSIWYG tools allow you to rearrange elements by dragging and dropping them into place, making the design process intuitive for marketers.
  6. Preview mode: Most editors offer a preview option so that users can see exactly how their content will look across different devices and screen sizes before hitting publish.

WYSIWYG tools for marketers

If you’re a marketer, you’ve likely encountered WYSIWYG editors in various tools. Here are a few popular WYSIWYG platforms that help streamline content creation:

  • WordPress: The Gutenberg editor in WordPress is a WYSIWYG editor that allows marketers to create blog posts and pages easily. 
  • Wix: A popular website builder with drag-and-drop functionality, making it easy to design beautiful, responsive websites without touching code.
  • Mailchimp: This email marketing platform features a WYSIWYG editor that allows marketers to create email campaigns with ease.
  • HubSpot: HubSpot’s CMS offers a powerful WYSIWYG editor for marketers to build websites, landing pages, and blog content quickly.
  • Optimizely: Optimizely’s Visual Builder is another example, offering the same WYSIWYG editing features alongside powerful personalization and A/B testing capabilities.

WYSIWYG: Benefits and limitations

WYSIWYG editors make content creation easy by letting users see changes in real-time without needing to know code. They’re user-friendly and great for quick updates. However, they can be limiting for more complex tasks and sometimes produce inefficient code that requires developer input.

WYSIWYG pros WYSIWYG cons 
User friendly: WYSIWYG editors are easy to use, even for marketers with no technical skills.   Lacks flexibility: Not ideal for more complex designs.
Real-time editing: As the name suggests, what you see in the editor is exactly what the final product will look like, and you can see changes instantly. Messy or bloated code: The automated code generated by WYSIWYG editors can be less efficient than custom coding.
Quick to build: Can deploy content faster.  Browser issues: Content can display differently across browsers.
No need for coding skills: Non-developer teams can create and manage content easily.      Heavy reliance on templates: Can lead to overuse of basic designs.

Different use cases for WYSIWYG editors

WYSIWYG editors are versatile tools that can be used in a variety of marketing contexts:

  • Email marketing: WYSIWYG editors in marketing software like Mailchimp or HubSpot allow marketers to create professional email campaigns with drag-and-drop functionality.
  • Content management: Platforms like Optimizely enable marketers to easily update blog content, create landing pages, and manage website content without needing a developer.
  • Website builders: Tools like Wix and Squarespace use WYSIWYG editors to make building and maintaining websites easier for users with no coding knowledge.

WYSIWYG FAQs

How is WYSIWYG editing different from HTML editing?

WYSIWYG editors let you create content visually, without needing to know HTML, while HTML requires coding to format and structure content. WYSIWYG is easier for non-developers, but HTML gives more control for those who know how to code.

What is an example of a WYSIWYG editor?

A well-known example of a WYSIWYG editor is the Gutenberg editor in WordPress. It allows users to create blog posts and pages by dragging and dropping elements, formatting text, and embedding media — all without writing any code. Other examples include Optimizely CMS, Wix, and Mailchimp’s email editor.