Website Best Practices

Maintaining a website can be quite simple and the Internet response can be amazing if you follow this checklist of best practices. Eventually there will be an article for each item explaining in detail the purpose, advantages, and how to.

Files & File Structure:

A website?s file and directory structure should be well-organized. Cramming all the files in the root directory is messy and makes it difficult to sift through a long list of files. Organize your files into appropriate directories?for example, images should go in an ?images? directory.
Give your files and directories meaningful names, but do not use spaces in the names. This will make it easier to manage your site.
Make custom error pages (Especially page not found 404). On a 404 page you can refer people to an e-mail address so they can inform you about a page that is missing, a bad link, etc. You may want to view our custom404 page.
Add a favicon.ico file to the root of your website. Then when a web user adds your site to their 'Favorites' your custom icon will be loaded giving you more visibility. Go to www.favicon.com for more information.
Make a robots.txt file that gives each search engine 'permission' to index your site.

Images

JPG files are best for photographs or art with gradient tints. GIF images are best for line art?cartoon-like drawings, text rendered as an image, artwork with flat areas of color.
Images should be saved to the exact size you want them to be viewed on the web. Do not resize images using size attributes in your HTML code or FrontPage. Taking a large image and having it display at a smaller size not only slows down loading times but also distorts your image.
Final web images should be saved same size at 72 pixels per inch resolution.
An ALT tag should be used for each picture. Not only does this make your website more accessible for the blind, but many search engines index these tags as well.

Image Example:
<img src="/images/imagefile.gif" height="200" width="100" ALT="Picture Description">

Clue: It is not recommended to change the size of your image using the size attributes (height and width - see example below), however it is recommended to specify the actual size attributes of each image. This is because even before all the images are loaded, the page is shaped to its final structure. Without the size attributes, text and other pictures can get bounced around as room is made for each loading image.

Style

A great alternative to frames is to use tables or divs. If you make a table and set it's width to the entire width of the page, you can then split it into multiple cells to get the same effect without using frames. Tables give you more control over your borders, spacing, and allows you to place items exactly where you want them. Divs are similar to tables in that you can embed them and size them but you can also locate by specifying the exact coordinates.
Select fonts that are most likely to be used on 99% of the computers on the Internet, you may want to select more than one at a time. The code for using multiple fonts looks something like this:
<font face="verdana, arial, helvetica" size="2">
Cascading Stylesheets allow you to specify font sizes and formatting throughout the site from a single page. This allows for quick style changes site-wide!.

Coding Suggestions

Every page should have a complete descriptive title, meta description and keyword tags. This will help with higher scores in search engines.
Do not code links to pages within your site with absolute pathnames (http://www.yourdomain.com/yourfile.html). Use only root-relative (/index.html) or document-relative (../index.html) links. This will guarantee that your files are called from the site it is being browsed in?not another copy, such as a development site. I personally prefer root relative links.
Do not use Microsoft Publisher, Microsoft Word, or any desktop publishing or Word Processing program to create HTML code. These programs do a horrible job and it becomes impossible to manage it with better programs when you want to do more advanced features. Recommended programs are Microsoft FrontPage 2000, Dreamweaver, Hot Dog, HoT MetaL Pro, etc.
Take advantage of using server-side include files. This will allow you to update the navigation and titles of your whole site from one location. Refer to Handy ASP and Handy PHP to learn how to use Includes for each Programming Language.

Marketing

Now that you got a website put together, do everything you can to help people know it is there. Put the web address on your business cards, invoices, in your commercials, and on your company vehicles. Submit your website to search engines and update it often. If you are selling stuff on your site, participate in affiliate marketing and get businesses to link to your site from theirs.

Article last reviewed: 08/16/2003

del.icio.us

Created by: Digital Foundation, inc.

All content of the NetworkClue website is copyrighted. Articles, notes, outlines, and all other materials may not be stored on the Internet or sold or placed by themselves or with other material in any electronic or printed format in whole or part. However materials may be referenced by links to the site.