Why Code by Hand

Now I admit I've always hand-coded web sites. While I have tried to use Dreamweaver and other WYSIWYG ("What You See Is What You Get") editors, I may not be best positioned to judge the relative merits of each method completely fairly.

However, I'm convinced that hand-coding is an essential skill for all web designers and producers. Here's why...

• Greater knowledge
• Greater control
• Greater speed

Greater knowledge

I'm not saying that you have to hand-code every little thing, every time. But having the hand-coding ability gives you the choice.

The biggest benefit of doing your code yourself, rather than letting software do it for you, is that you know exactly what's going on with your code. In order to hand-code, you have to know your HTML, CSS, JavaScript etc. It's you that makes it work, and it's you that fixes the bugs. That means that, if anything goes wrong, you have enough knowledge at least to address the problem.

Some WYSIWYG editors put in their own code that can be proprietary (particularly notorious is MS FrontPage). You may not understand where this code is coming from, how it works, and how to fix it if it goes wrong.

Greater control

When I produce a web page template, I decide exactly what <div>s will be absolutely-positioned, which will be floating, which will be stretching. I instruct the page to set certain boxes at exactly so-many pixels in size. I have total control over every little element.

When you use a WYSIWYG editor, you simply don't get the same level of control, unless you type all these settings into dialog boxes. And, if you're going to do that, you may as well do it quicker by hand.

Hand-coding also lets you create smaller files than a software package. Visual editors used to be infamous for "code bloat" (adding many more tags and lines of code than are necessary to achieve an effect). While this has much improved over the past few years, no visual editor can create pages as small and light as a skilled hand-coder.

Client-side scripting

Regarding JavaScript and other types of script, some visual editors can enter useful and fairly flexible scripts. This can deliver some useful functionality with little effort or experience. However, the more experienced designer would not be happy using stock scripts. As learning moves on, people develop and share better scripts to do certain jobs. No-one should code everything from scratch every time, every coder has existing code or libraries of handy scripts they can include quickly. If you use a visual editor, you will need to supplement its stored scripts with variations or improvements of your own.

Greater speed

I'm convinced it's faster to create finished, tidy web page templates by hand-coding than it is to use a WYSIWYG editor - if you also take time to learn the skill of touch-typing.

I've never seen a head-to-head shootout of a crack hand-coder versus a skilled Dreamweaver user, but I sure would be interested!

I can type fast, and I can navigate round web documents very quickly, thanks to handy shortcuts like Ctrl+F (Find) and Ctrl+M ("Find matching tag", which will find the matching </div> for a starting <div>, for example) in my editor, ColdFusion Studio. I can include new blocks of HTML or JavaScript very quickly using stored snippets, inserted using keyboard shortcuts. I don't believe there's a WYSIWYG editor that can give me a matching level of speed, control and accuracy.

Summary

All the above depends on the quality of the tool, and the skill of the hands wielding it. There's no doubt that there are times when visual editors can be used to great effect. My point is that, on the path to becoming a top web page designer, and even if you start with a primarily visual editor, you will need to use the keyboard more and more. So why not specialise from day one, practice your touch-typing and fully master your design!

Additional information

• Some votes & arguments on digg.com
• Beginner Tip: The Pro's and Con's of WYSIWYG Editors

Recommended WYSIWYG editors

• Macromedia Dreamweaver (the industry leader; can also be used to edit code by hand, plus comes with HomeSite+, an excellent hand-coding environment)
• Microsoft FrontPage 2003 (now much more well-behaved and flexible than previous versions)
• NVu (free, quick and dirty; fine for beginners)

Recommended text editors

• W3C Amaya (free, open-source xHTML-compliant editor, haven't tried it myself)
• TextPad (popular)