WYSIWYG is Dead; Long Live WYSIWYG

When we write documents and print them out, they look the same on paper as they did on our screen. This is so natural for us today that it almost feels like a stretch of the imagination to think that this was a technology that actually needed to be invented.

In the 1980s, when “desktop publishing” was just becoming all the rage, this powerful idea was called Wysiwyg or “What you see is what you get” (say it like “wizzy wig”). It was such an important development that today it’s strange when software doesn’t work in this manner. We expect everything to work this way — even some places when it doesn’t make sense anymore. Hot Page was designed with the idea that the web is such a place.

The array of devices that people will use to visit your web page is immense. There’s no guessing how your readers are going to arrive: what size screen they have, whether they are using a mouse or a touchscreen (or both), or whether they even have a monitor at all. Actually there’s is a way to know — it will of course be all of those possibilities at the same time. And thus “what you get” is always changing.

Interactivity also breaks Wysiwyg. If something is interactive, by definition it’s going to change its appearance. And when you’re editing text, you really don’t want interactivity distracting you. Something as simple as an FAQ with questions that open and close in an accordion can become very annoying to write in a Wysiwyg.

Web page editors typically have a Wysiwyg view and then a button that let’s you see the resulting code. The problem with the code view, is that markup makes it really hard to read text. But the problem with hiding code completely is that it’s often necessary to the function of a page.

The Hot Page editor works in a fundamentally different way: we don’t hide the markup, we just make it pleasant to read the text inside of it. We believe that everyone is capable of understanding how to use markup, edit things like HTML classes or CSS properties, or even add a JavaScript event handler. All of these things, after all, were specifically designed for any layman to be able to understand.

Wysiwyg doesn’t mean “easier.” Often it’s the opposite. When formatting information is hidden, sometimes you can’t figure out how to control it. I have gotten horribly frustrated trying to use a program as simple as Microsoft Word—and I’m an engineer.

Web pages are much more complicated than a paper document, and a web page with a given appearance could have been written in code in any number of ways. To put it another way, the relation of design and it’s underlying implementation is not one to one. Trying to control the design without having all the information you need to do that is just asking for a hellish user experience.

So much of what makes web pages work well is not actually visible. The text of a link is visible, but the URL for the web page that the link points to is never shown. The same goes for HTML attributes that help visually impaired people, or elements that don’t contain text but are essential to the layout of the page. If we can’t see these elements, it can be very frustrating to craft a well-designed page.

A good web designer must always keep in mind the diversity of their users and make sure that the design they’re building is going to look great for everyone — or at least not totally destroy their experience. Tools that pretend that all users are the same or that there’s only one way to view a web page don’t help this process. They hinder it.

All that said, Wysiwyg is still essential. We obviously need to see things how our readers will see them. On Hot Page, that’s precisely why we have a preview of the page your editing always visible while your editing it (screen size permitting). Our preview defaults to a mobile sized screen, but it let’s you instantly see the page in a variety of formats.