Nelmes banner

Web Page Do-It-Yourself (continued)
Web Page Design - Some Considerations


Keep It Simple

Many websites appear to be more a display of the technical prowess of their creators than helpful sources of information. Of course web pages need to have visual interest and graphics can aid understanding. There is a balance to be struck. Graphics and special effects should be used to aid the message, not allowed to become an end in themselves. Too many gimmicks and tricks can be a real turn off, standing in the way of making information quickly accessible and easily understandable. For a model of simplicity and clarity see the Home page of google.com, one of the most popular and easy to use search sites.

Substance, Not Spin

Have you got some good solid information you want to make available, or a real message? Even if you have ideas for something of substance to put on your site, writing good web page copy is time consuming and hard work. Writing text for a web page is quite different from writing a letter, a report, or an essay. It needs to catch the eye and maintain the reader's interest. Usually it should be concise but not at the expense of its meaning being clear and unambiguous. Try to put yourself in the place of the visitor to your site - viewing your pearls of wisdom on the restricted viewing area of a VDU and perhaps not (yet) sharing your enthusiasm for the subject.

Presentation is important for credibility and clarity. Use appropriate graphics to support the text and to project the image you want.

Navigation

Ease of navigation is important for any site with more than one or two pages. Visitors to your site should be able to find quickly what pages are on your site and how to get to the ones which interest them. It is in your own interest to make it easy for people to find their way around and not get lost. A good site map near the start of your Home page is helpful. Where appropriate provide suitable links to related pages on your site, and links back to your Home page or site map. Not all professional web page designers give as much thought to navigation as they should. For some ideas look at the navigational links in the Churches or Paxman section of this site. They rely on simple HTML tags - no Javascript or anything more involved.

Page Size

Generally it is worth trying to keep each page relatively short (a rule I frequently break). A long page involves a lot of scrolling for the visitor to your site. Sometimes a long article is all of a piece and needs to be kept together on one page. In such cases provide links so that people can jump to places on the page which particularly interest them. Also think about providing links back to an index at the top. To see an example look at the main page of this section webstuff.htm.

Graphics

Most web pages benefit from some graphics. They are easy to add but it is worth bearing in mind the maxim 'moderation in all things'. Too many graphics can make a site confusing. Also, graphics files tend to be relatively large, making pages slower to download - sometimes much slower. If your pages take too long to download people will give up and go to another site. They are unlikely to come back.

Keep graphics files as small as possible. For graphics other than photos a GIF image is usually the best option. BMP files can be enormous and need to be converted to GIFs or JPEGs. JPEGS, used for photos, can be saved at various levels of compression. Many images can be compressed by 50% or more with little discernable loss of quality on browsers. There are web sites where you can compress your images, particularly GIFs, free of charge. Browsers can only display at 72 dpi (Macs at 96 dpi) so there is no point in saving images at higher resolutions which involve larger files.

Frames

Frames are quite a popular tool for keeping certain pieces of information on screen while people go to other pages on the site. Unfortunately they tend to clutter up the screen, especially for someone using a screen size of 640 x 480.

Another drawback is that frames can get in the way of search engines trawling for the information held on your site. If search engines can't sift your information, however good and relevant it is, your site won't come up when someone does a search. Some search engines can now follow frames although anyone following a link from a search engine listing will find the individual pages are effectively orphaned unless each has a link back to the home page or its parent frameset. Use the <NOFRAMES> section to hold a link to a site map so all the search engines can index your site.

Generally I would suggest you avoid using frames and find alternative ways to achieve your objectives. There are ways round most things in computing.

Tables

Tables can be quite hard work but they can also be very useful. They are widely used for laying out web pages as well as displaying information in tabular format. It is worth making the effort to find out how to use them.

A few words of caution about using tables:

Other People's Browsers

The page you have so carefully created on your computer may display very differently on someone else's machine. There can be many reasons for this. The other person may have their browser set to use a different text size (see View > Text Size options in MS Internet Explorer). They may be working with a screen size of 800 x 600 while yours is set to 1024 x 768 or vice-versa. Before uploading onto the server, view your pages at different resolutions - go to your desktop, right click on your mouse, select Properties > Settings and try different screen settings.

Older browsers may not be able to interpret some of the tags you use. Some features which are supported by Explorer are not supported, or are implemented differently, by Netscape and vice-versa.

You may use an unusual font on your machine which looks just great on your web page. If that font is not installed on the computer used by a visitor to your site, the typeface will not be displayed. Their browser will use a default font and what they see will not be what you intended. If you are very keen to use a specific font for a short piece of text, such as your logo or for a special title, consider saving the piece of text as a GIF image and displaying the image on your page.

You need to work your way round these various wrinkles. Jennifer Niederst's book is a useful guide to some of these restrictions and strategies for avoiding them.

Getting Your Site Known

It's a bit ironic but to get your site known you have to rely to a large extent on old technologies. You will need to tell people your website address which you can do by word of mouth to friends, acquaintances and colleagues, putting it on letterheads and compliments slips etc., in magazine articles, press advertising, and so on. There is no cheap and easy way of doing it on the web itself as many dot.com startups have found to their cost. If people don't know the address of your site, the likelihood of them stumbling upon it by chance is minimal.

You can make yourself more accessible on the web by submitting your website address to search sites. Many search engines now charge for sites to be considered for inclusion in their databases although some major ones, like the Open Directory Project (www.dmoz.org) and google.com are still free. The prospects of appearing in search engine hits are improved by having a good descriptive title for your page, especially the index page. The title can be up to 64 characters in length (including spaces) and should use the most relevant words for the page's content. Also include META tags in the HEAD section of your page. The two main META tags to use are <META name="description" content="text of description - keep to no more than 20 or 25 words"> and <META name="keywords" content="list of key words in your page - they need not be comma de-limited">. Keep your keywords specific to the content of the site. Use synonyms rather than repeating the same keyword too often. Imagine what words or phrases people might try searching on if they were looking for the information available on your site. And something I hadn't thought of - avoid words that have 'Adult' connotations. e.g. use 'gender' instead of 'sex'. A site map with text (rather than image) links to other pages on your site, placed near the top of the page, is also helpful in achieving better search rankings.

Getting other sites to link to you is an important way to gain new visitors. Find sites similar to yours, write to the webmaster and suggest you exchange links between you.

Contact Page

Having attracted people to your site you will normally want to provide some convenient means for them to contact you.

Apart from putting your email address in a prominent position, a quick and simple way is to put a 'mailto' link on one of your pages, like this:
<A HREF="mailto:yourname@youremailaddress">e-mail me</A>.
Anyone wishing to contact you only needs to click on the link and their email application will open up with your email address already in the appropriate box. To make it more difficult for spammers to harvest your email address it has been suggested (thanks Patrick Whittick) you replace the @ in your email address with its HTML character entity - &#064; - so that the address becomes yourname&#064;youremailaddress.

Another possibility is to create a contact page like the one on this site, if the required cgi scripting is supported by your Internet Service Provider. To see what the page might look like, look at the Contact Page on this site. The format makes it very simple for people to leave messages and I find it well used by visitors to this site. A nice refinement is to have a 'response page' which appears on someone's browser as soon as they have sent you a message. To see what I mean look at response.htm. You will need to put the address of your own response page into the script of your contact page.

Testing

By the time you're finished building your site you will know it well. Possibly too well and you will find it's easy to miss something obvious. Check each and every link. Where you use an image put some ALT text in the tag so that browsers which don't display images can show some explanatory text. Rest your mouse over every image to check the ALT text is alright.

Sometimes I find it helpful to do a printout of my HTML text and go over it carefully with a fine red pen to check that all the necessary tags are present, that all necessary closing tags have been included, and that tags are properly nested - <B><I>like this</I></B> and <B><I>NOT this</B></I>. Test, test then test again, particularly if it is a long or complex page. Leave it for a while then test again. Post your site to your webspace, clear your browser's cache then test test and test again.

Disclaimer

Sadly we live in a litigious age. It is a sensible precaution, therefore, to add to your site a suitably worded disclaimer of legal liability. A Disclaimer in itself is no guarantee of immunity and depending on the nature of your site it could be wise to seek legal advice on the precise wording. One of the consolations of being poor is that the litigious tend only to pursue those who have sufficient money to make it worth their while!

Acknowledgement

My thanks to Ian Simpson who read the original draft for this page and offered many useful suggestions which have been incorporated. If you don't like, or disagree with, any of the above then blame me, not him, but in any case my website disclaimer applies!   :-)

up button   top


Page updated: 03 MAY 2008