|Home||Pauline's Pages||Howto Articles||Uniquely NZ||Small Firms||Search|
|The Secrets of Successful Web Site Design|
It is my belief that the Priorities in designing a site are to:
Search Engines and Directories are a therefore a critical factor which must be taken into account in the design of a web site for a Small Business. This is cover much more fully in the Search Engines and Directories page in this series which covers how to optimise the design of the site so it will be found and ranked highly by all the most important Search Engines and Directories. It is essential reading before you start even the outline design.
Many people however feel that it is essential to have a lot of flashy graphics to interest a browser but my prejudices seem to have been confirmed by the results of recent research by Stanford University and The Poynter Institute. The Stanford-Poynter Eyetracking Study has revealed that text may be a more immediate entry point than images. The study looked at on-line news sites and summarises that "overall, during the entire on-line reading session, graphics and photos did less well than text. Of all graphics, aside from banner ads and photos, available to a subject throughout a session, only 22 percent were looked at. Banner ads, which were broken out separately from other graphics, did somewhat better: 45 percent were looked at. And photos did best: 64 percent were looked at. These figures did not stack up at all well against briefs and text articles, which were looked at 82 and 92 percent of the time, respectively."
The lesson is clear, have good text near the top of your pages to attract the visitor, restrict your graphics to high quality pictures and avoid banner ads which will only distract from your message. Text displays first in the Browser and with the average dwell time of a surfer being only about ten seconds they only have time to read your best 50 - 80 words during which your graphics can be downloaded to build interest. The Heading of the page should stand out and immediately tell the visitor he has reached the destination he was looking for. This all matches well with the way Search Engines work and in many ways a Search Engine friendly site is also a user friendly site.
A good check of text, whether for the Internet or a document is to read it aloud - if it is easy to read out it will be easily assimilated and without ambiguity and reading helps show up the need for punctuation and reveals bad grammar. Try it out on all sorts of people, it is best if a school child or a Minister can get appreciate Message, they are rather similar. A good web page is a bit like a short presentation - you start by telling people what it is about and what you will cover, you make your points and you briefly summarise again at the end - the difference is that you can not answer questions but must provide a natural link or links for them to follow.
Browsers: The majority of visitors will be using various versions of Internet Explorer and Netscape Navigator. Both have gone through a number of generations and have progressively supported more and more HTML features and proprietary extensions some of which have been incorporated into the HTML standards. HTML has also gone through considerable development in the last few years. Java is another story as the various browsers implement Java in different ways and you will find that some complex sites actually carry out checks in Java to find which browser is in use and use different pages. There are a number of ways of checking that your site will be correctly displayed, the simplest being to have both Internet Explorer and Netscape Navigator installed. This does not help for visitors with earlier versions and the best thing to do is to make use of one of the various sets of free services to check sites which are available on the web.
Utilities for checking Browser compatibility: The most useful general set of utilities I have found are those of Netmechanic - they can be accessed at http://www.netmechanic.com. These include Browser Compatibility checks and HTML checks where you can chose the version to check again. The also provide a Search Engine submission to 12 popular engines and a number of other Utilities including estimates of download times. The more complex tasks are done off-line and when they are complete you are notified by an email which provides a web page address linking to the results which are held for 2 days. Another very useful utility takes a .jpg file and shows you what happens if you reduce the memory size - each reduction swops back and forth to the original when you move the cursor over it so you can accurately choose how much degradation you can tolerate.
Screen resolution Screen resolutions vary widely - visitors with laptops and older machines may still be using 640x480 whilst the latest 19 inch screens may be using 1280x1024 or even higher. Most people however use 800x600 with use of 1024x768 now increasing. I believe that one must design for at least a range of 640x480 to 1024x768 without use of scroll bars or waste of screen space. See the last section for figures on Screen resolution etc for visitors to our own site. The use of Tables allows the display to adapt easily and the text to wrap to such a range without too much problem provided the nominal size of text is used by the visitor. If the screen size and resolution is greater than 1024x768 the chances are that the user will not be working full screen but within a Window. It is easy to check how the site displays by changing the screen resolution on ones machine to various values and displaying the site within a window and varying the size to see how it scales. This is easily seen in part 2 of this article using the demonstration template with the borders of the Tables displayed. it is worth trying this on some of the commercial sites - you will find many of them are extremely inflexible and are virtually impossible to use on a 640x480 screen and waste space on anything over 800x640.
HTML was designed to allow the user to determine how content was displayed, quite unlike normal publishing, because of the variety of equipment available for display - many modern packages and authors conveniently try to forget this and you will give a much better impression and increase business if you take the customer into account.
Colour depth Again this varies considerably from machine to machine. You are unlikely to have many visitors these days with monochrome displays but many laptops and older machines will still be using 256 colour depth. At the other end many modern machines will be using 16, 24 or 32 bit colour depth. The big change is from 256 to 16 bit (65K) colours. You should check what your site looks like in 256 colour depth by adjusting your display properties and you may well find that backgrounds and images look very different to what you expect and even ordinary text and backgrounds will look odd. There is a set of colours which are supposed to display the same in all Browsers at 256 and upwards colour depth and it is worth using them where possible. Colours still tend to be specified in Hexadecimal and the set is #xxyyzz where xx etc have the values 00, 33, 66, 99, cc and ff giving 216 discrete values. Many web editors allow you to pick them using a colour palette. There is little you can do about pictures other than look to see the effects. GIFs will be little effected since they only have 256 colour depth in any case but JPGs will often look very odd in 256 colour depth so it is best not to depend on them alone to convey any important message.
Java Most modern browsers support Java however there are security risk associated with Java and many users turn it off through choice or have it disable as a policy at work and on business machines. HTML has the facility to detect if Java is enabled and JAVA and NOJAVA tags should be used. It is best to restrict the use of JAVA to where it is essential especially as different Browsers have subtle differences in implementation.
Frames Frames are disliked by most users despite their being widely used. Some older browsers no not implement them which is yet another reason to restrict their use. HTML can again respond to their presence and one should make use of the FRAMES and NOFRAMES tags if one has to use Frames. If one does want to use frames various techniques can be used to make sure that Search Engines and Bookmarks end up pointing to an acceptable place.
An excellent site to get further information on how to use Frames correctly is http://www.gooddocuments.com - a site run by Dan Bricklin (who was one of the writers of the first spreadsheet Visicalc) on good writing for the web.
The conventional places to set up Navigation Links are across the top, often now as a set of tabs, as a list on the left and as a list on the right. There are usually duplicates of important links across the Bottom. For business sites I favour my main Links at the Top left with secondary level links on the Right. This avoids them being found by Search Engines before the main text. I keep the Left hand list identical on the sub pages with the page in use being grayed out so the visitor always knows where they are. Second level down pages do the same using links on the Right. I currently have a set of links across the Top of my own site providing navigation to the main sections although this gives problems with Search Engines - there is a case for using graphics if you have navigation at the top which aids the appearance of tabs, a well understood icon giving good "affordance" to use the jargon of the trade. Once the
Forms are not very popular - I certainly prefer to use email which I can produce visitors and at my leisure. They are however essential if you want to take on-line orders or deposits as they provide a secure way of communication. See the page on Secure Transactions - SSL and all that and HTML Forms - my guide to adding Forms to your web site for enquiries, orders etc.
Peter and Pauline Curtis
Most recent significant revision: 7th April, 2010