Useful resources... Find a collection of most resourceful and useful sites below: Website Awards - How to Win Awards Webmasters Den - The webmaster's resource directory! What is Copyright - Do you need to know what copyright protection is all about? Award Scoop - All you need to know about Web Awards. Includes history, timeline and useful information about Web Awards. Award Sites! - Award and Design related articles and resources. Free Downloads Worksheet and Revisions - plus free tutorials! Awards Organizer - Free templates to use to build your Awards section of your homepage - plus tutorials! Book about Web awards! Order the first-ever book written about Web awards today! First 1000 will receive a signed copy of the book!

Apart from having excellent content and unique offerings, people tend to be critical about your websites' presentation, so much so that we can say that website designing is an art in it's own right!

Let's face it: designing a website from scratch is not easy! But, since more businesses and corporations tend toward the Internet to show of their products, and eventually get it sold, they will pay thousands of dollars for a fairly good looking presentation. We might be able to save you a couple of bucks if you follow our advice...

Plan your Layout...

Again, proper planning is absolutely necessary to establish the consistency of your website and provides an element of familiarity,  which will help your visitors to understand your message and finding their way around. The step-by-step procedure below is a simple guideline to help you decide on how to present your content.

• Decide now whether you are going to use frames or not. This will save you a lot of time when you realize that frames was a better option (or the other way around).
• Decide on your site's dimensions. Decide whether you are going to cater for one or more screen resolutions. Keep in mind that by today's standard 800x600 is the norm. (776x542 is actually "viewable" on your screen with the standard menu bars etc.).
• Create a Blueprint of your site by drawing out a layout of your site, such as where to put the logo, where to put your navigation system and where to put your content. Keep your navigation blueprint ready to assist you with decision making when drawing out the site structure and hierarchy.
• Decide on a theme for your site. This may include images, type of font sets, colors, and other elements that will characterize your site. Try to maintain the same balance and theme throughout your entire site. Keep your site Find more help on images in the graphics tutorials.
• Convert what you have on paper to a HTML document. Start by making a template which you will use throughout your site. The template will include all elements such as images, navigation structure, theme and other objects. Use tables where necessary, as they will proof to be useful in organizing your site content.
• Save this template as "template.html" to your disk, and use it every time to create a new page by just adding your content.
• Finally, follow the advice below, and beware of making critical layout errors as described under "Things to avoid"!

What will earn you points...

• We understand that some of the available browsers are slightly incompatible, but if you have walked that extra mile to make your site work and look great in multiple browsers, your efforts will not go unnoticed.
• Use clean and crisp HTML coding. Use meta tags effectively and clever. (This is an art!!) Remove unnecessary spaces, and ensure to close open tags. Not only will your pages display correctly, but also saves a lot on load time. More information is available inside the "validation" section.
• Use tables to add structure to your content layout. With the ability to make them transparent, adding cell padding and cell spacing you can have the power to make a professional design!
• Design your website to be viewable in as many resolutions possible. Today's standard requires at least 800x600 resolution, without having to use a lateral scrollbar.
• Make use of available hi-tech effects, such as Flash and Shockwave. Use them sparingly but to good effect, and you will be a step ahead.
• Use the same background on all your pages where possible.
• Use "interactive" popup windows to provide enhance your site content, such as supplying additional information, or as a help feature.
• Use white space to your advantage. Give your visitors the feeling of freedom, by using good spacing techniques.
• Use frames to add additional level of organization and structure to your web pages. Example: You can create a menu listing of all your pages using the side frame, and target them to the adjacent "content" frame. Use of frames could also save on download time, for example, fixed pages such as menus and headers do not have to load twice. Keep different screen resolutions in mind when you design with frames - set fix values for frames that does not need resizing.
• Use style sheets (CSS) to control the way your fonts, spacing and other special effects should work. This will save you a lot of unnecessary work once you have a decent working style sheet in place!

Thing you should avoid...

• On a professional note: Your website should never start with a page "we have moved - click here".
• "Under Construction" signs... is it really necessary? This may even be worth a ticket to the trash can with many site evaluators, since they will believe that your site is not finished or ready for an review. By the way - websites are always under construction - just don't tell that to anybody...
• Pop-up windows are extremely annoying and unprofessional, and should be avoided at all costs! If your host provider pops up their banner adds with each click we make, start looking for another host. See above how popup windows can work in your favor.
• Although the use of music may compliment your website, it is not really desired. Many of your visitors may be listening to their own music or the radio while browsing, making the ones you provide obsolete. Remember music requires additional download time. If you do use music on your website, provide a control to adjust the volume, or to stop it.
• Advertising? A designers nightmare to be honest. It is statistically known that just one of every hundred visitors will click on a banner... probably worth a mere three cents. Is it really worth the trouble and added download time to have any of them on your website?
• There is no need to tell anyone what the time or the weather is - by just looking outside your window you will see the weather, and by looking on your computer screen you will see the time...
• Careful consideration when you use Java applets. Use Java only if necessary. Things like lake applets, a popup asking your visitors name and other annoying effects such as a mouse trail should be avoided at all cost!
• Things, images and text that blink, skip, jump, flash...
• Text that virtually match your background color, or text that is impossible to read because of your choice of background / color. Blue text on a black background is simply not a good idea. See hexadecimal color map for more details about "websafe colors".
• Carefully plan the length of your pages. Huge gaps at the bottom of pages should be avoided, as well as "busy pages". (Cramming to much content, images etc. on a single page).
• Keep different resolutions in mind when you design with frames.

Previous Tutorial

Tutorials Index page

Next Tutorial