Coly Computer Help



GOOD 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. A reasonable price would be between £40 and £150 per page. 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 do not bother to keep up with technical advances 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 the latest 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.

Check up on the website designer. Anyone can check whether a prospective web designer is an affordable expert or an expensive amateur. Ask the prospective designer for the web address of his latest production. 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, 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 'keywords' should also contain  variations of the same words or phrases.
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:-Good website design, choosing a website designer, website design.

If sensible and closely related key words are not listed, or if the list consists of dissimilar words, then the web designer has not optimised the website so that search engines will find it. (Bing, 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. Search engines cannot get past a Javascript 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.

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? Navigating to other pages must be obvious without having to click and search drop down menus?
NOTE: Javascript is not a problem when used for a page printer or to encode an email address to prevent spam. Those Javascripts do not prevent search engines from exploring your website

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="template.css" />.
If there is no <link tag pointing to a .css file,  it means that the web designer is not using external CSS (cascading style sheets which became standard in 1998). Do not employ a web designer who is using a twelve year old technique. His page of gobbledegook will be full of obsolete terms such as <font>, </font>, <center>, </center>, <table>, <frame>. Those tags should not be present in a modern website.

4. Can you see several tags like this? <style></style>
An occasional <style></style> tag is permissible but not more than one or two per page. If you can see a <style> tag in the <head>...</head> section, 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 head section of a page is fine if that page is the only page that uses that particular style.

5. Move down a little way through the gobbledegook to see if there is a <table> tag. Tables should not be used to layout a page. It is acceptable to use a table to contain data. If there is a table tag, you may see the word width somewhere after the <table tag. The 'width' should not be present. The width should will be set using an external CSS (as on this website). A typical old fashioned table tag looks something like this.
<table border="0" bground="#000000" cellpadding="0" cellspacing="0" height="80" width="780".
The modern correct version should not have all the formatting information such as height, width, border, cellspacing and bground

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 with max and min limits that look good on most screens.

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, Safari and Opera 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 10% of 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. Make sure the designer knows how to add a filter to the form handler to block spammers from using your form.

If you are marketing something, contact details should always include a telephone number, an address, and an email address. Web sites for charities must 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 'title' tags to all pictures so that a brief explanation pops up when the cursor rests on a picture. Ask him or her to add title tags to all menu items. 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. The 'alt' and 'title' tags cause the computer to speak out descriptions for partially sighted persons. These can only be heard if the computer is set up to read out the 'alt' and 'title' descriptions.

Avoid frames,  frames will not allow search engines to find the pages on your site. Frames are no longer acceptable to the World Wide Web Consortium (W3C).

Ensure that your web designer does not use a CMS (content management system). These are the Paint-by-numbers kits of the world of websites design. Because they claim that you don’t need to learn HTML you could do the work yourself without paying a designer. Or if you can't be bothered, you could ask your children, or a friend to fill in the blanks for you for free.

All CMS sites load an enormous amount of baggage into the root folder of your host; this may swallow up most of your available hosting capacity. For example, a basic five page website using HTML4 and CSS2 resulted in two folders and six files. Using a CMS package for the same website resulted in 17 folders with an average of 30 files in each, ten PHP files and several additional files for administering the website.

If you need to move a CMS site to another webmaster, you may have difficulty in finding someone willing to take on the learning curve necessary to grapple with the complexities of fine tuning a CMS website. Should the new web designer wish to fine-tune a CMS website they will eventually need to use HTML, Javascript and PHP.

Some typical Content Management Service (CMS): Joomla, TextPattern, Wordpress and CMS Made Simple.

Websites that can be designed on-line can be even more restrictive. These are mainly Javascript based, resulting in even less control. On-line methods and CMS sites also use Javascript navigation menus that prevent search engines from probing past the home page.

Some unscrupulous web designers will take advantage of your lack of experience. They will not give you true ownership of the website and may even lock you into an expensive contract for maintenance of the website.

Ensure that you are the true owner of the website, insist on receiving full details for managing the website. Then, if you wish to change to another webmaster, a copy of the details can be handed over to him or her. Make sure you have a pay-as-you-go maintenance deal and do not agree to an annual fee. With an annual fee you will be charged even though you make no changes to the website.

Hosting charges: You will have to pay the hosting organisation an annual fee and also you need to pay to renew your domain name. You will receive an email from the host when the hosting fee is due for renewal.

 

Go to top of page Go to top of page

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

Practical HTML5 ProjectsMy new book on web design is now available from Amazon
Click this address:
www.amazon.co.uk to go directly to the book.

A must for busy web designers

130 downloadable templates written in HTML5

 

 

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 her 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). A children's web site should have even narrower columns.

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 New 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.

Small 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 for fonts less than 14 point. Italic should be reserved for book titles, or similar short items.

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 liquid which means they grow or shrink to match the screen size and resolution. A good web designer will test his product to ensure that it looks good with several screen sizes.
A lazy designer will design for 800 x 780 only; the pages will then look very tiny on bigger screens.

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 can 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. This should not be on the home page, even so, such a picture must not be flashy, 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.  Do not use pictures for a menu because the navigation then needs to be explained,  i.e., you need to tell people to click the picture for more information. Search engines are not entirely happy about pictures for links. Visitors expect a straightforward horizontal or vertical menu (this website uses a consistent horizontal menu bar at the top of each page).

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 even on dial-up.

A clean fast loading design

This design loads in 10 seconds even 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 10% of 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 very pale pastel background picture, otherwise it will  make your text difficult to read.
Using a plain pastel 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 or the more advanced XHTML code.

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. If you click the seal to see if it is genuine. Some designers cheat and put the W3C seal on a page when the page is not validated by W3C. To see if the designer is cheating, click the W3C seal, a W3C page will appear and it will state whether the page is validated or not. However, some experts do not bother to have their pages checked by W3C.

In this case, you can still check whether the design is to an acceptable standard.  Make a note of the websites web address (the one you are viewing right now is http://www.colycomputerhelp.co.uk)  go to the W3C validator at http://validator.w3.org then enter the website's address and press the Check button.

NOTE: The seal of approval does NOT relate to the visual aspect of the design.

   Valid XHTML 1.0 Transitional  Valid CSS!
Code and style sheet validated by
the World Wide Web Consortium

The left hand blue seal above shows that the page you are now reading has been validated by the World Wide Web Consortium (W3C). That organisation is responsible for setting the official standards for correct web design. The logo on the right shows that the style sheet for this website has also been validated.

Web designers can cheat by adding the W3C logo to a non-validated page. However, you can check for genuine validation by clicking the W3C logo.

A M Web Design   click here for latest information
Adrian West © 2007 computer help, computer problems solved

Jargon    Troubleshoot    How To...    About this site     Suggestion    Donation    Home Page