(Site Identification)

'Eye' Focus: Web Support Tutorials

Web Style: Guide

Table of Contents

For a checklist of helpful web style elements, please visit the Web Style: Checklist.

(to Top) It's the Principle of the Matter

o Clarity is your number one concern:

The user should have a clear idea of what information you are trying to present.

The user should be able to quickly navigate to the desired portion of your site.

o Consistency is the most important coding principle:

The style of the code should be the same throughout the site (not just the current document).

o Readability should be high:

Others should be able to look at your code and quickly understand what you are doing. Remember that you are not the only one who will be updating the pages you create.

Use carriage returns and tabs to build a hierarchy and to separate portions sections of the page, but don't get carried away with this; you can have too much white space.

Remember, the more characters you put in a page, the longer it will take to download. This includes useless carriage returns, tabs, and spaces as the browser will not render them anyway. Keep code formatting to a bare minimum.

o Tags should:

… Be consistently coded throughout all of your documents for readability and debugging.

… Be both opened AND closed. This includes <li> and <td> tags. Unclosed tag sets will cause problems with some browsers, with Style Sheets, and can even cause errors in some web languages.

… Be without unnecessary white space, as in using:
< img src = "blah.gif" >
instead of using:
<img src="blah.gif">
The practice can cause problems with some browsers.

o Be proud of your code:

You should be able to use any of your pages as a good example of HTML.

You should be able to teach someone HTML with only your pages as a guide.

(to Top) Other Guidelines

o Use of comments follows from readability:

By commenting your code, you will greatly aid those trying to figure out what you have done. This is primarily a concern where there is non-HTML code included or there are a lot of tags.

Don't get carried away with comments either. Comments are not rendered by the browser, but they can significantly increase the download time of your pages.

o The load time should be kept minimal:

Shoot for less than 50 kilobytes total file size per page, this includes all images, or even less for best results.

Make a quick-load or text only version of any graphic-intensive pages. Warn visitors of pages that are large and offer an alternative if possible.


If it is under construction it shouldn't be public.

Instead, announce release dates of new material. This improves traffic to your site more than an idle promise that you are not finished.

o Java is Great in very few cases:

Only include applets when it is the best solution for necessary content.

Get your idea approved before including an applet.

o No frames:

You should always avoid the use of frames unless you have a very special and specific purpose for them.

Frames can create complications with printing that some users have difficulty managing.

Search engines have problems indexing pages, and sites, which require frames.

If you use frames, include the <noframes> tag set with an alternative method of navigating the site. For this reason alone you should be avoiding frames because it creates more work to produce a functional, and search indexable, site.

o Do Not use a web server's text editors for web editing:

Use of Pico, VI, etc. takes more time than other text editors. It can also be difficult to apply a search and replace, spell check, code check, or other tools with these editors.

Most UNIX based editors will force-break your lines with no regard for content. Words may become broken with spaces or code may become disabled.

o Avoid animated GIF's:

Animations can often be annoying, have higher load times, and they can literally send some people into seizures. However small, occasional, well-planned, and tasteful animations can enhance a rather boring site.

o No blinking text:

It is, in the opinion of most people, annoying and should be avoided. Many browsers no longer support this tag for this very reason.

(to Top) Some Useful Information from Other Sources.

o Web site speed tweaks:

o Making your web site accessible:

o Making your Web error free:

Know of any other good information sites? Suggestions and questions are welcome!

[Updated: Sunday, November 18, 2007]