What's wrong with WYSIWYG editors

09/26/2008 Jrnl/Design

I think the biggest reason why the web is not a mass medium for the masses is because, although CSS has become the backbone of web design, WYSIWYG editors fail to visualize the effects of stylesheets on a webpage. What’s the point of a “What You See Is What You Get” editor that doesn’t let you see all of what you get?

Who cares about big, bad WYSIWYG?

Here’s the problem: The “masses” don’t see things in code. Ultimately, that’s why WYSIWYG editing is important: it democratizes the web.

The masses feel victimized by every other mass medium: People talk about how TV and fashion magazines are out to make them feel fat; newspapers are out to make them feel paranoid; radio is out to force-feed them whatever music “the man” wants them to listen to. But on the web, anyone can have a voice – if they know how to create a web page.

(Mo)WYSIWYG

Why do they call it “What You See Is What You Get” when, in reality, you don’t see all of what you get? They might as well call it (Most of) What You See Is What You Get. The only people who really have control over the web are those who see things in code.

This is a problem, but it is not unsolvable. Dreamweaver does a great job visualizing things like table widths. If it did something similar with things like div classes and IDs, it would be a step in the right direction.

Open source community also MIA

The open source movement isn’t helping, either. Seamonkey doesn’t visualize a stylesheet’s effects on a web page. Although Seamonkey’s original codebase, Mozilla, has spawned two child projects, one (Nvu) is officially defunct, and the other (KompoZer) hasn’t seen a major release in over a year.

The other big names in open source web development software are QuantaPlus and BlueFish – neither of which are WYSIWYG.

Open source software – the most democratic force in computing – still hasn’t made a decent WYSIWYG web editor.

Comment [5]

Anna Ullrich

09/26/2008 User Comment

Hi – I’m not sure what exactly you’re not seeing in your wysiwyg editor that you’re expecting to see? Nowadays, most wysiwyg editors do show the effects of stylesheets. Expression Web sure does and when you have an element selected in the Design view (i.e. preview mode), the class or id that is assigned to the current element is displayed in the Design view.

Anna

Dan Hiester

09/26/2008 User Comment

Huh. I’m emberassed to confess Expression Web hasn’t been on my radar. Looking at screenshots on its product website, though, it looks like it is, in fact, much more along the lines of what I was hoping to see from other WYSIWYG editors – especially industry leaders like Adobe’s Dreamwever / Contribute. Thanks for pointing me to it!

The problem with most other WYSIWYG editors isn’t that they can’t render CSS. The problem is that most of them don’t visually communicate to a user that CSS has made something happen to the layout.

In Contribute CS3, for example, if an image has a CSS class that floats the image to the right, no visual cue lets users know the image floats right because of something in the stylesheet. The image just appears to keep floating right for no apparent reason. Not that Contribute is exactly a holy grail for HTML editors, but its target market is a group of people who won’t understand CSS.

The open source WYSIWYG editors – also popular with non-professionals because they’re free – have the same problem.

Dan Hiester

09/26/2008 User Comment

Oh, and to avoid confusion, I should probably clarify that I’ve always developed in code, and I still prefer it. But for people who aren’t as technically inclined, I think most WYSIWYG editors, well, need to be more like the Expression Web screenshots I saw today.

Anna Ullrich

09/26/2008 User Comment

Argh, I hate when people label our program WYSIWYG! :) There are WYSIWYG features in the program but those are just one aspect of the program and you can use them or not. The program also has a robust set of code editing features and property editors. I think the CSS Properties task pane might be quite useful for the scenario you just described in which you can’t figure out why something is floating right. Even a novice who can’t write CSS by hand or even read it can work w/ it. If you put your cursor in the element that is floating right, you then click Summary in the CSS task pane and all properties and styles that affect the current element are listed, even those that are inherited. Even a novice would be able to make some sense of the results I think.

Are you on a Mac? Expression Web is currently Windows-only. One other Expression program, Expression Media, is available on the Mac too but not the other programs in the Expression Studio.

Anna

Dan Hiester

09/26/2008 User Comment

Haha, no, I wouldn’t label Expression Web WYSIWYG only. Its WYSIWYG features do look like a fantastic step in the right direction, though.

And actually, yes, I am mostly a Mac user (but I’m really starting to miss the Gnome desktop, haha). At home, I do have both Bootcamp and VMWare Fusion, but I have neither of those at work. How’d you guess? I ran Windows at the office up until April of this year, and I usually hold Mac snobs in great contempt (OS X isn’t that great… maybe they’d be better if they adopted Gnome’s HIG), so I’m amused that you called it.

That said, I may need to demo the Expression suite. It looks fairly solid. It’s kind of like how I’ve been meaning to check out Office to see how I really feel about the Ribbon interface, haha.