Ask Slashdot: Value of Website Design Tools vs. Hand Coding?

An anonymous reader writes "I am pretty computer literate, and have a son who is extremely computer savvy. He taught himself C#, Javascript, built his own desktop with his Christmas and birthday money two years ago and is an avid reader of stackoverflow, reddit and many forums. He recently was asked to design a website for an architect, and likes to code by hand using Notepad++ and the Chrome developer tools. He uses CSS and Javascript libraries, but is convinced that all visual editors (Dreamweaver, Expression Web and so on) are only for extreme beginners and create non responsive, non compliant sites. I argue with him that while handcoding abilities are essential and great there is a value in knowing and using WYSIWYG editors. We agreed that having slashdot weigh in would be useful — comments appreciated on either the approach or good tools he can and should use."

use a CMS

[osssmkatz]

Using a CMS will allow him to use the CSS customizations he loves, and javascript as well, while giving the architect something they can maintain after he's gone. Many drupal developers now prototype in drupal gardens (drupalgardens.com) exporting it when they're done or have reached the limit of the hosted environment. Either way, lynda.com has tutorials on the three major CMSes (wordpress, joomla, and drupal) as well as how to choose. Dreamweaver is a useful tool, but CMSes are a much better way to go. --Sam

Re:Another worthless C# developer...

[Anonymous Coward]

His skillset? Gettting first post on Slashdot, of course.

Re:Why not do both?

[SQLGuru]

It's a trade-off between speed and efficiency. The visual tools are faster for getting the page to look right, but horrible for the generated code. Hand coding takes longer but is much more efficient. The best of both worlds is to use a visual tool for the high-level layout, run it through an optimizer, and then hand-tweak the result for efficiency.

This turns out to be similar to the flow you'll experience "in the real world" working for a larger corporation. There will be a designer who uses the visual tool (if they make it past Photoshop) and then "throw it over the wall" to the developer who is left to clean up the mess. The developer will run it through an optimizer and then tweak the resulting code.

I will say that the Expression suite works really well in that it doesn't do horrible generated code and the tool allows you access to the underlying code. It's great for XAML, but it can do HTML, CSS, and Javascript.

Professional Web Designer of 15+ years here...

[vitaflo]

I've never used a WYSIWYG editor for any website and nobody worth their salt ever would. So your kid is correct and is learning it the right way.

However, what is just as essential (imho) as knowing how to code it all by hand is having a good grasp of graphic design and user experience. If you are able to master both you are a rare breed and extremely marketable in today's world.

The only real design tools you need to design websites is a copy of Photoshop and a good text editor. Everything else is basically fluff.

Web designer != web coder

[dejanc]

I make my living by making websites. We generally split the process into several parts:

• Designers design the site, usually in Photoshop
• The design is sent to HTML/CSS coders, who cut it up and put it back together as code
• Finally, programmers do their part and utilize a MVC framework to make it functional.

Designers don't know how to code, HTML/CSS people usually know enough programming to code a dynamic template (that's why template engines like Smarty or HTML::Template were invented). Programmers don't even know how to use Photoshop and generally know a little about CSS so they can connect JavaScript if necessary, but not enough to know all the quirks of e.g. Internet Explorer 6 or absolute vs relative positioning.

WYSIWYG tools have no place in such process. They stand in the way, as the code they generate is usually not standards compliant, doesn't work cross-browser, etc. Also, some things are just too hard or impossible to do with WYWIWYS tools. Modern websites have very complex HTML structure and often use CSS libraries. Trying to force an editor into submission is usually harder and more time consuming then just writing your own code.

Design in a tool for designing. Photoshop is the choice of pros. I use Inkscape when I want to play with some designs and create mockups. Works very well and is free (beer & speech).

Code in a tool for coding. Anything from Vim to Coda to Notepad++ to DreamWeaver's code editor will do.

It's cool for your son to try to both design and develop and a website, but in the long run, he will have to chose one and stick to it if he wants to make it. In the professional world of web development, designers usually don't go near the code, and with a reason. If he is artistically inclined, then designing is good, but coding will be a distraction. If he is technically inclined, then designing a proper website will be too hard for him. He is better off just buying (or downloading for free) a PSD template and using it instead.