Design | Optimisation | Copywriting

Multimedia | Design Tutorial | Usability

Portfolio | Appraisal | Prices | Design Faq

Development | Marketing | Non Profit

E-commerce | Optimisation Tutorial

Rankings | Promotion | Optimisation Faq

Design Styles | Search Engines | HTML

Internet History | Computer History

Testimonials - 2

This very basic website design tutorial will enable you to develop a reasonable personal website. A business website is another matter, however, the development of which you should seriously consider leaving to a professional who has the copywriting and optimisation skills to get it positioned high in the search engines as high rankings and targeted visitors are as important as the design of your site, if not more so.

The single most important factor to remember when designing websites is that users will access them via a variety of different computers and browsers, which may mean that how they see your web pages is entirely different to how you imagined they would when you designed them. This is because some computers and browsers (thankfully not too many!) may not support features such as colours, graphics, photographs, JavaScript and CSS (cascading style sheets). It should also be remembered that some computers and modems are much faster than others, and that some display monitors have a larger "desktop" than others.

This creates a dilemma for the website designer. If you design your pages for the lowest common denominator, they are certain to be drab and un-interesting, but on the other hand, if you utilise HTML extensions developed only for a particular browser, then many of your visitors will not be able to appreciate them. There is no perfect solution to this but generally speaking, if your web pages work as you intended with the latest fully supported versions of Netscape's Navigator, Firefox and Microsoft's Internet Explorer browsers, then the vast majority of web users will view your pages correctly.

Fonts and colours are important to website design. You should always ensure that your pages are both easy-to-read and "easy on the eye" - a result readily achieved by using light coloured backgrounds and dark text. Background colours should not be the dominant feature of your pages. Use white wherever possible, especially if your page contains mainly text, or if you prefer something a little less stark, use a pastel colour. Always avoid the default grey background of most browsers to make your pages stand out.

It is tempting to use a variety of exotic fonts for the text but it should be noted that not every user will have these fonts already installed on their computer. Instead, use commonly available true-type fonts such as "Times Roman" as your 'proportionately spaced' font and "Courier" as your 'mono spaced' font. Also, font size should be reasonably large for further clarity.

Due consideration should be given to the colours of your hyperlinks. It is very tempting to use a variety of colours but to prevent your visitors becoming confused, it is wiser to stick to the range of colours normally used. Use blue for the links not yet selected or "unvisited" and red for links already selected or "visited". Use purple for links that have already been visited. Experiment for yourself, but remember this advice and your website will be both attractive and easy to interpret.

Finally, make liberal use of tables and cascading style sheets to set your left and right margins and remember, table cells can contain pictures and graphics as well as text. Also bear in mind that long lines of unbroken text are more likely to be overlooked than shorter variable lines of well positioned paragraphs.

Website Design Tips:

1. Opening graphics should display fully on the user's screen without scrolling, so that means a maximum size of 640 by 480 pixels. Also, re-use graphics such as banner headlines as much as possible as once downloaded, graphics are stored in a memory cache and are thereafter displayed from memory.

2. Keep graphics and images small and simple so that they are downloaded as quickly as possible. There is nothing so frustrating for a web user as waiting for large images to appear.

3. Always use the ALT attribute with the <IMG> tag so that a description of the graphic will appear before it is downloaded. This is particularly important for users with browsers that don't support graphics or who connect to the web using a non-graphical terminal.

4. Crop your graphics to show just the important images. Especially crop out large expanses of sky or sea or other areas of mostly single colours.

5. As a general rule, use JPEG images for photographs and GIF images for art and graphics.

General:

1. If your website is composed of multiple pages, always provide links back to your home page so that users can easily return to your "table of contents". Or better still, set up your navigation so that all important pages link to each other.

2. Break up your website into small pages to avoid unnecessary scrolling and make sure that your navigation functions are near the top or the bottom of the page. If you must have a long scrollable page, then ensure that the user has frequent links back to the top of your page.

3. Always test your pages with a number of browsers; that means Firefox, Netscape's Navigator and Microsoft's Internet Explorer as a minimum. Also test your pages on both small and large monitors.

4. Somewhere on your page, usually at the end, include a note as to when it was last updated.