WEB DESIGN : GENERAL TIPS

Colour Chart:
Click here to see how web safe colours will look in your page. You can then choose the best colour and copy and paste the colour code into your web page. (opens into a new window)

Clean Layout Design:
A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content. Use fonts that will be available on all computers (Windows, Macintosh, Linux and Unix) to prevent your site looking messed up. These will be: Times, Arial, Helvetica, Verdana, Courier (!).

More About Fonts in Web Design:
Applying different fonts and typefaces in web site design is not as simple as it is in print design. For example, let's say you would like your web pages' text to display in the typeface Avant Garde. In order for your web pages to actually appear in this typeface, your visitors must have the Avant Garde typeface installed in their computers. If your visitors do not have this typeface, your web pages will look completely different to what you intended.

The only way to have a typeface display exactly as you intend it to display on a web page, you must put the typeface in a graphic image.

If you desire to force a typeface in the text of your web pages, we recommend that you use the most common typefaces already installed on computers. The most common serif typefaces are Times and Times New Roman. The most common sans serif typefaces are Arial, Helvetica, and Verdana.

Designing for the Monitor:
There are now more than 40 different screen resolutions.
1024x768 is the most popular resolution used (getting the lions share of around 60%) followed by 1280x1024 and above (around 25%) and 800x600 (around 14%). 98% of users have 800x600 and above resolution, thus, 800x600 can be taken as the minimum resolution the site should fit (other lower resolution are seldom used). View the Browser Grid tip.

Suppose your site doesn't look good at a particular resolution, it is very probable that the visitor will close the browser window feeling that the web page is not for their viewing. Designing stretch layouts that fit any screen resolution ensures that you know all your visitors see a visually appealing and professional site.

Don't say “click here”
Use informative link names, making the name of the thing itself into the link. Why? People tend to read webpages quickly, scanning for links. A linked name will catch the eye and identify the link in one step, while “click here” requires the user to hunt around in the text to find out what the link goes to.
No: Click here to go to the PCTutor homepage
Yes: PCTuto r web site.

Title your page:
A page's title appears in the top frame of the browser window and is the text saved in a bookmark, and it will be on the printed page, so make it accurate and descriptive but brief.

Organize your content:
Using hierarchical headers. Use H1 for the top headline on the page, and H2, H3, etc., for subheads. Logical headers will make your page easy to read even when the style sheet is removed (such as when viewing on a cell phone) and will make it more accessible to the disabled.

Use brief but informative file names:
Use homecoming.html (rather than, say, hmcmng-new1.html). Remember that your page's name, and the name of the folder it's in, will show in its public Web address. Also, be sure to use “Web-safe” file names: only lower-case letters, numbers, the underscore (_), and the dash (-). No spaces!

Using index.html
Name the main page in any directory or folder “index.html.” That way, you can publicise “www.pctutorweb.com/webdesign” instead of “www.pctutorweb.com/webdesign/mainpage.html.”

Using ALT text on Graphics:
Add brief ALT text to informative graphics so that people who can't see the graphic will know what it is. Graphics that are merely decorative should have blank ALT attributes.

Keep your Web Site Clean!
Delete or remove obsolete, duplicate, and draft files from the web site folder and the hosting server. The web site folder should only contain your current site files, as should the hosting server.

Resizing Images:
Never change the size of an image by altering the WIDTH and HEIGHT properties of an IMG tag. Enlarging makes them look jagged, whilst reducing them wastes bandwidth. Alter the size of the graphic itself in your graphic editor.

Recent studies show:
that the average net user only scrolls down on 25% of web pages they visit - make sure that the top part of any web page is eye-catching and contains decent navigational links.

Search Engines:
Eight out of ten web surfers say that they use search engines as the first step in finding a site. To make sure that you get found, you need to submit your site to as least www.google.com, www.yahoo.com, www.lycos.com, and www.searchnz.co.nz in New Zealand. You can also use the free service at www.submitexpress.com.

Last updated: 6 Feb 07

Please contact us if you thought these tips were helpful - thanks.

Top