![[Tools 4 Webs: Webmaster & Internet Marketing Resources]](../images/tools4webs.gif)
Home Webmasters Internet Marketing e-Books e-Books For Sale
Site Map Contact Us Your Feedback
Basics of Web Site Design & Construction
Once you've managed to get visitors to your site, you want them to stay!
A POORLY designed and/or constructed web site is the quickest way to encourage your visitors to LEAVE ... often before they've got past your first page.
So, if you want people to stay, your site must be interesting, attractive AND easy to navigate ('get around'). It is VERY IMPORTANT that they can read your web pages easily and that all of your links work!
DON'T FORGET that some of your visitors will be disabled. This WILL include those who are visually impaired or blind, who use speech software.
If you would like a FREE SUMMARY REPORT on the basics of Web Site Design & Construction, please send a blank e-mail (you can use the following link) to websummary@tools4webs.com
On this page we'll use the following headings to help us look at the basics of web site design and construction ...
Think About Your Visitors
Programming
Basics
Web Site
Hosting
You can either click on a link and go straight to your section of interest, or simply scroll down the page.
One problem with designing and building a web site is that we have so many great ideas about what we want to include, we often overlook basic questions like,
- Who will be my visitors?
- What will they be looking for?
- How familiar will they be with navigating web sites?
- Will they have disabilities?
In this section we'll think about ...
Making It
Attractive
Making It Relevant
Reading
Visual Impairment & Speech
Software
... to help us understand how we can make visitors feel
comfortable when they visit our web site, and want to stay!
It is ESSENTIAL that your web site projects a professional image to your visitors AS SOON as they ARRIVE. Many will leave instantly if they see a messy page, full of spelling mistakes and grammatical errors.
The FOLLOWING will make a page DIFFICULT to read and encourage visitors to LEAVE your site:
- very small ('micro') text
- poor colour combinations (e.g., red on blue)
- low contrast (e.g., pale grey on white)
- poor lay-out (e.g., lines of text with no paragraph
breaks)
So, your choice of
- layout
- space
- font style and size
- colours
- graphics and images
... are ALL CRITICAL to keeping visitors at your site, and making the information accessible and easy to read.
Think about layout ...
Visitors will feel much MORE COMFORTABLE if your web site has a CONSISTENT design across its pages. Don't be afraid to use SPACE (see below) to make the page easier to read.
Make it easy for visitors to find their way around by placing links, borders etc in the same place on each page. Ensure that you have a link to the home page from all major pages (and whenever possible).
Group your web page links together in a LOGICAL way and make sure that your links describe where they are going ... don't leave too many surprises with 'vague links'. For example, if the next page is a continuation of the current page, then the link 'Continued on Next Page' is better than just 'Next Page'.
Use HEADINGS and lists to 'steer' your visitor through the page and use LISTS to make your information more accessible and easier to digest.
ALWAYS provide a SITE MAP if your web site contains more than two or three pages. Make sure that the site map is accessible from near the top of your home page. You would be amazed how many people stay longer because they know where they are going/can go (rather than having to use a 'trial and error' approach).
Think about SPACE ...
Lots of words, graphics and tables with NO SPACE around them will look cluttered, confusing and positively claustrophobic! However, the CAREFUL use of SPACE introduces a more COMFORTABLE, relaxed feeling which will make your visitors want to stay.
We'll deal with colours and contrast in the 'Reading' section below. HOWEVER, remember that even if you have the most important, most revolutionary, most exciting, 'most anything' information on your page which CANNOT, for whatever reason, BE READ, your visitors will MOVE ON. They will probably NEVER visit your site again and your time and research has been WASTED!
Think about font style and size ...
Make sure that the style of font you choose matches your site. An 'arty' or intricate font is unlikely to be suitable for a business-orientated site (they are often more difficult to read). AVOID using MORE THAN 3 DIFFERENT font styles on any web page.
Generally, 'serif' fonts (those with little cross bars at the top and bottom of letters e.g. Times New Roman) are easier to read, especially where there are large blocks of text.
Also remember that NOT everyone's browser (the software used to read the web pages) will have the more obscure fonts. Therefore, it is BEST (whenever possible) to stay with the more common fonts such as:
Sans Serif Fonts
- Arial
- Helvetica
- Verdana
- 'sans serif'
Serif Fonts
- Times New Roman/Times
- Courier/Courier New
- 'Serif'
The size of font is also important. Use a combination of sizes to highlight text, BUT do not use a font that is too large (it will look clumsy) or too small (it will be very difficult to read).
Use bold, underlined or italic text to highlight important points. However, BE VERY CAREFUL when using underlining, since web convention generally dictates that underlined text implies a hyperlink (i.e., a text link to elsewhere on the site or internet). You will notice that on THIS SITE hypertext links are always light blue or pink (depending on whether or not they have been used), change colour when your mouse pointer hovers over the link and are NOT underlined. Click on the following text to see this in action (you may also see the text move up your screen when you do this) ... Try Here
Think about colour ...
We will look at colour again under 'Reading', but be very careful to choose colours for your web pages which:
- Do not clash e.g., Red on blue
- Have high contrast with the background e.g., black/dark blue on white
- Are easy on the eyes
Use colours sensitively to create a mood, or to highlight important points or headings. BEWARE of overkill ... too many colours can cause confusion, can be very difficult on the eyes and may encourage your visitor to move on ... quickly!
Consider Colour Blindness. Did you know that a significant number of people (1 in 20 males and 1 in 200 females) who visit your site will have some form of colour blindness?
TIP! Keep the contrast high and use safe colour combinations (e.g., black or navy blue text on a pale background, or pale grey/white text on a dark background).
FIND OUT MORE ABOUT COLOUR BLINDNESS from the following web sites:
Think about graphics and images ...
Pictures, clip art, logos and other graphics can all enhance the appearance and clarity of a web site. However, it is VERY IMPORTANT that ALL images are properly LABELLED within the HTML coding. If they are not, speech software (such as JAWS™) cannot identify what is on the graphic and will simply say, "image" leaving your visitor guessing! Labelling of images is covered in the 'HTML Basics for Accessibility' section on this page.
Graphics and images will make your web page load more slowly, so they should be used CAREFULLY (see 'Make It Quick').
It may not be appropriate to run an 'all singing, all dancing' web site full of moving images if your content is of a business or technical nature.
Equally, a clean, but text-heavy page is unlikely to help a high-tech, arts or music-biased site.
In other words, make the appearance of your web site match its function, so that you attract (and not drive away) visitors.
Be VERY CLEAR about the AIMS and OBJECTIVES of your site, and STICK TO THEM. Keep the content RELEVANT to these aims and objectives. DO NOT get distracted with other subjects which are either irrelevant or confusing, even though they may be very interesting!
By maintaining focus, you will keep visitors, and hopefully attract more as your site is recommended to others.
We have already covered how to make your site EASY to read by paying special attention to your site's appearance and layout, in the previous sections.
When it comes to the BEST language, once again you must think about the AIMS and objectives of YOUR SITE and therefore, WHO will be visiting.
A highly technical site will require appropriate terminology and possibly even jargon. However, for a site which seeks to attract or educate a 'non-specialist' audience, the following principles should be applied:
- Use simple language*
- Use short words whenever possible
- Keep your sentences short and focussed
- Avoid jargon or abbreviations (if you must use them,
EXPLAIN them!)
* Did you know that many newspapers assume a reading age of 7 years old?
ALWAYS make sure that you have checked the spelling, syntax and punctuation of ALL your web pages BEFORE they are put up on your site on the Internet.
A GREAT way of REDUCING your CREDIBILITY and driving visitors away is to put up a site that is full of spelling mistakes, simple grammatical errors and/or sentences which do NOT make sense!
Visual Impairment & Speech Software
The advent of speech software has opened-up a whole new dimension for visually-impaired and blind people. They can now 'surf the net' with the best of us PROVIDING that the site has been carefully thought out and a few BASIC provisions made, namely:
- Ensure that ALL images and graphics are
clearly labelled in the HTML code
- Ensure that hyperlinks are labelled in the HTML code
- Ensure that 'Summary' attributes are included to describe
tables
See the 'HTML Basics for Accessibility' section below for more information.
(Good programmers will include these as routine, since they form part of the World Wide Web Consortium's ('W3C's') guidelines on how to make web content accessible to people with all types of disability).
This section IS NOT a tutorial about how to program in HTML (HyperText Markup Language ... the 'coding language of the web').
It assumes SOME basic knowledge and aims to provide you with hints and tips to ensure that your coding is optimised for ...
- quick loading
- smooth function
- easy access by ALL of your visitors.
If you do not know anything about HTML programming and you have (or are intending to have) your own web site, we would strongly advise that you learn some basics. YOU will be the one who BENEFITS by being able to ...
- Save money
- Correct time-consuming errors
- Build your site exactly as YOU want it
- Have a skill that you can sell
There are MANY excellent internet resources and books which are designed to get you started. Our advice would be to find the one or two resources which WORK FOR YOU and stick with them ... this is one area where information overload is VERY EASY!
The following are links to resources that we can recommend for their clarity and easy-to-follow advice:
- Liz Castro's book HTML For The World Wide
Web (4th Edition)
Published by Peachpit
Press
- HTML Complete (2nd Edition) Published by Sybex Inc.
- Dave Raggett's HTML tutorial articles at W3C
In this section we will use the following headings ...
HTML Basics for
Accessibility
Keep It Clean
Make It Quick
... to help us produce a web site which not only looks good, but is accessible AND works quickly and smoothly!
HTML Basics for Accessibility
HTML is the 'language of the Web'. As with any other language there is 'good language' and 'bad language'!!
When considering accessibility by ALL users, the following are ESSENTIAL:
Images ... When labelling images, ALWAYS use an 'alt' attribute to describe the image. Make the description simple and clear. For example, if you have a picture of a tree use ...
alt="[Tree]" or alt="[Picture of tree]"
Sometimes headings (e.g., 'INTRODUCTION') are on images such as '.gif' files. In this case it is ESSENTIAL that the 'alt' attribute for the image contains the same words as are on the image itself. So if 'Introduction' appears on the image, the HTML label ...
alt="[Introduction]"
... should be used.
If your image is ALSO A LINK to a bookmark or another page/website, include this in the 'alt' text. For example,
alt="[Link to 'Tools4Webs.com']" or
alt="[Go to
'Tools4Webs.com' web site]"
You get the idea!
Links ... When you use a link (image or text) always add a 'Title' attribute. For example,
Title="[Link to 'Tools4Webs' web site]"
If the image has already been labelled with an 'alt' attribute then 'title' can be omitted.
Tables ... Tables are particularly difficult for blind users to visualise. Therefore, the addition of a 'Summary' attribute is very important.
Since tables may also be used to format text and to assist page layout, the use of a 'Summary' attribute is especially important to avoid confusion. Here are a couple of examples:
Summary="[First column gives the month, second gives
the year]"
Summary="[Table to format text on page]"
For more accessibility considerations visit the W3C Web Site.
Many people build web sites using What You See Is What You Get ('WYSIWYG') HTML editors such as FrontPage™. This enables you to type in what you want on the visible page, and the 'editor' (software) automatically converts it to HTML 'behind the scenes'.
Whilst these are relatively simple to use, they DO have DRAWBACKS! It is here that a knowledge of basic HTML is REALLY USEFUL.
One of the problems with WYSIWYG editors is their tendency to add copious amounts of unnecessary code, especially when you have been editing text 'onscreen'.
The following is a SIMPLE example of what WYSIWYG editor code can look like, and what it can be reduced to by proper use of HTML coding.
<P><Font face="Verdana"><Font color="#FF0000"><B>Beware!</B></Font> </Font><Font face="verdana"><Font color="#000000"><B> Everything</B><B> is not</B></Font> <Font color="#000000"><B> what it may seem!</B></Font></Font></P>
ii. Reduced HTML
<P><Font face
="verdana"><Font
color="#FF0000"><B>Beware!</B>
</Font><Font color="#000000"><B>Everything is
not what it may
seem!</B></Font></Font></P>
Although version ii. may not look very different, excess code such as this can be repeated many times over a page and ADD MANY SECONDS to the download time. As you will see in 'Make It Quick', a lot of unnecessary code can be removed by using style sheets, producing even quicker page download times.
A REALLY USEFUL free software download is an HTML clean-up tool such as W3C's 'HTML Tidy'. This is available as FREE downloads from the W3C site and also as part of an excellent HTML editing kit produced by Chami.com.
The software is quite sophisticated ...
- First it scans your HTML and identifies any
errors or missing code
- Then it tells you exactly WHERE the errors occur AND WHAT they
are
- HTML Tidy allows you to correct the errors, but also has a
facility for
auto correction.
NEVER forget your PAGE DOWNLOAD TIME. Greater than 30 seconds at 28.8kps and you will LOSE MORE THAN 50% of your visitors. IDEALLY, your download time should be MUCH QUICKER.
Quicker download times can be achieved by using
the following:
- Less graphics/images on your page
- Smaller size graphics/images (e.g., through 'compression')
- Careful HTML programming ... especially Style Sheets
Consider the use of graphics/images ...
Images and graphics are files which need to be downloaded before they are visible on the screen. The larger the size of the image file (in bytes), the longer it will take to download.
Image download time may be reduced by:
- Using smaller images (in terms of bytes)
- Reducing the size of an image by reducing resolution (dots per
inch)
- Using less colours
- Compressing images to reduce their size (requires image editing
software)
- Stating the 'width' and 'height' dimensions of the image in
your coding
Consider careful HTML programming ...
We've already talked about getting rid of extraneous HTML code. However, W3C is now recommending the use of style sheets to clean-up coding even further, thus speeding-up page download.
A Style Sheet is where the properties of different components on your web page e.g., paragraphs, are coded 'in a block' and assigned a name. Style sheets can be used to describe almost anything related to page set-up and formatting.
For example, you may specify that a paragraph is
- font size 12pt
- font colour black
- font family Verdana, Helvetica, Arial or sans serif
- font style italic
- font weight normal
- left paragraph indent 60 pixels
- total paragraph width 550 pixels
This is all assigned to a 'class' e.g., 'block1' on your style sheet. So each time you type ...
<P class="block1"> ... etc ...</P>
... in your HTML, the text in that paragraph will be formatted according to the description in the style sheet. The Style Sheet can be placed on your web page, or contained in a totally separate page, in which case it is known as an EXTERNAL STYLE SHEET.
Style Sheets cut out a huge amount of HTML code for the web page and SPEED up page loading. However, not all browsers (the software on our computer used to read web pages) work with style sheets (especially older versions) ... so the rule is ... TEST, TEST, TEST!
A MAJOR ADVANTAGE of using EXTERNAL style sheets, is that if, for example, you want to change the appearance of your web site (e.g., change font from Arial to Times New Roman), you only need to do it ONCE in the external style sheet. Then, wherever HTML code on your web page refers to the style you've changed, it will happen! This saves a lot of time when 'fine-tuning' or during final editing of your site.
The scope of Style Sheets is huge, and is developing all the time. Refer to a good textbook or web resource (e.g. W3C) for up-to-date information.
Perhaps one of the most commonly overlooked aspects of running a web site is the choice of your web hosting i.e., the server on which your web site will sit.
If you are running a commercial web site (one which sells goods) it is essential that 'down time' (the time when your web site is unavailable) is close to zero. For example, if your site makes $100 per day, and your host's server 'goes down' for 2 days, you lose $200. Now imagine how much you lose if your site makes $1000, $10000, $100000 per day!
Since RELIABLE web-hosting is KEY to your profitability, careful research into the right host is important. Everyone has their recommendations and we are no different!
We recommend the following web hosting companies for their reliability, service and value:
Host4Profit - This is a new concept in web hosting. You rent web space on a monthly basis for $24.95, but you also have the opportunity to EARN $10 COMMISSION per month for each new customer you refer to the site who opens an account. Therefore, if you refer only 3 customers who open accounts, you make a profit each month of $5.05 i.e., your monthly rental is free AND you make some money.
The package you get for is VERY impressive, and includes 300MB of web space, unlimited POP mail accounts, e-mail aliases, plug-ins, autoresponders etc etc (the list is very long!). You also get full Customer Service backup and a novel 'Control Panel', an easy to use web-based tool which allows all kinds of site-management facilities e.g., File creation, file uploading, the creation of password-protected directories ... and much more! You also gain access to some VERY HIGH VALUE web marketing resources through Internet Warriors.
Host4Profit offers extremely high security combined with very low site down-time. Find out more.
Remember that you can get your own FREE SUMMARY REPORT on the basics of Web Site Design & Construction, by sending a blank e-mail (you can use the following link) to websummary@tools4webs.com
SPECIAL OFFER! ... Don't forget that we offer a range of e-Books written by experts on a range of different subjects. We are pleased to offer you a FREE BONUS package (worth more than $134) with EVERY order from our range of e-Books, each written by experts in their field. CLICK HERE to find out more!
Home Webmasters Internet Marketing e-Books e-Books For Sale
Site Map Contact Us Your Feedback
Privacy Terms & Conditions About Us
Copyright for this page and all logos and
graphics is owned by Tools 4 Webs.
Copyright © 2001-2007 Tools 4 Webs
PLEASE RESPECT COPYRIGHT LAW.
Part of the Waywood group
Page Last Revised: 23 Nov 2007 21:55:16 -0000
Web site designed and constructed by Stuart
![[Return to top of page]](../images/top.jpg){kind=small}