Guide for good web page design

"Everything in this guide can be summarised in two words: Be Considerate."

Colour

Don't think that everyone likes to play spy games. People can't read light grey text on white backgrounds. Neither does dark blue or red text stand out on a black background.

Don't use white text on dark background. Ever wondered why those gorgeous white on black pages seem to have invisible text when printed? This is why -- the background is not printed by default and white text won't be printed by a printer! Surfers need to override the browser colours if they want to have a printout of your page. So unless you have something really fantastic, this extra work on their part is simply not worth their effort. Besides, not everyone knows how to override the browser colours.

Do check that colour combinations that acceptable on your platform works well on other platforms too. Colours look different depending on which platform you are on (e.g. Mac or PC). Despite the 16.7 million colours that are available from your graphics card, less than 300 colours look consistent throughout all computer platforms. Read Lynda Weinman's books for more details.She has also put up a free web version of the important points on her website under the section Non-Dithering Colors in Bowsers (http://www.lynda.com/hex.html).

Do use simpler background images. This makes your text stand out better. A busy background distracts and irritates.

Do set a non-grey default background colour. The default background colour is usually grey. This would be what visitors see if you do not have a background image file or if they have turned off their graphics. A grey background looks dull and depressing. If you have nothing to put as a background image file, use white. At least this colour will look consistent on every platform.

Contact

Don't let people think you are from Mars. You do have a reachable email address, a phone number or postal address, right?

Do leave your contact information on your home page. Leaving just your name is not good enough -- there are just so many people with the same name in this world. It is a good practice to leave your email address or phone number so that visitors to your website have a means of contacting you if they need to. An email address is ideal because you may even get enquiries or comments from overseas visitors. Then the next step is to make sure that you check your email often. You may leave out other contact means if you are shy about it, but an email address is crucial.

Fonts

Don't assume that all your visitors are half-blind. Using large heading fonts or huge font sizes for all your text only shows that you need a prescription.

Do consult your friends for their opinion on your web page's layout. There are some things which you may not be aware of that may irk a visitor. If you want emphasis,
how is this for catching your ATTENTION!
Take their frank comments in the right light -- after all, you want people to visit your page right?

Frames

Don't over-use frames at the expense of readability. The more frames you have the smaller is the area that is left for your main contents. Morever, not everyone knows how to resize, print, save, navigate around, or get out of a frame.

Do check that people can still view your main contents easily at 640x480 resolution. Design your main contents page around the frame concept if you must use frames. That is, it can still be read easily at the lowest screen resolution. Give surfers an option to get out of a framed page if they wanted to. It would be even better if you have a frame-less alternative for visitors. It is best not to use a frame for navigation when a table or simple text hyperlinks can serve the same purpose.

Graphics and animations

Don't think that everyone is interested in your entire graphics collection. Be considerate. People pay to use the Internet, and not everyone have the latest and fastest modem that was released just last week.

Do select your graphics and animations wisely. After all, having a cute monkey climbing up and down the side of the page does nothing to improve the image of your corporate web page. Save it for your personal page.

Do keep pictures as small as necessary. Learn to crop or resize huge graphics before putting them on your page. This applies for the background wallpaper as well. Try both JPEG and GIF to see which method can give you a smaller file size with acceptable loss in picture quality. When using JPEG, experiment with the different qualities available. You do not need to use high quality all the time; sometimes medium or even low settings are still acceptable. There are a number of books on this topic. Read them.

Do use ALT text for each and every one of your graphics. This will allow people who turn off the auto-loading of graphics to navigate your site. A lot of people with slower modems do turn off their graphics especially when they visit overseas sites.

Do give an alternative non-Shockwave menu. If people do not have Shockwave plug-in, or do not want to update their plug-in to your latest version, you have to give them an alternative menu to navigate your site. Anyway, repeat visitors will not want to view the fancy animation on your homepage again when they visit your site the next time. What is the point of letting people skip the animation? You are better off without any fancy Shockwave entry animation in the first place. It saves you much work and money too (if you have paid someone to design your site for you).

Java applets and Javascript

Don't use Java/Javascript all over your page. People are not impressed with a page if it takes an eternity to load.

Do select your programs wisely. Are those applets or scripts really necessary? Are there CGI equivalents? Remember that a surfer's attention span for most pages is merely a few seconds long before they are distracted by something else.

Screen resolution

Don't assume that everyone has a 17" monitor or have their screen resolutions set at 1024x768 pixels. People are not going to switch their monitor resolution just to view your page at 1024x768. They have better things to do like watch the TV. You have lost one more audience on the Web who will not come back for a re-visit.

Do design your page for 640x480 pixels screen resolution if possible. This is the resolution that all people can see without any problems regardless of their screen resolution. If you can't fit everything in at this size, then use a little smaller than 800x600. (You have a little less than this resolution after deducting the space for the browser's window and menu space.) Then before releasing your page to the world, test it with all resolutions -- 640x480, 800x600 and 1024x768 to see that everything still looks okay however the page is viewed.

Sound

Don't start MIDI files automatically. This is not a music store. Your favourite piece may sound good once, maybe twice, but we are all sick of it if we are forced to listen to it every time we visit your page. Besides, it takes so long to load. This is a sure thing to drive people away from your site.

Do allow visitors an option to load the music. This way people chooses to and expects to wait for that music. It would be good to let people know the file size and name of the song beforehand too.

Do remember about copyright. Unless it is your own composition, or a very old piece of music (where the copyright has expired), generally most songs on the Web are copyrighted. It is just that the owners don't want to waste their time and effort to catch everyone, especially personal websites. But if yours is a company web page, remember that there is a chance of getting into a lawsuit. It is just not worth it, so don't start. Besides people may not appreciate the risk you took (see points raised above).

Back to Web Authoring guide