mjr
ADD -- blessing and curse
When it comes to the web, and web design and development, a sound plan can be your best friend. Careful planning of your website can make your design and development much easier, and make the visits much more enjoyable to your target audience.
Below you will find tips, suggestions, and examples to help you with the design and development of your website.
Directory Structure
A sound directory structure will help ease the update and development process, and can significantly reduce confusion. When you set up your directory structure, it is helpful to create a different directory for each file type you are using. Within this taxonomy, it is also helpful to go from generic to specific. If your website will contain images of multiple formats, it is advisable to create a directory called “images” at the root level, and within the images directory, create your other image format directories (i.e. .jpg, .gif, etc.).
In addition, it is also helpful to create directories that are similar in structure to the top-level menu you will be using on your site, especially if your website will have a number of pages under each menu item and/or category.
Remember to avoid using spaces when naming files and directories. Be as descriptive as possible with your naming scheme, but keep the file names and directory names as brief as possible.
Your main page should be named index.ext or default.ext, where “.ext” is the extension (.html, .aspx, .asp, .php, and so forth) that you are using for your development. This is primarily to avoid confusion when you do your development. Each main page within your subdirectories should follow this same naming convention. The caveat here is if your hosting company specifies what your main page should be named. If this is the case, follow the conventions set forth by your hosting company.
Site Colors
Most colors can be used successfully on the web – if they are used properly. Other times, color combinations are to be avoided. A bright yellow background (e.g. RGB 255, 255, 0) with bright red text (e.g. 255, 0, 0) is not only highly unattractive, it is very difficult to read, and will make your users leave quickly because it is very hard on the eyes as well. Text backgrounds should be limited to “soft” colors, and text should be in colors that are easy to read when put on the background color. Remember, also, that some users may want to print off specific pages. This should be taken into consideration when designing your website.
Fonts
Text-based fonts (fonts that do not appear in images) should be restricted to standard serif, and sans-serif selections. Times New Roman, Times, Arial, Helvetica, and Verdana are common fonts to utilize in your design. If you wish to use multiple fonts, limit the number of fonts you are using to a maximum of three. Utilizing bold and italics is fine, but limit the use of the underscore, if possible, as it may confuse users looking for a hyperlink. As browsers interpret font sizes differently, it is also helpful to utilize CSS and specify a pixel size instead of a default, or a point size. Thirteen pixels (13px) is roughly the equivalent of a ten-point font.
When it comes to putting fonts in imagery, exercise caution with those fonts, as well. Select a font that is readable at the size you need it. If the font is not readable, or is difficult to read, do not use it.
JavaScript/DHTML
If possible, keep scripting to a minimum, unless the purpose of your site is to act as a code portfolio. Some users (roughly 11%) will disable JavaScript, and any functionality you may have coded in will not work. Try to avoid certain DHTML/JavaScripts that do not enhance the usability of your website. Examples of this would be “mouse trails”, DHTML clocks, and other things that may prevent the user from reading and obtaining information from your site. However, if the script enhances the site (scrolling text in a small area, for instance), it can be used. The trick is to not go crazy with scripts, and to not use over-heavy scripts because they are “cool”. JavaScript menus can be used, but with caution.
Animations
Keep non-Flash animations to a minimum. This serves a dual purpose. If you are using image rollovers, that means additional images that must be downloaded. The second purpose is that excessive animations may be distracting to your end user. If you are using an animated .gif file, these files can be fairly large, and increase download time. Blinking text (whether within or without animations) should be avoided, as well.
If you choose to utilize animations, keep them subtle, and do not overuse them. That is the key.
Flash/Flash Sites/Flash Animations
Many of the same rules apply to Flash as they do with animations. If it is at all possible, avoid a full Flash site. Your site will probably not be indexed by search engines with a full flash site. Flash sites are also much more difficult to maintain and update. One other item to remember is that your end user may not have the Flash player installed. As with animations, Flash should be used sparingly.
Audience Profile
Creating an Audience Profile can assist you with your design by giving you a better picture of your audience. A sound audience profile can help you build a site that is appealing to the audience you want to attract, and can help you build a site based on what you believe your audience wants. The audience profile will also answer questions such as the age, gender, computer experience, browser preference, connection speed, and so forth of the possible users to your site.
-----
I will update and refine this (especially the audience profile part), but you get the general idea.
Below you will find tips, suggestions, and examples to help you with the design and development of your website.
Directory Structure
A sound directory structure will help ease the update and development process, and can significantly reduce confusion. When you set up your directory structure, it is helpful to create a different directory for each file type you are using. Within this taxonomy, it is also helpful to go from generic to specific. If your website will contain images of multiple formats, it is advisable to create a directory called “images” at the root level, and within the images directory, create your other image format directories (i.e. .jpg, .gif, etc.).
In addition, it is also helpful to create directories that are similar in structure to the top-level menu you will be using on your site, especially if your website will have a number of pages under each menu item and/or category.
Remember to avoid using spaces when naming files and directories. Be as descriptive as possible with your naming scheme, but keep the file names and directory names as brief as possible.
Your main page should be named index.ext or default.ext, where “.ext” is the extension (.html, .aspx, .asp, .php, and so forth) that you are using for your development. This is primarily to avoid confusion when you do your development. Each main page within your subdirectories should follow this same naming convention. The caveat here is if your hosting company specifies what your main page should be named. If this is the case, follow the conventions set forth by your hosting company.
Site Colors
Most colors can be used successfully on the web – if they are used properly. Other times, color combinations are to be avoided. A bright yellow background (e.g. RGB 255, 255, 0) with bright red text (e.g. 255, 0, 0) is not only highly unattractive, it is very difficult to read, and will make your users leave quickly because it is very hard on the eyes as well. Text backgrounds should be limited to “soft” colors, and text should be in colors that are easy to read when put on the background color. Remember, also, that some users may want to print off specific pages. This should be taken into consideration when designing your website.
Fonts
Text-based fonts (fonts that do not appear in images) should be restricted to standard serif, and sans-serif selections. Times New Roman, Times, Arial, Helvetica, and Verdana are common fonts to utilize in your design. If you wish to use multiple fonts, limit the number of fonts you are using to a maximum of three. Utilizing bold and italics is fine, but limit the use of the underscore, if possible, as it may confuse users looking for a hyperlink. As browsers interpret font sizes differently, it is also helpful to utilize CSS and specify a pixel size instead of a default, or a point size. Thirteen pixels (13px) is roughly the equivalent of a ten-point font.
When it comes to putting fonts in imagery, exercise caution with those fonts, as well. Select a font that is readable at the size you need it. If the font is not readable, or is difficult to read, do not use it.
JavaScript/DHTML
If possible, keep scripting to a minimum, unless the purpose of your site is to act as a code portfolio. Some users (roughly 11%) will disable JavaScript, and any functionality you may have coded in will not work. Try to avoid certain DHTML/JavaScripts that do not enhance the usability of your website. Examples of this would be “mouse trails”, DHTML clocks, and other things that may prevent the user from reading and obtaining information from your site. However, if the script enhances the site (scrolling text in a small area, for instance), it can be used. The trick is to not go crazy with scripts, and to not use over-heavy scripts because they are “cool”. JavaScript menus can be used, but with caution.
Animations
Keep non-Flash animations to a minimum. This serves a dual purpose. If you are using image rollovers, that means additional images that must be downloaded. The second purpose is that excessive animations may be distracting to your end user. If you are using an animated .gif file, these files can be fairly large, and increase download time. Blinking text (whether within or without animations) should be avoided, as well.
If you choose to utilize animations, keep them subtle, and do not overuse them. That is the key.
Flash/Flash Sites/Flash Animations
Many of the same rules apply to Flash as they do with animations. If it is at all possible, avoid a full Flash site. Your site will probably not be indexed by search engines with a full flash site. Flash sites are also much more difficult to maintain and update. One other item to remember is that your end user may not have the Flash player installed. As with animations, Flash should be used sparingly.
Audience Profile
Creating an Audience Profile can assist you with your design by giving you a better picture of your audience. A sound audience profile can help you build a site that is appealing to the audience you want to attract, and can help you build a site based on what you believe your audience wants. The audience profile will also answer questions such as the age, gender, computer experience, browser preference, connection speed, and so forth of the possible users to your site.
-----
I will update and refine this (especially the audience profile part), but you get the general idea.