Why Web Designers Should Code by Hand
If you're serious about reaching your full potential as a web page designer / producer, I believe you need to learn to code your sites by hand.
Coding your site in HTML/CSS by hand will eventually give you a great understanding of key web design skills and set you on your way to becoming a better web designer.
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
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
15 Comments Leave a comment
Leave a comment
Good article, I gave it a thumbs up from stumbleupon.
However, I disagree with some aspects. While I think every designer should start off with coding by hand for years until it becomes habit, there are so many benefits of using Dreamweaver or other software. I coded by hand for years until I tried out Dreamweaver, and I can make websites so much quicker now, and debugging websites is quite easier. Granted, I’ll still alter things by hand and add javascript myself, but I do think editors have a good place in a web designers arsenal.
When starting out in web development, I agree, it is important to develop from scratch to make the mistakes that will ultimately lead to understand the technologies you use. However, true professional will code as little as possible by hand and use any and all frameworks that will keep hand coding to a minimum.
A ggod formula:
Rails + GWT + MySql/MongoDB/CouchDB/Amazon RDS
Pingback: How to Remove Dates from SERP Snippets to Increase Clickthroughs
David, I would agree with you today, although we use WordPress rather than Dreamweaver.
However, there’s no substitute for knowing your HTML and CSS etc. It’s like knowing music theory, or mastering the basics of anything like a golf swing.. If the fundamentals are there, your talent can go further.
Great article, David. I have been preaching this for years. Most WYSIWYG users who never hand coded before are baffled that you can actually developed without the need of a, let’s day, Dreamweaver or MS Front Page.
Bob, I understand your statement and I agree with to a certain degree. And yes, I agree, frameworks do make life easier for us “true professionals”. But the point David was stressing has nothing to do with frameworks.
And I will argue that David’s point could be applied to frameworks as well. One should really learn the programming language first in order to fully understand a particular framework.
Ben, sorry, I can’t forget about you now, right!? WordPress is not the same the as Dreamweaver. I’m not defending either, in my opinion, I think both should be banned! LOL! But, I do understand your comment as well.
David, thank you for the article.
Opps… Sorry Ben… I thought it was David that wrote the article… see, the mention of Dreamweaver can mess anyone up!
Nice article. Can I recommend (in addition to your suggestions) Bluefish, which is free and open source. It’s a fairly good hand coding tool, with good code highlighting which is handy when coding and bug-hunting!
You make a great point, I do not claim I never use editors or understand every aspect of every language out there but I code most of my stuff by hand. There are too many so called web designers out there now who dont know any code and are simply using editors. Than you get a client who wants something changed they dont know how to do, so they come to you and now you have to understand what these others did.
Macromedia Dreamweaver? When is this article from? Content management systems get more clients closer to what they really want than standard web sites do. They can easily take over the management with just some basic training. The priesthood of hand building, save for the most advanced sites is simply crumbling. It’s a little hard to believe, but rapid advances in technology are making hand coding pretty much unnecessary for run of the mill web sites. We can sing about purity or we can move on. I’m moving on.
I could not agree more with the author. Content Management Systems, Frameworks etc, can never take the place of true knowledge. You will find that taking the easy route will eventually come back to haunt you and you will lose clients without knowledge. WordPress etc has made people consider themselves developers when in fact all they really do is learn a methodology and a software package. I been in the industry for 15 years and these are the people who come and go. Clients expect results when a problem occurs. What they don’t want to hear is its a “software” bug and I have a call out to see what can be done. DON’T BE LAZY!!!
Well said, Brad! BRAVO, BRAVO! =)
I have never written any code or made a website, that is what I am researching and would like to be able to do. I don’t like the idea of some program doing it for me because then I really have no idea what is going on. These articles by Ben Hunt have been interesting and helpful to me. Thank you.
Quite arrogant to think that hand coding a website is the Holy Grail. Having said that anyone serious about their craft should also try improve everyday. In the real world clients could care less about how you make their website, as long as it does what they want it to do. Anyone who wants a hand coded site and all the support that must necessarily go with it, have a developer on staff. Try tell a small business owner that his website will cost more because you’d prefer to hand code, and you will be quickly shown the door.
Actually I agree. These days, I would advise the vast majority of site owners to use the “prior art” of pro designers and developers – and use WordPress themes.
Absolutely.
However, there’s a key difference that most (new) coders won’t see: Don’t re-invent the wheel
If you want a blog, don’t script it from the ground up, there’s lots out there that have been developed for years that will be better than anything you can do alone.
Visually though, I recommend doing it yourself at least once or twice before you start diving into the mod-frenzy of taking themes and editing. You’ll never understand someone else’s work like you will your own.