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
29 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.
Well, do your research. I have never coded a website and I have been paid by hundreds of clients over 15 years to create hundreds of websites and I have not ever written ONE line of code… because I can’t.
I CAN edit Html code and that can be important because programs like Dreamweaver or Expression Web can make mistakes that they do not recover from. So some editing is needed. That I can do.
I would suggest this:
1) learn Photoshop (any of the more recent versions are fine as you rarely ever have need for the full set of bells and whistles in recent versions anyway.
2) learn either Dreamweaver or Expression Web – I use Expression Web because I always have. No coding needed.
3) learn SwishMax (www.swishzone.com) which is a Flash authoring program. I won’t go into why Flash is valuable, is STILL valuable and will remain so vs. your attempting to do in CSS what Flash does better and far easier.
4) learn WordPress and then make your websites a combination of both Html and WordPress working together. Work in “design mode” and not code-mode as it is far more interesting to look at and work with. You will have lost no functionality at all.
Actually James, I half agree with you. My thinking has changed over the past few years.
I no longer believe that all web designers should code by hand. It’s slow, it’s expensive, and it’s unnecessary.
Platforms like WordPress and Shopify mean you really can start from a very high-quality platform, and it makes sense to proceed with minimal customisation.
However, I still think it’s important to be able to code HTML and CSS, even when you’re taking advantage of other developers’ packaged products.
It’s like being a chef.. A top chef doesn’t make all his own sauces, peel all his own vegetables etc., day in, day out. He has sous chefs to do that for him. If the head chef had to make everything from scratch every time, the restaurant would only be able to serve a few people each session. It’s just not efficient or necessary.
But he still knows how to do it. And if something goes wrong, he knows it’s gone wrong, and he knows how to fix it.
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.
I’ve stopped doing websites some years ago except for my daughter and friends. I am very happy to have found someone who thinks like me and says it much better, especially this : “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.” Most of my sites are multilingual, so there is no way to use the same widths and/or character sizes in all the language sections, this won’t work properly. You must adapt to the langue and sometimes even to the page. Yes, it can be done with WYSIWYG editors but it won’t be a job well-done.
That is simply not true. You lose no control at all in design mode (non-coder-mode) at all. I think you guys believe this because you have not tried it.
Nice Article. First of all anything that is hand-coded is excellent in terms of speed, quality, etc. But every designer should have a framework to start every project. This does not mean every one should download boilerplate and start coding directly inside the files. Instead, one should have their own version of boilerplate according to the projects he/she gets and use that as framework. Tools like Aptana Studio and Dreamweaver boost up the speed.
These days, I would say designers should know how to code (by hand), but I completely agree that frameworks are the way to go.
I design all my sites by hand using HTML, CSS, Javascript and jQuery. I agree with everything that has been said as far as the quality of the finished product. No two sites look alike, whereas I can tell a WordPress site in a second. I understand that WP is quicker to use, but I just don’t have that detailed level of control. Yes I could create my own WP template, but how much would I have to tinker with it to get sites that look different for each client? And there’s the issue of clients paying for what they’re getting… I couldn’t call myself a web “designer” if I have some automated process doing all the work! However, WP is so popular that I may decide to offer it as an option in the future in addition to my hand-coded sites.
I disagree that you have to do all the work to call yourself a designer.
If you hire an interior designer to create a beautiful room, they don’t hand-carve every item by hand. They select and combine pre-designed components to fit the requirements.
Well, you do BOTH. I create Html websites with sub-folder with WordPress installed on that sub-folder only. That way, I can design the entire website uniquely, perhaps each page different from all the others in the Html portion of the site.
Then, when it comes to certain functionality that is often provided FREE in a plugin in WordPress, I do that on a page in the WordPress folder. I get total, unique control over the design of every page which can be totally different from all the other pages AND access to the the 20,000+ mostly free plugins with WordPress.
And I create WordPress themes that match the design (mostly) of the Html site so it is pretty much seamless as you move from Html to WordPress and back and forth as needed.
Best of both worlds. No need to choose one over the other and you get access to HUGE collection of wonderful plugins that cost nothing or nearly nothing.
Pingback: Coding by candlelight | Kristin's Blog
Wow. I sure do disagree with this. I am a designer, not a coder. I cannot imagine why anyone would prefer to look at text in a text editor rather than a design-oriented page. I would say the same to someone who said that coding in PostScript is better than designing in QuarkExpress or InDesign for print. Who writes PostScript code??? (Or, write code for an image rather than use Photoshop’s design features, or, write code for Illustrator rather than using Illustrator’s design interface.)
One big reason is this: websites are never done. They get changed all the time. Going back to the design itself is easy to deal with a website you did 6 months ago. Looking at code and figuring out what you did is… why do this?
You do NOT get better control. I have no difficulty with control at all and I cannot code as I am not a coder. I can place anything at all within 1 Pixel of where I want it and what I do works consistently in all major browsers and is fully compliant with Html-5 and CSS-3.
And, I do not subscribe to the notion that CSS has to control everything. Why? It gets really complicated and especially awkward after 6 months have passed and changes are needed, and, where, perhaps, all the pages are different.
I do full drag and drop design for Html pages and position anything on a page where I want it. I can move any item anywhere on the page without disturbing the page’s other items at all, or, I can link them together and move them together… precisely together in drag and drop mode (in centered, left or right anchored positioning -or- a combination of all three on the same page.
You can see how this is done at: (FREE) http://skyboroteaching.com/free_tutorials.htm – be careful not to assume you know this. Watch all the tutorials and then decide.
James, I really believe you can get no greater control than is offered by CSS.
Your argument doesn’t really hold up.. “Don’t say that WYSIWYG doesn’t work till you’ve tried it. By the way, I can’t code myself.”
One major drawback of visual editors is that they can’t tell what areas are meant to be expandable. So isn’t there a risk of creating a design that’s too constrictive, with the resulting problem of stuffing your content in to fit the design (which is the wrong way round)?
I wish to have my thoughts be helpful. I made some movies to show how these ideas work for webpage design found at: http://skyboroteaching.com/free_tutorials.htm – I created them to be helpful even though I now realize they are off the beaten trail altogether.
***************************
I have no idea what you mean by an “expandable area” at all. I really suggest you watch the movies I made on using Layers.
Also, I think I am the only person on the planet who uses drag-n-drop layers for webpage design and no use of nested DIVs within a container DIV at all (I have come across no one else at all). I gave up on container DIVs holding all content because they are inelegant, awkward, inflexible, and unresponsive to changes in page layout without just starting all over again. I believe that having a single container DIV is something that is truly not worth the time it gets especially when far better alternatives are available (fully compliant, work in all browsers, etc.)
The Layer/Divs are a method of creating webpages that is elegant, generates far less code, CSS code is far shorter, renders very fast in all browsers, is nearly identical in display in all major browsers, is easy to change things without breaking the container-div system (as there is none).
And it lets a designer create doing what they are used to doing: drag and drop things around on the page to suit (pixel by pixel if that matters) positioning.
I understand that some people like to write Html & CSS code and that certainly is one way to do it. I have found that there is more than one way to “skin the cat” in creating webpages. I love my drag-n-drop method. As making a living doing this work is increasingly difficult, I tend toward easy, fast, and client-responsive and ease of changes after it “was” all done.
This is a really interesting post as I am using wordpress and I do feel that I should learn at least some basic coding skills. Thank you