The following are hints and suggestions I make about peoples home pages as required. For a full list of suggestions I mail to people about home pages look at http://www.cit.gu.edu.au/~anthony/info/www/homepage.hints An alturnative page of things NOT to do is http://earthspace.net/~esr/html-hell.html ------------------------------------------------------------------------------- Research Results... A book/report called "Web Site Usability: A Designer's Guide" reports on some research done by seeing how well people navigate around the web. Findings include: - Color is really only useful to indicate a visited link. EG: Multi-Colored text is just difficult to read. and to figure out where users have been. - Animation may be good in ads, and look cool, but otherwise it just irritates web browsers and makes pages difficult to follow. - "Frames" help only if designed well. EG: It is only usful in indexing libraries and books, not for general use. More research results at http://www.uie.com (Source: HTML Writers Guild Mailing Lists) ------------------------------------------------------------------------------- Sign all Pages You should add a Email Address part to the bottom of all pages which contain as a minimum... Creation Date, Last Major Change Date, and who to contact for Errors. That last is most important. It should consist of your name and your email address. The mail address being links with a `mailto' link or to your ``send mail form''. I have found that if you do not provide at least a ``errors link'' people will just NOT report errors and problems to you. ------------------------------------------------------------------------------- Homepage of Links (Yuck!) Do not just create a homepage of links. Everyone does this and it is very boring. Make a separate page for such `hotlists' and maybe make this page the default start page for your WWW client as only you would be the major user of such a pages. Devote your actual homepage to information about you, your interests and especially any information you wish to give to world. Leave your hotlist as a clearly marked sub-page. Example. My hotlist is available to people who want it, but is NOT listed directly on my homepage. It is however the first page my Netscape clent loads so I can jump to the places I go to all the time easily. HomePage (My Home is my Castle!) http://www.cit.gu.edu.au/~anthony/ Hotlist http://www.cit.gu.edu.au/~anthony/hotlist.html Personal Information http://www.cit.gu.edu.au/~anthony/anthony.html ------------------------------------------------------------------------------- Using ``Click here'' all over the place Using the words ``Click HERE'' is bad, repeative and treats the viewer as if they are dumb. If the user has reach your pages then obviously he knows what to do with web links. Also what if the user is using a text only web browser! Then he will not be using a graphical pointer (mouse) and as such ``click here'' is not even correct. Also who is to say that sometime in the near future some other selection mechnisim will not be available! then your ``click here'' should probably read ``look here'' or ``point here'' or even ``pull this'', or even all of them! Who knows how we would be using computers in the years to come. ------------------------------------------------------------------------------- Bad Colors (Also see research results above) (Link Colors -- From Sun's Style Guide) The convention that's evolved among creators and users of web browsers is that links that have not yet been followed use a brighter or higher luminance color than those that have already been traversed. (For many browsers, they're shown in shades of purple or blue) When you change the link colors (LINK and VLINK options to the BODY tag), you can easily reverse this brightness mapping, or worse, choose colors that read at the same level of brightness. Don't do it. The problem is that changing link colors makes it difficult to tell where people have been, which is difficult enough as it is. You are just making it easier to get lost. (Visited Link color is red!) When the mosaic web browser was released, had the convention of using Blue for Links and a Darkish Red for visited links. This scheme was also use by the later developers of netscape and all other web clients. As such people expect that dark red links means `visited' as such red should not be used at the normal `unvisited link' color. I suggest you try to keep reasonally close to blue, unvisited and dark red for visited link colors) (Link Color and Visited Color is the same) This is bad as the web user has know way of telling if thay have previously visited the page the link refered to or not. This is very very very annoying. If this happens a lot on a site, the visitor may dispare of finding any other unread information very quickly and leave. The only exception to this is to `hide' information. For example in web adventures such as my own ``Castle Adventure'' a maze becomes fairly easy to explore if and when links are colored differently if you have visited the `node'. Such cases of information hiding is the only time I would think that the visited color matches the link color. (Too colorful a background) Your Home page text is very difficult to read -- please change or at least reduce the range of colors used in your background to something distant from your text and link colors. ------------------------------------------------------------------------------- Underline text which are not links... Do not underline non link text, particularly if it is not the same color as the documents normal text color (whatever that is). Such underlined text is far too easilly mistaken as a link users can select or click for more information. It just confuses people. ------------------------------------------------------------------------------- Saying the Obvious in titles and headings... Don't bother labeling your main top level page as just ``Home Page''. It looks silly and make it appear that you think your readers are dumb. The title or graphics of the page should make it clear if this is a home page or a sub-page of your site. Instead just title your top level page as normal or add extra graphics or other fanciness. For subpages, use a simpler title about what that page is about, and include a plain simple link to ``return to top/main/home page'' somewhere near the top. This makes the difference obvious enough. That return link can be repeated near the bottom of a page for convenance, if the page is more than one or two screen fulls long. ------------------------------------------------------------------------------- Header Tag Miss-use DO NOT mis-use the header tags (Eg;

) for font size selections. These tags should ONLY be used for headers and titles to sections. IE: don't use them for whole paragraphs or lists. (Continue this in ``Font Size Change Overuse'') ------------------------------------------------------------------------------- Font Size Change Overuse The font used in client programs (or selected thourgh options by the users) is the most appropriate for reading. Stick to the default text size as much as posible and only deviate if you must, without overdoing it. EG: only use a larger font for headings. Also a larger font means less text will fit on a display, meaning the users will have to scroll more often than should be nessary. It also is a waste of paper if printed. If you must use a larger font size (like for a paragraph capital, or someone shouting) use the netscape tag instead and then make it relative to the current font size. In summery :- Use font changes sparingly. Example: This is the start of a paragraph with an extra large letter like old gothic documents. or: Suddenly from down the corridor you encouter a mad man screeming ``Kill!... I'll kill you all!''. ------------------------------------------------------------------------------- Missing Size Hints for Images Please include in all your HTML tags the WIDTH and HEIGHT attributes. By adding this information to images graphical web browsers (Netscape, internet Explorer, etc..) can leave enough space for the image, yet to be loaded, and display the rest of the HTML document which follows. It also allows them to organise requests to make fastest and best use of network bandwidth. As you probably check your homepages from a machine very close to the HTML server, the images are probably loaded very very quickly so you don't see a problem, but for other people further away, netwise, (like australia :-) untill the image has loaded, any following text is just not readable. EG: Instead of [image] use [image] as appropriate for your images. ------------------------------------------------------------------------------- Do NOT let browsers resize your image The WIDTH and HEIGHT attributes for IMG's should match the actual width and height of the image you are tring to diplay. Do not let netscape or some other browser resize the image for you as it will only to a quick rough and both job. If it is very much smaller than image, it takes a long time to download the large image for a very small display. If it is only just a few pixels smaller than the image text and fine lines in the image look strange as a line or column of pixels are removed to make it fit. Using WIDTH and HEIGHT attributes to increase an images size is also bad. The images become blocky and distorted, and just look bad. The only situation I have ever seen where WIDTH and HEIGHT image tag attributes can be different to the real images width and height is for `transparent' spacing images or for plain horizontal lines being expanded or shortened. In these situations the change in image size does not effect the result. Of course on web browsers which do not support WIDTH and HEIGHT attributes, the image will be displayed at its proper size which inturn could destroy the layout of the page. ------------------------------------------------------------------------------- Images are much too large. Do NOT use large images, unless it is an image map, or the centeral feature of the page. They are expensive (in both time and net bandwitdh) to download and do nothing a smaller thumbnail version of the same image can do. If you are showing or referencing a large picture, create a small ``thumbnail'' no more than 100 x 100 pixels (preferably about 60-80 pixels) which when selected will load the larger full picture. Example HTML... "photo.gif" is a small thumbnail of the original photo.jpg" [photo] For an Example of thumbnails look at my Kite Gallery http://anthony.kitelife.com/gallery/ ------------------------------------------------------------------------------- Large Background Image I would not use a large background for the simple reason that it takes too long any any real distance (I am in australia!) A small tile image would probably be better, and just as effective. As would a long thin background image. Under Netscape Version 1 nothing of your document would be displayed until this image loaded (after a long period). Also the background suddenly appearing after a long time is disconserting to a reader, espsecially is the background color of your document does not match your background image. ------------------------------------------------------------------------------- Image Considerations Summery For the web a few things should be considered for images. 1/ As mentioned above use the correct sized image you need EG: WIDTH and HEIGHT tags should be correct for image don't let netscape resize the image to fit, do it yourself. 2/ Always use WIDTH and HEIGHT tags. That way netscape can display the later text while the image hasn't been loaded yet. 3/ Make your image as small in size as posible. a) For large images use a very lossy JPEG. b) Use smaller images (thumbnails) c) use GIF compression or PNG instead of GIF A good solution is to use a small thumbnail for image which is itself a link to the full sized non-lossy JPEG image. 4/ Turn on `interlace' on GIFS (or JPEG if you can) so the basic image can be seen faster. 5/ Do not use large background images. (See above) ------------------------------------------------------------------------------- Mixed Icon Images You need to coordinate your icons, every image on your page uses a completely different style, color scheme, size, etc, etc, etc... This looks increadibily messy and is difficult to follow. Select a icon style and color scheme and stick to it through your pages. ------------------------------------------------------------------------------- Too many GIF Animations (Also see research results above) You are overloading computers of visitors to your site with the number of GIF animations. More than 3 or 4 animation on a page just loads down the visitors computer which is not good. Reduce the number of animations. Also Research show that animations while fine for webwork ads in limited banners, just make a site difficult to read and navigate through. Don't use them unless you really need to. (See also use of blinking text!) ------------------------------------------------------------------------------- Breaking up long HTML lines Also you can insert newlines which do not appear as white space in the html document by placing them INSIDE html tags. EG: will add newlines to the html source but no whitespace will appear around the image (leaving little link lines). This is valid html! It is especially importatant when generating a DIY image. That is a larger image built from lots of smaller images strung toether without spaces between them.... For Example: See the source HTML for.. Icons Library http://www.cit.gu.edu.au/~anthony/icons/ ------------------------------------------------------------------------------- Side frames not needed. (Also see research results above) If you are going to add a index frame on the side of your pages you will have to reduce the width of your logos, lines and text. As your side index is not very big I suggest you have a top or bottom index frame instead of a side frame. If you even need a frame at all! Which I don't think you do. Frames are more useful for documents and directory navigating than general site use. ------------------------------------------------------------------------------- Illegal HTML Open tags should be closed in the correct sequence EG: 
....
Is highly illegal and needs to be 
....
Note the ordering of the open and closure of the tags. Also note that while some HTML tags have a closure, you don't actually need to use the closure tag for them. For example

all have closures (EG:

) which are not required or used in practice. Other tags of course do require a closure For example ,

etc... ------------------------------------------------------------------------------- Check your HTML Get the perl script ``WebLint'' which will find and report bad html. http://www.khoral.com/staff/neilb/weblint.html ftp://ftp.khoral.com/pub/weblint/ Sites are also available which you can ask it to download and check a specific URL like your homepage and report problems. -------------------------------------------------------------------------------