Advertise here
Dreamstime - Royalty-Free stock images

Web Design Advice, Hand-coded vs WYSIWYG vs Templates

Article by Mingus Casey - October 11, 2009

Web Design Advice, Hand-coded vs WYSIWYG vs Templates

Comparing hand-coding, WYSIWYG and PHP-template based options, a brief discussion of different methods of creating websites and the pro's and con's of each.

For hand-coded designs:

So you are doing web-design by hand, good for you! Learning and knowing HTML and CSS and potentially PHP to the level where you can type out high quality, great looking web-pages in note-pad is a real skill.

Hand-coding means you really do understand HTML, that you know the language and aren't limited to the constraints of any editting software.

People can choose to use hand-coding over WYSIWYG editors for numerous reasons, for me I found I was getting the same appearance as at least one commonly used WYSIWYG editor, with web-pages that were about half the size in kilobytes, and a smaller page means faster loading, and faster loading means happier users.

The down-side of hand-coding is the amount of time it takes to code websites, as with hand-coding you can spend weeks doing a job that blogging software would make easy, but the upside is in personal development, understanding HTML, and truly owning copyright to all your work.

1.Write clean code. Clean code is a pleasure to read, loads fast, and is easy to understand. This means comments (these always help if it's been a while since you last coded, or if someone new to the project is working on your site), nice indenting, and so forth.

2.Use a universal "Cascading style sheet" Style sheets control the look of your webpage, in the past where for every paragraph you would have manually typed in or <font size="14">, now you can control the appearance of different elements of your site through one centrallised point. I find this wonderful for working with Headings, Paragraphs, Div's, and so forth.

3.Validate your code The W3C validation service is essential, whether using a hand-coded site, or a WYSIWYG editor, and even a template-based site, this confirms that your site is valid HTML. While browsers can (and do) generate sites based on invalid HTML, it's unprofessional, can be ugly, and you won't necessarily get the feel you want. If you are doing professional web-design, this is a must.

For WYSIWYG editors:

What-you-see-is-what-you-get editors such as Dreamweaver, Kompozer, Nvu, Frontpage, Expressionweb, Seamonkey and OpenOffice Writer can be very easy to use; very friendly, and very good.

WYSIWYG editors are fantastic if you've never wrote a website before and you want to make a simple web-page fast. In my experience, WYSIWYG editors are great while you are learning, but at some point you need to learn how to hand-code if you really want to understand HTML/CSS.

I've used several WYSIWYG editors, and I highly recommend Kompozer/NVU for open-source (free) web development, and for paid, you can't go past Dreamweaver. These applications are built from the ground on up for the purposes of web-development, they work well, and they produce reasonable quality code.

The only real niggle I have with WYSIWYG editors is that they tend to munt hand-coding, they will often insert many <span> or <p font size> type tags, and the output can become very garbled and difficult to read. I remember when I first re-made www.minguscasey.com by hand, it was incredible; the WYSIWYG editor I'd been using had put all my paragraphs together creating a difficult to read mess, whereas when hand-coding everything became clean and refined.

It's also a good idea to visually go over the code, all WYSIWYG editors have the option to view source, often in the same window or tab as the finished view; if the source looks really messy you might be using a dud program.

Pre-made Templates

Pre-made template systems such as Wordpress, Joomla, Drupal and others are often very easy to use, very easy to pick-up, and it's very easy to create a stunning website with them, with the catch that unless you know how to make the visual template (learn CSS), there will be atleast a dozen blogs that look just like yours.

Many pre-made templates also immediately support comments, multiple users, RSS feeds and other somewhat advanced functionality; to craft this sort of content by hand, you really need to learn a server-side language such as PHP.

It is really easy to just use a template, and so long as you have good content and images, very rapidly create good-looking fully functional websites. Recently I used wordpress to create a website; www.godsdreams.com and within a matter of hours I had a good-looking fully functional website online, whereas hand-coding would have taken significantly longer.

In Summary

Hand-coding is great for personal development, truly owning copyright, and understanding the web. WYSIWYG editors are good for quickly making well-formatted websites. Pre-made PHP based templates such as Wordpress are fantastic for quickly creating very functional, good looking websites.

My personal preference for personal development is Dreamweaver with the Remote Site access methods setup; this lets me view the page in real time as I adjust the code, and by one click upload the finished code to my webserver; but you can't go wrong with PHP-templates, and WYSIWYG editors.

About the author
Mingus Casey is a Wellington, New Zealand writer, with over ten years experience in the computer industry. He administrates www.pcrepairz.com, www.godsdreams.com and www.subspacetv.com. There is a portfolio of his artwork available at www.minguscasey.com




Back to articles

Find the articles you are looking for

 Web  Stockvault Articles
Follow Stockvault on Twitter