Living In a WYSIWYG World

I was at the Apple store this past weekend when one of the sales staff showed me some of the new features in iLife 06. He started to show me the iWeb application. I did not tell him initially that I was a web developer. He began to tell me how easy it was to place images, move them around, rotate them (anything you want to do — all within the WYSIWYG). He told me that he used to update websites and how much of a breeze this was compared to sizing images in Photoshop and then placing/uploading in Dreamweaver. He showed me the process, all the way up to publishing the document. In this time, I let him know that I was a web developer. We had a small discussion and he finished his ‘tour’. The last thing he told me was this: “It is very easy for a user to update things, but it creates horrible code (HTML/CSS) on the back-end.” This comment frustrated me (especially for a product from Apple). My first thought after this was Microsoft Frontpage and all of the garbage it adds to a website.

I get more and more frustrated with the WYSIWYG’s after seeing their code output. For example, our church just published their new website and it was fully constructed in the suite of Adobe products. All of the pages were output from GoLive. After looking at the site, and looking at the code, I became somewhat disgusted. The code output from GoLive is horrible. Try validating the page and you will see a large string of errors. Not just with the actual code itself, but with the CSS output as well. I just don’t think that WYSIWYG’s are really up to the task of creating complex, fully functional CSS websites. For creating some styles it might make it easier (or in this case export invalid markup), but overall it does a poor job of keeping it clean.

Now, I have used Dreamweaver in the past — simply because it was the ‘cleanest’ of the bunch. Having some faith in Dreamweaver, I checked a site that was recently built on a development server. The initial specs were that the site would validate XHTML and CSS 2. Noticing that the pages were somewhat cluttered, I questioned the project manager on it. His response was “We use Dreamweaver and made sure the doctype was XHTML.” There is a misunderstanding that these programs give — in that they don’t paint the whole picture for the end user of the WYSIWYG.

Resources (view source)

This is a quote taken from http://theocacao.com/document.page/216 regarding the new iWeb application:

“The quality of HTML/CSS code is pretty good, even though it gets somewhat verbose in terms of number of DIV’s. It’s not clear to me why nested 5 DIV’s with separate styling attributes can’t be combined into one, but maybe the answer is there if I look deeper. Also, it would be nice if more of the styles were put into an external CSS file instead of all going inline. Most web editors have these issues, though they are a bit less pronounced in iWeb.”

So, yes, these programs can make it easier — but what about the long term reliability and maintenance of tag soup and bloated files filled with repetitive code (Javascript, CSS, and even HTML)?

Let’s hear what you have to say…

7 Comments Add your comment

  1. Percy January 27th, 2006

    I've been working on a WYSIWYG for the past year or so geared specifically for a designer-friendly CMS. Although it is still in the works, the idea is to severely limit the editing capabilities of the end user. They can select pre-defined styles from a drop down and I leave the alignment options off. This makes it very easy to limit what happens inside the HTML. No unncessary tags, no inline styles, nothing. I can't guarantee 100% perfectly good HTML, but it goes a long way compared to everything else out there.

  2. Percy January 27th, 2006

    I supose I should also comment on the blog entry... :) I haven't had much opportunity to check out iWeb's HTML output myself, but it doesn't surprise that it would have messy HTML. Although it surprises me a little that it comes from Apple. I think a lot of WYSIWYG-esque programmers only care about the final product as far as web browsers are concerned. I'm sure for the most part they have little or no concern about W3C compliance etc.

  3. Nate Klaiber January 27th, 2006

    Percy,
    I definitely agree that some only care about the final product. But its discouraging that its a poor final product because they didnt pay attention to meet the standards of their medium (Internet/Browser). I have heard from some sources that the iWeb HTML is ok, and others who said its pretty messy. By messy, I think they are referring to the nesting of styles/tags where you dont need multiple tags.

    I want your CMS :)

  4. Percy January 27th, 2006

    I just found this on the Dojo WYSIWYG documentation:

    Provide WYSIWYG, not source editing? Users like WYSIWYG because they care about how something looks and not the quality of HTML produced.

    Wow. I knew a lot of programmers thought like that, but I never thought I'd see someone say it so obviously and bluntly...

  5. Stephen January 28th, 2006

    I have gotten away with using textile for a few things. Some users are really responsive to it, but I can see where others wouldn't like it or use it at all.

  6. Chris Hattery April 28th, 2006

    I'm making the shift from html to css based design. The only elements of html that i sill use alot are tables and forms. I try not to use tables for layout, just in my forms and data retrieval for organization and alignment. I code everything in Dreamweaver but seldom use the WYSIWYG editor. What I hate is I try to organize my coding to make it easy to read, and tab everything to a point where I can easily see my code without having to use the sroll bar to move the window over horizontally. If I click over to the WYSI editor and make a small change, and then go back to code view, Dreamweaver changes my code to what it thinks it should be.

  7. Nate Klaiber April 28th, 2006

    @Chris:
    That is one of the main reasons I dont use the WYSIWYG inside of Dreamweaver, and one of the main reasons I switched to TextMate. WYSIWYG's will often add bloated code, because they dont understand how to make it simple - or even semantic (to a degree). Adding imagination to your CSS helps create things you wouldnt have thought of before. For me - I tend to think of things semantically. Dont create a style when you could use valid xhtml (such as strong, em, etc). Use your h1-h6 tags - and apply your styles from there. Use lists for navigation and such, and then apply styles from there. View your pages with CSS disabled - this is what your search engines and screen readers will see - does it make sense to you? This is where you will find that tables just make things ugly :)

    In regards to dreamweaver, I had a page sent to me by our marketing department the other day. It was full of generated CSS by dreamweaver. Problem is, Dreamweaver doesnt know how to join different classes in one declaraction, so you have a ton of extra code in there to get the display you want. Technically it displayed as she wanted, but the code looked absolutely horrible. Creating your own CSS gives you the ability to inheret different styles and reuse as necessary.

    For me, its much easier to do it by hand - thats not saying its the BEST way, its just the easiest for best control and clean code. This goes down to the structured HTML and semantics - doing it by hand is the easiest for me.

Leave a comment

Basic HTML is allowed (a href, strong, em, blockquote).

Entry Details

This entry was added on January 27th, 2006. 7 comments so far. It was filed under Web Development, Web Standards, CSS, Usability, and Apple. Prior to this entry I wrote about Thank You Verio. After writing this, I wrote about Living In a WYSIWYG World: Part 2.

Categories

Archive