Consultancy Services available from PCurtis.Com

Secrets of Successful Web Site Design - part 2

		The "Secrets of successful web site design" covers the strategy and techniques required for creating a small business site with impact. The first part analyses and prioritises the factors which have to be considered when designing a site, and provides guidelines and tips to help the design process. This, the second part, leads one through implementing a successful web site by example - it employs a "template" with a detailed discussion of the rationale for every component.
	home Introduction Head Body Heading The Message Navigation Main Text Footer

Introduction

In the last part we took a detailed look at some of the most important factors which need to be taken into account in designing a successful web site. I will reiterate for completeness.

The Priorities in Designing a Web Site are to:

Get visitors (ie Search Engine considerations at the top of agenda)
Keep visitors (Content is King, Speed of site, Appearance of site)
Get The Message across (First words and paragraphs critical on each page)
Make sure it can be viewed on all systems (Browsers, screen resolution and colour depth are most important)
Allow visitors to easily and quickly reach what they need (intuitive and consistent navigation)
Help them return (Make sure site pages can be bookmarked ie avoid frames)
Make sure that contact information, maps etc can be printed (predominantly black on white text)
Provide a way(s) for them to communicate (Forms, email, phone, fax etc)
Have a way to assess effectiveness (Intelligent Counters and/or log files)

I will now look at what this means in detail for the the design of the site. I will concentrate on the entry or home page but most of the points are also relevant to lower level pages. I have put together a "Template" for a simple business site which shows ways of taking the first 7 points into consideration. There are separate pages specifically covering Forms, which are at a lower level, and Counters. The Navigation Links at the left enable you to reach the major sections of the Source Code and match both the main HTML sections and the main contents
The Template makes extensive use of Tables to maintain an attractive layout as screen sizes change and the borders are deliberately shown so you can see the effects of increasing the size of the viewing Window. It is worth opening it now - the Template will open in a separate Window which you can bring back to the foreground as you work through the description which follows. Open Template Window.
New Windows are themselves a useful tool in designing a Web Site as your visitors do not get lost when following links - the disadvantage is that the size can not be specified and they quickly get hidden behind the main Window if implemented in HTML. I will cover in a future article how to use a bit of additional Javascript to enable the size to be specified and the Window made more accessible -this is particularly useful for enlarging images. I am not in favour of too much Javascript but it does have some uses!
The HEAD - TITLE and META tags
<HTML>
Starts the HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
This line is not essential and is seen as a comment by almost everything other than some automatic syntax checkers for HTML. It specifies that tags up to HTML 4.0 Transitional should be accepted - in practice a subset have been used so all 3rd or higher generation Browsers should display everything.
<HEAD>
Starts the HEAD block where the TITLE and all the META Tags live
<TITLE>Secrets of successful web site design</TITLE>
This is one of the most important lines of all - this is not only what is displayed in the title line of the Browser but is also used by all Search Engines and has the most highly ranked words in most. It is also displayed in the results of all major Search Engines. It should be about 6 words and contain the official name of a business
<META NAME="description" CONTENT="strategy and techniques for creating a small business site with impact and tips on making sites easily found and user friendly.">
This is also very important as it is displayed by many of the search engines and the words contained in the description are also highly ranked by almost every Search Engine. Keep it short as it will be truncated at only 150 characters in some Search Engine displays of results and make sure your important key words are at the beginning. Avoid repeating the Title as both will be displayed.
<META NAME="keywords" CONTENT="web site design, HTML authoring, small businesses, small firms, webmaster">
The last of the important META statements. This allows one to specify extra key words to most Search Engines. It should be less than 1000 characters long and it is worth having some phrases
<META NAME="resource-type" CONTENT="document">
<META NAME="author" CONTENT="Peter Curtis">
<META NAME="distribution" CONTENT="Global">
There are a lot more META Tags which you can put in your template none are very important although Search Engines and Directories may start to use them. I tend to leave them out other than an author or copyright. There are also Meta Tags which specify how a page is indexed to allow you to prevent links being followed or to leave pages out completely which may be useful when you are developing a new section.
</HEAD>
Completes the HEAD block

The BODY - Backgrounds, Text and Link Colours
<BODY BACKGROUND="gallery/marble.jpg" TEXT="#000000" LINK="#0000FF" VLINK="#0080FF" ALINK="#0000FF" >
The start of the BODY of the HTML and where you can suggest the colours of the TEXT, LINKs, Visited LINKs, Active LINKs and a BACKGROUND image which has to be small (to be fast) and capable of being "tiled". It is often better to use a BGCOLOR tag instead which specifies a BackGround COLOR. Most Browsers allow the visitor to specify their own colours and override your suggestions so it is safest to use a light background and dark text everywhere and sensible colours for links otherwise it is possible for text to be unreadable. You should also specify all or none. Use Black "#ffffff" for the text on any pages which are going to be printed. It is worth specifying the other colours as it will help brand your site to most visitors who will not mess around with their browsers!

Layout for the Heading and Logos
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" >
This is where it gets interesting and where some of the big secrets appear. We want to be able to lay out the page in a way that Search Engines can find and extract the important information - description and keywords (several times) and in a way that attracts and holds the visitor. Frames are disliked by visitors and not handled well by Search Engines so they are out which means we use tables - they are fast to render and adapt well to different screen sizes. Much of this page is about getting the best from the simple old table - it is not magic and once you have seen how it is done here you will be able to make the same use in other parts of the site
I will first look at what seems very simple - how to display the Heading for the page with a Logo in a way that will adapt to different sizes of Browser Window. If you do not need a Logo or background you could just display a Heading but most small firms will have a logo and want to use it somewhere! We will use a table which is only one row deep but with five columns providing 5 cells. We want it to be the width of the page hence the width="100%" attribute. I do not want to waste width in the cells so the cellspacing and cellpadding attributes are set to 0 (note you need a number inside double quotes to be sure all browsers handle them correctly)
<TR>
Defines the start of the first (and only) Row and this time no attributes are needed
<TD WIDTH="2%">  </TD>
The first and last cells has a width="2%" which provides a margin which is soft in that browsers will use less than the 2% if it is a small screen and cells with images or text need the space. You must have something in the cell and the NoBreakSPace (   ) is is ideal for an empty cell.
<TD WIDTH="18%">
The second cell contains the Logo - if the screen is wide it will occupy 18% - if the screen is small it will be the width of the image. A typical logo image width would be 120 wide which just overfills 18% of a 640 wide screen so the cell will be 120 wide and a little will be taken from the other cells.
<A HREF="econsult.htm"><IMG SRC="gallery/pcurtislogo.jpg" WIDTH="120" HEIGHT="72" BORDER="0" ALT="Consultancy Services available from PCurtis.Com" ALIGN="LEFT" ></A> 
Another trick or two here. The Image has been given an ALIGN="LEFT" attribute which means text will wrap round it but the only text is a NoBrakeSPace which gives a single character "padding" but only on the side required to separate it from the next cell. You should always specify the HEIGHT and WIDTH as they speed up the loading and and allow text to be correctly wrapped round before the Image has been downloaded. You will note that the Logo has been made a link to a page - in a real site this would probably be background on the business, here it links to the Consultancy page and the ALT identifies where the link goes.
</TD>
<TD WIDTH="60%" ALIGN="CENTER">
This is where the Heading for the page sits.
<FONT COLOR="#660000">
This sets the colour for the Heading. It is best to have a dark colour against a light background in case the visitor has specified the colours for text and you could end up with dark against dark. If you specify a FACE attribute to change the font face then use common ones such as Arial or Times New Roman or specify alternatives in case the visitors machine does not have the fancy font you specify loaded.
<H1>Secrets of successful web site design</H1>
The Heading is another opportunity to improve the ranking by using high importance keywords. It can often be a repeat of the HTML TITLE tag. Note that some of the words have to joined by NoBreakSPaces to ensure that the table element has a sensible minimum width yet enabling a visitor to get an unscrolled display in a 640*480 Window with normal size text. This use of unbreakable words is one of the secrets of designing a page which changes gracefully from 640x480 to at least 1024*768 (14 inch to 19 inch screens) - those using larger screens will probably be using a Window rather than full screen.
</FONT>
</TD>
<TD WIDTH="18%">  </TD>
A "reserved" cell for a second logo with an ALIGN="RIGHT". If not needed then it can be made to be 20% and the following cell removed.
<TD WIDTH="2%">   </TD>
The right hand margin
</TR>
</TABLE>
So that is the start of the page laid out completely using a Table. When you start off you should set the BORDER attribute to be say 3 so you can see what you are doing - when you are happy set it to 0 you must have the 0 in double quotes ie BORDER="0". Before you set it to zero see how the Heading and Logo adjust as the Browser window is changed in size

Layout for Navigation and "The Message" Text
This is where we have to be very careful how we lay out the page. Several Search Engines do not use the META Description Tag and provide the first text on the page as the description. So far they will have only found the Heading we have set up and we now want to provide "The Message" with carefully crafted text rather than a set of Navigation buttons. It is conventional to have the navigation buttons on the left so they will be found first by Search Engines unless we employ another of the Secret Tips. We are again going to use a table, this time with two rows and we are going to put "The Message" in row one and the Navigation in row two so the Search Engine finds the important text first.
The Message must be clear and concise, it only needs to be about 80 words long and to preferably contain the maximum possible number of you Keywords - the first 150-250 characters are most important as they will be used as the site description by some Search Engines.
You may also need some more Navigation on the right for lower level pages as the site grows so we will set up the template with a "reserved cell" ready for when that occurs - you can always delete bits you do not need! Again we will set up "margins" using empty columns but again they can be deleted if you choose to use the whole width.
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" >
<TR >
Starts the TABLE with a width of 100% - the border is set to 3 pixels just for setting up
<TD WIDTH="2%" ROWSPAN="2">   </TD>
This is the column for the margin - the ROWSPAN="2" means we do not have to include a matching cell in the next row.
<TD WIDTH="18%">  </TD>
This is the column which will include the Navigation "buttons" in the next row - we set the width at the top to make it easy to understand and to help speed up the browser's rendering <TD WIDTH="73%" ROWSPAN="2">
This is the cell with the critical Introductory Text which again spans both the two rows. The amount of text one should put depends on the number of lines used for Navigation Buttons - it needs to approximately match when the screen size is 800 wide. 50 - 80 words is about right as they can be read in about 10 seconds giving time to hook the visitor whilst any graphics are loading.
<B>The "Secrets of successful web site design" covers the strategy and techniques required for creating a small business site with impact and has tips on making sites easily found and user friendly. It contains a set of guidelines to help the design process and an example "template" with a detailed rationale for every component. </B>
</TD>
<TD WIDTH="2%" ROWSPAN="2">  </TD>
This is another column spanning the two rows giving a margin before the "reserved column" for a right hand side navigation list.
<TD WIDTH="3%">  </TD>
This is the reserved column for a right hand navigation list which would be in the next row down.
<TD WIDTH="2%" ROWSPAN="2"> </TD>
The last of the margins making the table up to 100% (2 + 18 +73 + 2 + 3 + 2)
</TR>
Ends the first Row
<TR>
The start of the second row
<TD VALIGN=TOP NOWRAP>
This is the cell with the navigation links - remember that the margin was spanned so this is actually the second cell across. The links are forced to the top of the cell by VALIGN=TOP. The NOWRAP attribute stops the Links wrapping as the screen shrinks - an alternative which is more predictable with older browsers is to use NoBreakSPaces in the longest line as is also done below
<FONT FACE="Arial" >
Changes Font to give a distinctive look to the Links
<IMG SRC="gallery/bullet.jpg" WIDTH="25" HEIGHT="17" ALT="*"> <FONT COLOR="#a0a0a0" >home</FONT><BR>
This is a "Grayed Out" Link as we are on the Home Page but want to keep the list identical on each page and also tell the visitor where they are. The bullet at the start of the line is a tiny image file. The surroundings to the ball are in the same basic colour as the background so it blends. You can also use .gif files for the bullets which have a transparent background. The size is specified to speed things up and reserve space as it downloads. The ALT gives an * in case graphics are turned off. If you want a very fast page leave out the graphics and just use a LIST.
<IMG SRC="gallery/bullet.jpg" WIDTH="25" HEIGHT="17" ALT="*"> <A HREF="location.htm">location</A><BR>
This time we have a real Link to another page
<IMG SRC="gallery/bullet.jpg" WIDTH="25" HEIGHT="17" ALT="*"> <A HREF="contact.htm">contacting us</A> <BR>
<IMG SRC="gallery/bullet.jpg" WIDTH="25" HEIGHT="17" ALT="*"> <A HREF="enquiry.htm">enquiry form</A> <BR><BR>
</FONT>
</TD>
<TD VALIGN=TOP NOWRAP>&nbsp</TD>
This is the cell we have reserved for another right hand set of links. You can leave it set to a narrow width and the Links will open it up.The NOWRAP attribute stops the Links wrapping as the screen shrinks - an alternative which is more predictable with older browsers is to use NoBreakSPaces
</TR>
</TABLE>

The Main Text
The main text of the page is again enclosed in a TABLE - there is little real need other than being able to have margins which are consistent with the rest of the page
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" >
<TR>
<TD WIDTH="2%">   </TD>
Sets a margin which will compress on a small screen
<TD WIDTH="96%" >
This is where the main contents of the page live. There should be a a few more occurrences of the important keywords and keyphrases but not more than 7 times including the header and introductory text otherwise some Search Engines will reject it as spamming. Graphics should be small - you should aim for the home page to load in not more than 10 seconds and certainly be under 30K. Graphics should be on your own site - external links take an extra 2 seconds or so to be accessed
</TD>
<TD WIDTH="2%" >   </TD>
Matching Right margin
</TR>
</TABLE>

The Footer - a standard end to the page
<HR WIDTH="90%" ALIGN=CENTER>
<TABLE width="100%" border="0" cellspacing="0" cellpadding="0" >
<TR>
<TD WIDTH="2%" >   </TD>
<TD ALIGN="CENTER" WIDTH="96%">
<FONT SIZE="-1" FACE="Times New Roman">
<B>A N Other Ltd<BR>
Spider Industrial Estate <BR>
Webville<BR>
Email: <A href="mailto:spider@websville.com">spider@websville.com</A> Tel: 0123 4567890 Fax: 0123 4567891</B></FONT>
</TD>
<TD WIDTH="2%" >   </TD>
</TR>
</TABLE>

There are no new tricks in the "Footer" which is laid out in the same way as above in a TABLE and uses NoPSPaces to keep the telephone numbers together.
Summary
We have now come to the end of the discussion of the example entry page Template - I hope it will form a good start to your own site.

Back to the Main Site | Technical "Howto" Articles | Small Firms