Web Design - hand code or html editor. Which is best?


Is it better to hand code a website using a simple text editor or use web design software like Dreamweaver or Visual Studio? The short answer is that both can save you time when you know the pros and cons of each and can fully understand why you are using them


In the world of visual design software and the large marketing budgets used to promote them you are promised cool products which will improve your learning experience, increase your productivity, do all the difficult work for you and allow you to switch your brain off and sit back as you witness your transformation you into a web design rockstar. It all sounds great in theory and that is why so many beginners are only too willing to spend money on college courses, software and educational materials which teach web design and development


Marketing people who sell software tools for building web sites would have us believe that they have the answers to address most of the problems facing those who do web design and development. When you are time poor this can seem like a magic bullet and that is why these software applications are used in evening courses which teach web design. All this really does however is line the pockets of Adobe and the Training Providers because a 12 week course on Dreamweaver will never in a month Sundays get an unemployed person off the dole and into gainful employment as a web designer


Photoshop and Fireworks are also visual design tools but are used for creating web page layouts with an arty look featuring high graphical content. The problem with these applications is that once you finish your masterpieces you still have a long way to go before they are transformed into beautiful functioning web pages that look great in all the usual web browsers and have clean code behind them to make it all come alive. Even Photoshop veterans will admit that Photoshop is not the easiest beast to tame. The reason is that Photoshop tries to do too much and promises to be all things to all boys and girls - web designers, graphic designers, print designers, photographers, digital artists and so on. No wonder Photoshop is so confusing and most people don't understand what it is for. It takes a long time to become skilled at designing and slicing web pages in Photoshop


WYSIWYG Html Editors

First a definition. WYSIWYG is an acronym for What You See Is What You Get. Web site building applications like Dreamweaver and Visual Studio are wysiwyg editors and hosting companies also offer similar tools to build web pages. These visual design tools have palettes of common web page components such as Forms, Buttons and Menus and some html elements like Headings, Paragraphs and Lists. You create a new web page and by dragging and dropping these components onto the page you can position them and make them look good using colours and fonts. You can even drag and drop in blocks of functioning programming code to work behind the scenes. Basically that is the nirvana that WYSIWYG promises the newcomer to the world of web design and development


The software creates all the (x)html and css page markup for you under the hood and apparently you end up with a great looking web page which looks exactly the same when viewed across all web browsers. All that bang for buck without breaking sweat. This sounds fine and might be the way to go when introducing people new to web design but there will come a time when those who stay the course realise that there is much more to web design and development than Dreamweaver and Visual Studio


These visual design tools have a separate coding window for inspecting your (x)html and css markup, letting you tweak your web page presentation (how the page looks). The code editor also allows you to use real programming languages such as Asp.net and Php for producing code which runs on the web server and Javascript code which runs in the browser. Programming in these languages makes your site more interactive and determines it's behaviour. All this sounds great but a lot of experienced designers hate these tools while at the same time any experienced freelancer will recognise their true value and know when to use them.


For example. A freelance web developer takes on a new client with instructions to give the site a makeover and the site was created in the old days using a table based layout. Hand coding may not be a viable option here because all that extraneous and complicated markup is likely to look meaningless when opened in Notepad but it could be handled just fine if you open it up in an old copy of Dreamweaver. The freelancer can do the job in a few hours and the client is happy with the cost of the work. This makes good business sense if the designer gets a lot of requests to carry out work on older table based websites but apart from that there is no compelling reason for using these tools in modern web design


Firstly, it takes weeks to learn how to use these tools and by doing so you are placing a big boulder right and the foot of your learning curve. Secondly, they teach you bad habits from the outset and once you have been using them for any length of time it begins to sink that if you came to depend on them you would be leaving huge gaps in your education. This dependency on WYSIWYG editors partly explains why there are so many rubbish websites out there


Hand Coding

The hand coding approach is preferred by the professionals. Real professionals know about Dreamweaver and other web site building software but the reason they hand code is because they know all about the finer aspects of web design and development. People who reach this level of skill can tell just by looking at a web site design what would be required do to put it together from scratch or make changes to an existing web site. They know what files to look in order to make the changes and for the same reason they are capable of hand coding anything from small snippet of custom code to complete and fully functioning websites. It takes years to achieve this level of skill and it can only be done by properly understanding how web sites really work and by learning to hand code


Essential features common in good html editors and programming editors


Html editors - advantages


Html editors - disadvantages


Programmer's editor - advantages


Programmer's editor - disadvantages