The pitfalls of web design using GUI editors

This is a touchy subject for some because there is a valid argument in support of GUI apps for web development (emphasis by me). Some people say that designers should use the GUI solely and that allows them the freedom to create unhindered. The other side of that argument are the support and programming issues. I'm a web designer who does a lot of development, i.e. coding and debugging. When I open up the HTML that a lot of these so-called designers present from FrontPage, GoLive or Dreamweaver, I want to puke. A friend of mine once told me that my code for one of his sites was too clean and made it difficult for him to manage (I used straight CSS/XHTML, no tables) as a standard web designer. He ended up re-editing the thing in Dreamweaver and the HTML contained dozens of redundant

tags all over the place and silly tables which goofed it all up. Under my breath, I muttered how a real web designer worth his mettle should know how to code this stuff.

Don’t get me wrong, these GUI apps are really good at their basic duty, which is to crank out HTML. However, beyond that they’re disastrous when it comes to JavaScript and CSS. One of my old websites utilized an image mouseover function that was added by Adobe GoLive. The basic Javascript function that was bolted on by the app was over 103 lines of code! A mouseover can be done with two lines of CSS!

GUI apps like Dreamweaver are fine for a web developer to do basic checking of bracket matching and layout preview. Even then, a lot of CSS layouts don’t preview correctly and you have to resort to using your web browser. Thus, the only real benefit of today’s GUI editors is:

  • Layout preview
  • Site template management

Beyond that, a non-techy web designer is better off using something like iWeb which is completely GUI driven and cranks out surprisingly valid XHTML. Once you get into serious development with a team, however, you really need to learn how to code and break down your design with CSS. Otherwise, you’re just making it difficult to interface with your programming peers.

GUI apps don’t take well at all with the point-and-click editing that most people do, and result in some insanely botched, if not laughingly valid code. Below are some hilarious examples of what these apps spew out.

Pretty silly:
10% discount in the bar. Excludes alcohol, tax and tip.

Nested font tags, something GUIs are notorious for:

A great place to see.

The worst of all! Redundant, nested font tags, links to local Microsoft Windows paths (won’t even work on the Internet), inconsistent inline font style usage, spaces in URLs, AAAAAAUGH!

Our instructors are professionals. Members of the team work well together.