Coly Computer Help

 
Jargon Trouble Shoot How To... About this site Send Content Suggestion Donation Home

BASIC WEB DESIGN
 
Choosing a website designerChoosing a website designer: Shop around and get three quotes. Recently a town council in the south west was prepared to pay £27,000 for a website that should have cost less than 8% of that amount.

Price is no guide to quality. Some expensive web designers have never progressed beyond a basic technique. Poor designers trade on their customer's lack of knowledge. Like all computer technology, web design technique changes rapidly. Webmasters who don't bother to keep up with technical advances will produce unacceptable websites which won't work in the future.

Some web designers are technically expert but poor on presentation. Others may be good on presentation but they lack up to date knowledge on the technical aspect of web design. You can test a designer for presentation skills by using the guidelines in the right hand column of this page.

If a web page has the official seal of approval by the World Wide Web Consortium (W3C), you can be sure the designer is an expert. The seal can be yellow or blue. The page you are reading now has been approved and the seal is at the bottom right of the page. However, some experts don't bother to have their pages checked. The seal of approval does not relate to the visual aspect of the design.

Check up on the website designer. Anyone can check whether a prospective web designer is an affordable expert or an expensive amateurAsk the prospective designer for the web address of his latest production. The websites should have more than 6 pages for this test. Print the page you are looking at now and have it by you ready for the next step. View the web designer’s latest website in Internet Explorer or Mozilla. Click View, then click Source on the top menu (for practice, try this now on this page), some gobbledygook will appear. Don’t let this deter you as the next step is simple.

1. Look at the top few lines of gobbledegook between the <head></head> tags. (A tag is a word enclosed by pointy brackets). The <title> tag should be followed by several similar closely related words or phrases that surfers would use to find the website, the "description " and the "keywords" should contain lists of the same words.
If you use View-->Source on my website (which you are now looking at), you will see a list of similar and closely related words, for instance:-Computer help, computer problems solved, computer, help, problem, improve your computer skills, computer, help, improve your computer skills, problems, skills

If sensible and closely related key words are not listed, or if a list of dissimilar words is listed, then the web designer has not optimised  the website so that search engines will find it. (Google and Yahoo are search engines).

2. Look again at the top few lines of gobbledegook between the <head></head> tags. Can you see the word javascript?. If you can, there is a problem if it relates to the menu. Javascript menus may have drop-down sub-menus when you click an item. Other javascript menus have rollover button menus, i.e., they change colour or glow when the cursor is on them. The menu bar on this colycomputerhelp website changes colour but it does not use javascript to do this.

Javascript menus are bad for search engines because the engines cannot get past the javascript to scan the other pages on the website. You will never achieve a high search ranking if you use javascript menus. A second problem exists with javascript menus; some people turn off javascript, which means those people can never get past the home page. The third problem with Javascript drop down menus is that they are not 'user friendly' compared with a straightforward menu. Why force the surfer to click and search for what should be clearly shown without having to click and search?
NOTE: javascript is not a problem when used for a page printer or to encode an email address to prevent spam. The javascript on this page operates the button for printing the page.

3. Look again at the top few lines of gobbledegook between the <head></head> tags. Can you see a tag like this <link ? On the website you are now looking at, it looks like this:-
        <link rel="stylesheet" type="text/css" href="style2.css">
If there is no <link tag,  it means that the web designer is not using external CSS (cascading style sheets) which became standard in 1998. Don't employ a web designer who is using a ten year old technique. His page of gobbledegook will be full of obsolete terms such as <font, </font>, <center>, </center> <style></style>. Those tags should not be present in a modern website.

4. Can you see several tags like this? <style></style>
If you can, the web designer has completely missed the point regarding CSS (cascading style sheets). The style details are supposed to be in a separate css file which is external to the web pages. This rule has been in place since 1998. Putting the style details within the pages is bad practice and an utter waste of a very valuable tool.

5. Move down a little way through the gobbledegook to see if there is a <table tag.  If there is a table tag , you may see the word width somewhere after the <table tag. The 'width' should not be present in most tables, the width will be set using an external CSS (as on this website). A typical old fashioned table tag looks something like this if the designer does not use CSS.
<table border="0" cellpadding="0" cellspacing="0" height="80" width="780".
The modern correct version should just read <table> and all the formatting information must be in the external style sheet..

6. Screen size: Notice the width item in the above example. The designer has failed to noticed that screen sizes and resolutions have increased over the past 6 years. A size of 780 pixels is too small for today's screens. Because of the great variety of screen sizes, most expert designers now use 'liquid' screen sizes which fit any screen.

7. As time goes by, <table tags will also disappear, but as the external CSS code for tables is rather complex , the use of  HTML table tags is currently acceptable. This gives time for web designers to learn how to create tables using external style sheets.

Some web designers are technically expert but poor on presentation. Avoid a designer (i) who uses fifteen words where five will do (ii) who uses tiny fonts such as 8 point for the main text (iii) who fills the page with clutter rather than using good clean design, (iv) who uses dark sinister colours instead of pastel shades (v) who does not test the website in Mozilla Firefox as well as in Internet Explorer. (vi) whose pages take ages to download on a dial-up connection [15 seconds on dial-up is the maximum to aim for as almost half the internet users in UK are on dial-up]. When pages are slow loading, it means it has too many pictures, or the pictures have not been compressed 

If you are selling something, make sure the designer knows how to add PayPal and debit/credit card facilities to your website.

Does the prospective designer know how to add contact forms to your website? The website you are viewing right now has a contact form, click Send Content Suggestion on the top menu to see a typical form. If you are marketing something, contact details should always include a telephone number, an address, and an email address. Web sites for charities should state the registered charity number.

Spam prevention: Does the web designer know how to encode your email address to prevent spam? The best solution is to have a picture for the email address, its hyperlink must then be encoded with javascript, otherwise you will be inundated with spam.

Ask the web designer to add 'alt' and/or 'title' tags to all the menu buttons and pictures so that a brief explanation pops up when the cursor rests on a menu button or picture. These have been mandatory for a long while now, but new web sites are still being launched without them. Test your site for this by resting the cursor on pictures and on menu items.

Avoid frames unless you have a unique subject. For instance, if you sell toys, because toys are not unique, frames would not allow search engines to find your site. If your website is about underwater basket weaving or a town with a unique name, then you could get away with frames. Frames prevent search engines from getting past your homepage, also frames are no longer acceptable to the World Wide Web Consortium (W3C).

Go to top of page Go to top of page

 

Website Design: Detailed instructions for web design would fill several websites, therefore this article covers only the basic principles governing a good website.

The secret of a good website is to condense the text on every page to an absolute minimum.
Then condense it again.
Then sleep on it and condense it again.

Verbose text may be acceptable in a newspaper or brochure, but lots of text will kill a website, especially if it is on the home page. Tests have shown repeatedly that when presented with a lot of text, the surfer will switch to another website, this is because text on a screen is more tiring to read than text on a printed page. Surfers soon become bored and they switch to something more interesting. Surfers do not go to the web for a read, they surf to find information quickly.

The website you are looking at right now is an exception, people accessing this site want detailed step by step instruction to solve a computer problem. Technical information cannot be condensed without omitting vital steps in the instructions. All other types of information can (and must) be condensed.

Never spread text right across a page. When the eye has reached the end of a long line of type, the surfer turns his head back to the beginning of the line and is usually lost (and gives up the struggle). Instead always use two columns. The accepted maximum width of a column is 5.25 inches (133mm).

Small fonts are not user friendly. The text in the main body should never be smaller than 12pt for Times New Roman and never less than 10pt for Arial or Verdana. Nobody will bother to fetch a magnifying glass to peer at a website set in 8pt.

Use no more than two fonts on a page. Arial and Verdana are the preferred sans serif fonts as they were designed for easy reading on websites. Times Roman is the best serif font because it was specifically designed and tested for good readability.

That very important home page. Lots of information on the home page is bad. It makes subsequent pages redundant. Stimulate the surfer's curiosity on the home page. This is easily done by revealing just enough and no more, this arouses curiosity. To satisfy that curiosity, the home page must have a simple obvious way of navigating to the other pages, i.e., a clear, self explanatory menu.

Text should also be split into bite size chunks and if possible  interspersed with small pictures. Selling points are best highlighted by bullets. Once surfers have located a site which instantly seems to offer what they are looking for, they will be eager to explore more pages. Finally, when they are hooked, they will want to know more about the people offering the product (the ‘About Us’ page is usually the last to be visited).

Do not use justified paragraphs. Justified text is a killer and must be avoided at all costs. This is easily explained as the brain has to struggle to overcome the wild variation in gaps between the words. Also, justified text looks boring compared with the liveliness of ragged right text. Compare the two styles in magazines to see how interesting the ragged right style looks.

Italic fonts never look good on a website; italic appears on a computer screen as a series of what typographical designers call jaggies. The text has a rough saw tooth appearance, therefore italics should be avoided.

Screen size: Websites were designed many years ago to suit 800 x 600 pixel screens. As screens get steadily bigger, websites are designed for 1024 x 780 or better still, they are elastic/liquid which means they grow or shrink to match the screen size and resolution.

Choose colours carefully. The best colour scheme for clarity and ease of reading is black text on a white background. Backgrounds of pale pastel colours create calm, the surfer will linger longer on a calm website. Sharp colours like bright red or yellow are irritating. Dark colours give a sinister effect that will put most people off.

Avoid animation, i.e., scrolling text and anything which moves. Such gimmicks are the best way to drive people away from your website. They also become the main focus of attention so that other items on the page are ignored. The only exception would be a moving picture which shows how something works, even so, such a picture must not flash on and off, and it must have a limited number of cycles, say between 5 and 10.

White space is essential. Poor designers feel tempted to fill every available area of a page. White space focuses the attention on the essentials. White space means space with no text or pictures, if you have a pale turquoise background like this website, then the space will be pale turquoise, but it is still classed as white space. A cluttered page is a complete turn off.

The navigation system (the menu) must be crystal clear. Non-pictorial buttons with words on them make the best menus. Pictorial menu buttons without descriptions will baffle surfers and turn them away from your website.  Don't use pictures for a menu because navigation then needs to be explained i.e. you need to tell people to click the picture for more information. Visitors expect a straightforward horizontal or vertical menu (this website uses a consistent horizontal menu bar at the top of each page). Search engines are not happy about pictures for links.

To decide what to put on the menu ask yourself what the surfer might want to learn from your website. Better still, ask other people what information they wish to find on your website.
For example, a bed and breakfast website would have menu items such as location, accommodation details, prices, contact details, and an enquiry/booking form.

Examples of good clean design

A clean design with clear navigation buttons
A clean design with a clear friendly menu.
It loads in 3 to 5 seconds on dial-up.

A clean fast loading design
This design loads in 10 seconds on a dial-up connection.
It has 13 menu items with nothing hidden behind an un-friendly javascript drop-down menu.

Ensure that your website loads quickly. A slow loading page will cause the surfer to switch to another website. Almost half the surfers in UK are still on dial-up and may remain on dial-up for a few years. For fast loading, use the minimum of pictures, reduce their dimensions, and compress them. If you intend to use a background picture, optimise it or it will cause slow loading. Choose a feint pastel background picture, otherwise it will  make your text difficult to read.
Using a plain background colour is no problem.

Do not use Microsoft Word to produce a website as it manufactures an enormous quantity of complicated and unnecessary HTML code. A page produced in Word can contain ten times as much code as a page written in proper HTML code.

 Valid HTML 4.01 Transitional

A. West web design

The yellow seal above shows that this page has been validated by the World Wide Web Consortium (W3C). That organisation is responsible for setting the official standards for web design. 

Web designers cannot cheat the system by adding the W3C logo to a non-validated page. Visitors can check for genuine  validation by clicking the logo.

Adrian West © 2007 computer help, problems solved