Debate – WYSIWYG: a Web Designer’s Dream

It’s another SitePoint Debate! Today, two experienced developers argue whether it’s better to hand code your HTML, or create Web pages in a WYSIWYG editor. Don’t miss the opposition’s arguments — they might just change your opinion on this controversy…

Deadlines.

These are the bane of most Web developers’ lives, and often, as projects get more and more complex, any way to increase work speed and productivity is greatly appreciated!

To put it simply: hand coding is finicky. When you’re hand coding, it’s all too easy to forget to hit “tab” — when you arrive at the end of your code, you discover that every single line is out of whack! You can easily avoid these kinds of hand coding misadventures with the help of a good WYSIWYG editor.

The Basics

WYSIWYG editors, such as Dreamweaver, allow users to create their Websites as an all-in-one-process. For instance, you click “insert image” and select an image, and Dreamweaver simply inserts the code in the background. Hand coding the HTML to achieve this same result will take much longer (in most cases) and you can easily misprint a word, or miss out a quote, which will necessitate tedious code debugging later, and cost you yet more time.

Similarly, it’s extremely easy to insert a table, an image, or some complex JavaScript. These tasks, too, are achieved with the click of a button, rather than the laborious hand typing that plain code. Your WYSIWYG editor neatly keeps track of all these tags, and prevents the possibility of syntax mistakes. Many editors can even notify you of any errors you may have in pre-existing code — they automatically clean HTML, find tags that aren’t needed, and even include a spell-checker (something a lot of people, including myself, often need!).

The end product is neatly-tabbed, consistent code — a godsend in situations where you need to add to the existing code but you don’t have a WYSIWYG editor handy, or when server side code, which really cannot be implemented via this sort of editor, needs to be incorporated.

A Designer’s Dream

A lot of designers are just that: they’re absolute wizards in Photoshop, for example. But when it comes to coding their design, they’re lost! Often it’s easier to put it off and waste time, rather than face up to the task of working out where to put tables and how their attractive layout can actually be put together in HTML code.

It really is convenient to simply open up your site in an editor, and view the layout as it will appear in a browser — especially for those who have trouble visualising how all those <tr> and <td> tags actually create the layout! This is why so many designers find it easier to cut up their images, fire up a WYSIWYG editor, and simply insert them into a new HTML document. Their template is basically ready for use in around 5 minutes. They provide a range of other advantages, too.

Enhancing the Site

WYSIWYG editors also make it extremely easy to add dynamic and obscure elements to your site! Want a JavaScript rollover menu? It’s as simple as clicking a button — no fuss at all! You can use the same method to add forms and CSS, and to top it all off, some editors even allow you to add fully-featured server side code. Many people will not want to spend countless hours trying to figure out how their code will actually work, and no wonder. Why do that, when it’s already been done for you and packaged up into a single, simple program?

Maintaining Site Structure

What really is an advantage to using WYSIWYG editors is that all your pages and elements can be viewed live in a “tree” view, so you can really get a feel for the way your site is laid out — not to mention easily double-check which pages link to which! With the press of a button, you can update links site-wide, or search and replace over your entire site.

Team Interaction

Many WYSIWYG editors also provide a great tool for interacting with others. If all the designers in a team working on a particular project use the same editor, you can easily transfer sites to others for their input and amendments.

The User-Friendly Alternative

These editors allow designers to use templates, and they’re a quick and easy way for the less-savvy user to edit their files on the home computer. Many clients, too, now want to edit their sites in some way, and unless they use a complex content management system it can be very difficult. Often a WYSIWYG editor will be the most direct and hassle-free method by which they can edit the content without having to wade through hundreds of lines of code.

All in all a WYSIWYG editor lets you make quick changes to other people’s (sometimes messy) code, and to quickly create and manage your own sites with a minimum of fuss and technical knowledge. It’s a tool that many designers swear by — and it’s easy to see why. Hand coding might be more prestigious, but for simplicity, flexibility, and ease of use, sometimes you just can’t go past a WYSIWYG editor.

What do you think? Don’t miss the opposition’s arguments — they might just change your opinion on the hand coding controversy…