|  Custom
Website Design and Development Services Helpful Articles
Create a Simple, Effective PHP Form for Your Web Site
How to Make Effective Use of Web Fonts
Improve Your Web Site Design with a Fancy Font
How to Update Your Web Site Using Server Side Includes (SSI)
Web Site Redesign – from stagnation to rejuvenation
7 Effective Ways to Build Your Own Web Site
How to Avoid the 12 Common Web Design Mistakes
How to Prepare Images for Your Web Site – Part 1
How to Prepare Images for Your Web Site – Part 2
How to Prepare Images for Your Web Site – Part 3
How to Choose a Web Site Designer
How to Build a Web Site That Sells
How to Avoid Sloppy Web Site Copy
How to Calculate and Speed-Up the Download Time of Your Web Site
How to Layout Your Web Pages
How to Create an Effective Navigation Structure for Your Site Part 1
How to Create an Effective Navigation Structure for Your Site Part 2
How to Test Your Web Site Usability
Create a Simple, Effective PHP Form for Your Web Site
© 2003 Herman Drost
If you have been struggling to set up forms on your
web site
using cgi, then definitely read this article. Installing
a
simple PHP form is much easier and faster than installing
a cgi
form and doesn't need any programming experience.
How does a PHP form work?
PHP is short for "PHP: Hypertext Preprocessor".
It is a
server-side, cross-platform, HTML embedded scripting
language.
A server side scripting language allows you to create
dynamic
web pages. Web pages that have been enabled with PHP
are
treated just the same as any other HTML page, and PHP
even lets
you create and edit them the same way you would create
and edit
your HTML pages.
This PHP form consists of 3 web pages, an html page,
a PHP page
(PHP script) and a thank you page. You collect the visitors
information when he fills out the form on the html page.
It is
then processed by the PHP script which resides on the
server.
The visitor automatically receives a "thank you
for
subscribing" message. The form results are returned
from the
server to your email box.
Server requirements for your PHP form
Check with your web host you have PHP4 installed on
your server
Most Unix servers do - if so you are in luck and ready
to go.
How to create the simple PHP form
You will create a very simple, effective form in which
you will
collect the name, email address and comments of your
visitors.
The form results will be sent to your email address.
1. Create the PHP script - copy and paste this code
Jack's FormMail.php script:
http://www.dtheatre.com/scripts/formmail
into notepad (not MS Word) and save it as formmail.php
2. Edit the fields - the only recommended field to
edit is the
"referers" field. This field defines the domains
that allow
forms to reside on and use your FormMail.php script.
If you try
to put the form on another server, that is not the specified
domain or ip, you will receive an error message when
someone
tries to fill out your form.
ie: $referers = ('ihost-websites.com','209.123.240.161');
3. Upload the formmail.php script to the web directory
which you
are planning to use.
4. Configure your PHP form - create a web page (ie
contact.htm)
for your PHP form.
5. Point the action of your form to the formmail.php
script you
created in Step 1.
ie: <form name="form1" method="post"
action="http://www.ihost-websites.com/formmail.php">
6. Add the necessary form fields - the "recipient
field" is the
only form field that you must have in your form, for
formmail.php to work correctly.
This form field allows you to specify where you want
your
form results to be mailed. Most likely you will want
to
configure this option as a hidden form field with a
value equal
to that of your e-mail address.
<input type=hidden name="recipient"
value="info@ihost-websites.com">
7. Enter optional form fields
"subject field" - this allows you to specify
the subject that
you wish to appear in the e-mail that is sent to you
after this
form has been filled out. If you do not have this option
turned
on, then the script will default to a message subject:
"Form
Submission".
ie: <input type=hidden name="subject"
value="Form
Mail Results">
"full name field" - this allows visitors
to fill in their name.
This will help you to personalize your return email
by
including their first and/or last names.
i.e: <input type=text name="fullname">
"email address field" - this allows you to
specify your return
e-mail address. If you want to be able to return e-mail
to your
user, I strongly suggest that you include this form
field and
allow them to fill it in. This will be put into the
From: field
of the message you receive. The email address submitted
will be
checked for validity.
i.e: <input type=text name="email">
"comments field" - this allows visitors to
add any comments in
your form. You could name this field anything you like.
ie: <textarea name="comments"></textarea>
"required field" - these are the required
fields you want your
visitors to fill in before they can successfully submit
the
form. If the required fields are not filled in, the
visitor
will be notified of what they need to fill in, and a
link back
to the form they just submitted will be provided.
ie: <input type=hidden name="required"
value="fullname,email">
"redirect field" - if you wish to redirect
the visitor to a
different URL, rather than having them see the default
response
to the fill-out form, you can use this hidden variable
to send
them to a pre-made HTML (ie thankyou.htm) page.
ie: <input type=hidden name="redirect"
value="http://www.ihost-websites.com/thankyou.htm">
"submit field" - this allows the visitor
to submit the form
ie: <input type="submit" name="Submit"
value="Submit">
8. Create a thank you page (thankyou.htm) - this web
page will
automatically thank visitors for subscribing. Add your
own
comments you wish them to receive. Upload this web page
to your
server.
Tip: Use your own domain name, email and IP address
in the
fields above.
Here is an example of a typical web page using the
PHP form.
(http://www.ihost-websites.com/contact.htm)
All the fields are included as was discussed above:
<html>
<head>
<title>Form Mail</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<form name="form1"
method="post" action="http://ihost-websites.com/formmail.php">
<input type=hidden name="recipient" value="info@ihost-websites.com">
<input type=hidden name="subject" value="Form
Mail Results">
<input type=hidden name="required" value="fullname,email">
<input type=hidden name="redirect"
value="http://www.ihost-websites.com/thankyou.htm">
Name<br><input type=text name="fullname"><br>
Email<br> <input type=text name="email"><br>
<br> Comments<br> <textarea name="comments"></textarea>
<br>
<br> <input type="submit" name="Submit"
value="Submit">
</form>
</body>
</html>
9. Copy and paste this html form into your web page
- name it
anything you like (ie contact.htm), then upload it to
your
server.
10. Test out your form - when you fill out the form,
you should
immediately receive the reply from your thankyou.htm
page
and receive the form results in your email box.
Conclusion - you now have a fully functional and flexible
PHP
form on your web site to collect visitor information.
You can
add more fields to the form if necessary. You may also
add any
number of HTML forms to your web site and still use
the same
PHP script.
Resources
Jack's PHP FormMail:
Help/Support - PHP Form Forum:
PHP Form Tutorial: Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
--------------------------------------------------------------------------------
NEW Ebook
101 Highly Effective Strategies to Promote Your Web
Site
--------------------------------------------------------------------------------
Hosting from $30/year
--------------------------------------------------------------------------------
==================================================
Herman Drost is the author of the new ebook
"101 Highly Effective Strategies to Promote Your
Web Site"
a powerful guide for attracting 1000s of visitors to
your web site.
Subscribe to his “Marketing Tips” newsletter
for more original
articles at: subscribe@isitebuild.com. Read more of
his
in-depth articles at: www.isitebuild.com/articles
How to Make Effective Use of Web Fonts
© Herman Drost
Writing for your web site is not the same as offline
writing. The fonts used for print media are different
than web fonts. This is because it's harder to read
text on a computer screen and visitors tend to scan
your web pages rather than read them word for word.
When deciding on what web font to use, take into consideration
the character of your site and whether the web font
type is widely available (accomodates different screens
and operating systems).
If you use the wrong web font, your web pages will
may appear unprofessional and you may lose visitors
to your competition.
So how do you decide on what web site font to use?
1. Analyze the character of your web site - for most
web sites you would use a large or fancy font for your
header to capture your visitors attention and a smaller
web font for body text. When using a fancy font make
sure it is available on most computers otherwise your
visitors won't be able to read it. (To get around this,
read my article "Improve your web site design with
a fancy font").
2. Search engine compatibility - fonts used within
images can be seen on all computers, however it can't
be read by the search engines. They can only "read"
text. When designing images always use the "alt"
tag to convey what your image is about. Try to include
appropriate keywords in your web site copy. This will
help the search engines index your site.
3. Use a web safe font - there are 2 types of fonts
that are widely used:
Serif Fonts - these are most widely used for PRINT
media ie Times Roman, Georgia, but are not good for
the Web, because they are difficult to read on the screen.
Serif fonts are those that have fine cross-lines at
the extremities of the letter.
Sans Serif Fonts - these are fonts that don't have
serifs. They are the best fonts to use for the WEB (ie
Verdana, Arial, Helvetica, Trebuchet) but are not appropriate
for print media.
Here's a great readability study that was done when
comparing serif and sans serif fonts: http://www.wilsonweb.com/wmt6/html-email-fonts.htm
4. Use the correct font size - alternative font sizes
add flavor and character to your web site. If you want
your text to be viewed correctly for both PC and MAC
users, then it's better to use pixels rather then points.
Points may look all right on a PC but will appear smaller
on a MAC (although these days there are only a small
percentage of folks that use MACs).
Use a large font size (ie Arial H1) for your main header
text, smaller font sizes (Arial H2, H3) for your subheadings
and a point or pixel size of 10 or 12 for your body
text.
Generally I use Verdana 10pt for body text and Arial
text for headings.
5. Utilize Cascading Style Sheets (CSS) - these enable
you to easily create a consistent font style across
your entire web site. If you want to change the font
on all your web pages, you just need to change one style
sheet.
CSS allows you to easily use comma-separated list of
fonts (ie Verdana, Arial, Helvetica, sans-serif). The
browser will use the first one it comes to in the list
that is installed. If none of the type faces in the
list are available, it reverts to the default.
Writing correct web copy using fonts that are easy
to read and readily available, not only adds character
to your web pages, but shows you care about the experience
of your visitors.
Resources
Web font readability study.
http://www.wilsonweb.com/wmt6/html-email-fonts.htm
Hundreds of fonts, most of them free.
http://www.fontguy.com
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
--------------------------------------------------------------------------------
NEW Ebook
101 Highly Effective Strategies to Promote Your Web
Site
--------------------------------------------------------------------------------
Hosting from $30/year
--------------------------------------------------------------------------------
==================================================
Herman Drost is the author of the new ebook
"101 Highly Effective Strategies to Promote Your
Web Site"
a powerful guide for attracting 1000s of visitors to
your web site.
Subscribe to his “Marketing Tips” newsletter
for more original
articles at: subscribe@isitebuild.com. Read more of
his
in-depth articles at: www.isitebuild.com/articles
Improve Your Web Site Design with a Fancy Font
© 2003 Herman Drost
Have you ever tried to design your web site with a
beautifully
selected fancy font, only to realize that most folks
don't have it
installed on their computer?
This means your web page won't look great to the majority
of
your viewers. They will only see the font they have
on their own
computers.
The Problem
Most computers come with only a certain number of fonts.
An
older computer will contain different fonts from newer
ones. ie
if you include a font from your Windows XP operating
system for
your web site design, it may not show up for folks that
use the
Windows 98 operating system.
The fancy font on your web page will default to what
is on the
person's computer, creating a distorted looking font.
The Solution
Create an image of the fancy font.
1. Locate the fancy font you want to use for your web
site
design. Do a search for "free downloadable fonts"
or go to
http://www.fontfile.com to select the font you want.
2. Download the fancy font to a folder on your computer
- you will
receive the font as a zip file. Extract it to a new
folder on
your desktop (you can use the free utility at WinZip.com
if you
don't already have it installed).
3. Install the fancy font on your computer - go to
your Start button -
Settings/Control Panel.
With the control panel window opened, scroll down to
the Fonts
icon.
Click on the Fonts icon to open it. This contains all
the fonts
on your computer.
Copy the font (right click on mouse) from the folder
on your
desktop and paste (left click on mouse) it into the
font's
folder.
4. Create the image for your font - open your graphic's
software
(ie Fireworks, Photoshop or Paint Shop Pro).
Make the canvas size a little larger than the size
of your font.
Choose the same background color as your web page so
your canvas
will blend in perfectly with it.
Write the words on the canvas using the new font you
installed
(it should now appear in your choice of fonts).
Optimize your font image so it has a small file size
(make sure
it has a resolution of 72dpi and save it as a gif file).
This
means it won't significantly affect the download time
of your
web page.
5. Insert the image of the new fancy font on your web
page.
Now you don't have to stick with the plain looking
fonts that
come with your computer. This will help make your web
site stand
out from your competitors and enhance your design capabilities.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
--------------------------------------------------------------------------------
NEW Ebook
101 Highly Effective Strategies to Promote Your Web
Site
--------------------------------------------------------------------------------
Hosting from $30/year
--------------------------------------------------------------------------------
==================================================
Herman Drost is a Certified Web Site Designer (CIW),
owner
and author of iSiteBuild.com - Affordable Web Site Design,
Hosting,
and Promotion Packages.
Subscribe to his “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com. Read more of his
in-depth articles at: www.isitebuild.com/articles
How to Update Your Web Site Using Server Side Includes
(SSI)
Copyright 2002 Herman Drost
Recently a person asked me if I could replace 125 web
pages of
her web site with a new drop-down navigation system.
If she had
to do this manually, she would have to change each page
and
upload it separately to the server. This would take
hundreds of
hours. So, what’s the answer – use Server
Side Includes (SSI)
What is Server Side Includes (SSI)?
This is where you can insert one line of simple code
to update
any web page . This line of code “includes”
any file
(i.e. navigation bar, header, footer) you wish to insert
in each
or all of your web pages. Changing this one “include”
file and
uploading it to your server enables you to update your
entire
web site without even touching your web pages. It can
now be
a breeze to update page content such as headers, footers,
navigation bars and changing products.
Here are the steps to take:
1. Check that your web hosting plan supports Server
Side
Includes (SSI)-most do.
2. Create an “includes” folder in your
web site files.
3. Create the “includes” file containing
your navigation bar,
header, footer (or whatever file you wish to update
on your
site). It could be a text or html document. If it is
an html file,
then only copy what is between the body tags. Remove
any
html header, footer and body tags from your file.
Name this file nav.htm.
4. Place this file in your includes folder.
I also included my menu.css file (cascading style sheet)
and
virtualmenu.js (javascript) file in the includes folder
so the file
paths are clear. These are inserted between the header
tags.
5. Place the following code on the particular web page
where you want your navigation bar to appear.
<!--#include virtual="/includes/nav.htm"
-->
I also made sure my menu.css and virtual.js files had
the same
file paths and placed the code for these files in the
header
tags of my web page (blank.shtml)
<SCRIPT language=JavaScript1.2 src="/includes/virtualmenu.js">
</SCRIPT>
<LINK REL=STYLESHEET TYPE="text/css" HREF="includes/menu.css">
You could create a line of SSI code for these files
also. I left
them as they are, because the .js and .css files are
already
included in the header tags of the /blank.shml page.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
How to Choose a Hosting Company
How Much Hosting Space Do You Need?
Hosting from $30/year
6. Change the extension name (maybe it was .htm) of
this web
page that contains your line of code, to .shtml (in
my example
it’s blank.shtml).
7. Upload your includes folder and your web page (blank.shtml)
to your server.
8. Refresh (right click your mouse and look for refresh)
your
web page to reflect your new navigation bar.
Here’s the finished page with the new drop-down
navigation bar.
http://www.ihost-websites.com/blank.shtml
Now, if you wish to change the appearance of your navigation
bar
throughout your web site, you just need to edit one
file
(nav.htm file), then upload it to your server. Your
changes should
appear immediately on every page of your web site where
you
included the SSI code.
Congratulations! You have just saved yourself hundreds
of hours of time updating your web site.
Other resources for Server Side Includes (SSI)
Using Server Side Includes in Dreamweaver
It is very easy to use Server Side Includes in Dreamweaver.
Once you have made your Include file, all you need to
do is
click on insert > Server Side Includes, choose the
file you
need, make sure the path is relative to the Site Root
and
insert it.
Using Frontpage Includes Component
outfront.net
bignosebird.com
webreference.com
netmechanic.com
apache.org
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Affordable Web Site Redesign and Hosting
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
Web Site Redesign – from stagnation to rejuvenation
Copyright 2002 Herman Drost
When surfing the Web these days, you often come across
web
sites that suffer from stagnation – they look
old, obsolete or
appear to have been designed by an amateur. Your web
site needs
continuous improvement to capture and engage your visitor’s
attention. If not, they can easily click away to your
competitor’s site.
12 steps to prevent web site stagnation
1. Define a clear purpose – when visitors arrive
at your site,
they should immediately know what your site is all about.
You should introduce this in your first paragraph. A
graphic
may help to supplement your explanation.
2. Create a clear theme throughout your site –
as time goes by,
you may add things to your web site that has nothing
to do with
your original theme. You hope it will attract more visitors.
This may be in the form of banners or links from other
popular
sites. Don’t do it! Why?
This only seeks to distract people from the focus of
your site.
Instead, reevaluate your site’s content and overall
design.
3. Provide valuable content – “content
is king” on the Net.
People are looking for easily accessible information
about your
product or service. Your homepage should entice visitors
to dig
deeper into your web site. Sometimes you are too close
to your
web site, that you can’t see what changes are
needed to improve
it.
Get other people to visit your web site and ask them
for their
honest feedback. Based on this, make the appropriate
changes.
4. Harmonize text and graphics – recent sites
I’ve visited, had
hard to read text (they used the same font as they would
for
printed media). Sometimes sites have all their text
capitalized.
Others have a graphic that takes up most of the page,
making the
web page slow loading or the text rolls onto the graphic.
Create your web pages where the background colors of
your web
page are lighter than the text (black text on a white
background
is still the easiest to read). Create graphics that
enhance the
appearance of the page and support the content.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
How to Choose a Hosting Company
How Much Hosting Space Do You Need?
Hosting from $30/year
5. Create site interactivity – a static web site
won’t allow
visitors to interact with your web site. Because the
Web, is an
interactive medium, create ways in which your visitors
will
either want to return or be invited to return. Here
are a few
ideas to get you started:
Write an informative newsletter – create a subscription
box on
your web site with a link to a sample of your newsletter.
In
your newsletter you can invite them to new products
and services
on your site.
Run a contest – include a contest form on your
web page and
invite them to return to see if they are the winner.
Create a poll or survey – you could have a weekly
or monthly
poll or survey, then publish the results at the end
of period.
Create a chat room – invite people for one hour
a week to chat
with you about your area of expertise. This may become
something
they look forward to.
Give something away – people love freebies. If
you do a search
for “freebies” on google you will get 1,400,000
sites that offer
free products or services. Make sure the product fits
with your
target audience.
6. Simple navigation – sites that make it difficult
to find the
information you need, or make it hard to get back to
the
homepage, lose visitors very quickly. Other sites have
multiple
navigation systems that only create confusion.
Create a navigation system that is simple, quick and
makes it
easy to guide the visitor through the site. This can
be in the
form of text links or graphical links that are consistent
on
every page.
7. Build trust and credibility – if your web
site doesn’t give
the impression that you can be trusted because you make
unbelievable claims, you will lose visitors fast. Here
are some
ideas:
Ask for testimonies from satisfied customers Give a
guarantee
with your service or product. Provide well-written content
Create an “about us” page to give folks
a little background of
whom they are doing business with. List any professional
associations you are associated with.
8. Web page popularity – examine your site statistics
and see
which pages most of your visitors are landing on. If
most of
your visitors are entering the less significant pages
of your
web site, you may want to change the keywords of your
best pages
to drive web traffic to them instead.
9. Site loading speed – this is the most important
factor in
having folks visit your web site. If it is slow loading
(more
than 10 seconds with a 56K modem), your visitors will
click away
to your competition. Here are some ideas to speed up
and cut
down on loading times:
Optimize your graphics so they are small in size. Don’t
use too
many graphics on one page. Clean up any bloated or unnecessary
html. Don’t overdo your site with flash, java
applets, java
script, and dynamic html
10. Research your competition – constantly keep
an eye on your
competition for new technologies and new ways to communicate
with your audience. Take a look at the design and keywords
they
are using. If they rank high in the search engines,
this will
give you some ideas of how you can improve your own
site.
11. Keyword density – analyze the amount of keywords
you are
using in each of your web pages. Try to aim for a keyword
density on your site from 3-20%. This will give you
a good
range. You can analyze your keyword density by using
these
online tools:
http://www.keyworddensity.com
http://www.keywordcount.com
Don’t repeat your keywords more than 3 times.
Use different
keywords for each web page.
12. Find a good web designer to redesign your site
– look for a
design company that knows all the facets of the web
site design
and marketing phases. This ensures you will have a web
site that
sells (not just a nice design).
Read “How to choose a web designer”
==================================================
Herman Drost is a Certified Web Site Designer (CIW),
owner
and author of iSiteBuild.com Affordable Web Site Design,
Hosting,
and Promotion Packages.
Subscribe to his “Marketing Tips” newsletter
for more original
articles at: subscribe@isitebuild.com. Read more of
his
in-depth articles at: www.isitebuild.com/articles
7 Effective Ways to Build Your Own Web Site
Copyright 2002 Herman Drost
Running a business without building a web site, is
like a fish
swimming in a small pond. The fish needs a vehicle to
reach
the ocean. If you are a small business person who wants
to reach
millions quickly and easily, building a web site is
a necessity.
There are many ways to build a website but I'll just
give you an
overview of the most popular ones.
Before you begin to build your web site, register a
domain first
(read my article "How to choose, register or transfer
domain
names" This means you are serious about your business.
1.Web Site Templates - Free and Paid
This is a quick and simple way to design your site without
spending a dime. With a free web site template, you
can add text
and graphics and host it on a free web host.
Free - these will give you a quick and simple design.
www.steves-templates.com
www.freelayouts.com
Paid Templates - generally these provide better looking
designs.
www.templates2go.com
www.thetemplatestore.com
Pros - quick set-up, saves time on design time.
Cons - lack of uniqueness and flexibility, not custom
built to suit
your business.
2. ISP Site Builders
Some ISPs provide site building software
as part of their package i.e. AOL, Bigstep.com.
Pros - "all-in-one" package, no html required.
This may consist of
just site building (AOL), or a combination of site building,
hosting,
search engine submissions and newsletter management
(Bigstep)
for one monthly fee.
Cons - template pages, page links generically named,
pages can't
be individually optimized for search engines.
3. Learn HTML
This will allow you to build your web site from
scratch and have total control over any changes you
may
wish to make.
Pros - total control, flexibility, inexpensive (you
can
even use the text editor, notepad, that comes with your
computer).
Cons - steep learning curve to become proficient,
takes a lot of time to change hundreds of pages. Subscribe
FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
How to Choose a Hosting Company
How Much Hosting Space Do You Need?
Hosting from $30/year
4. Use Web Editing Tools
There are two kinds of web site editors.
a) HTML Editors - these will help you with writing and
editing your
html (i.e. automating repetitive tags and color coding
the different
tags used).
Macromedia Homesite
www.coffeecup.com
www.notetab.com
b) WYSIWYG (what-you-see-is-what-you-get) editors
These graphical editors will help you to design a professional
looking web site after a lot of practice. Here are the
two most popular
editors. These editors also allow you to see the code
as you design your
site. You can also manipulate the code within the editor.
Dreamweaver MX
Frontpage
Pros - complete control over the design and maintenance
of your
website, can write or edit code as you please, maintain
hundreds of pages, many useful features.
Cons - can be expensive, learning curve, some WYSIWYG
editors
add unnecessary code, creating bloated web pages.
5. Browser Software - Netscape Composer
Netscape has always had a basic Web page editor built-in.
Netscape 7's version of Composer fills a huge gap at
the lower
end of the market for WYSIWYG editors and still has
something
useful for the more experienced designer.
Pros - free, easy to use
Cons - some learning curve needed, lack of features
and integration with graphics software, when compared
with other
high-end web design editors.
6. SiteBuildIt
This is an all-in-one system of tools to build, host
and promote
your web site. It includes one year of:
Domain name registration
Web Site Hosting
Graphic Tools (LogoCreator and NavBar creator)
Search Engine Optimization
Automatic Search Engine Submission and Re-submission
Pay-Per-Click Search Engine Research
Traffic Stats and Click Analysis
E-zine Subscription and Delivery
Cost: approx $300/year
Pros - all-in-one solution for creating, promoting
and analyzing
your web site, no need to learn html, add your own text
and
graphics.
Cons - use of template generated web pages, lack of
business uniqueness, limited flexibility over html code,
expensive.
7. Professsional Web Site Designer
If you choose a professional web designer, make sure
he has
the qualifications and at least several years experience
designing
web sites. Take a look at his portfolio to give you
some idea of
the sites that have already been designed.
(Read my article "How to Choose a Web Site Designer"
Pros
Working with a specialist in designing and optimizing
websites.
Professional image for your business
Years of experience building, optimizing and promoting
web sites.
Saves time - leaves you time to concentrate on building
your
business while the technical aspects and maintenance
of your
web site is taken care of.
Cons
Can be expensive
You have less control (must work with your designer).
Recommendations
Do-it-yourself
If you want to build it yourself and have the time to
do it,
then learn some html and invest in a professional web
editor.
Learning html will enable you know what's wrong with
your site
(particularly when a web site editor doesn't write proper
html
or adds unnecessary tags). The editor is very helpful
if you
have to maintain a large web site that contains hundreds
of
pages.
If you don't have much time and wish to do-it-yourself
without
learning html, then download a web template.
If you don't want to learn html and want an all-in-one
solution
for building, hosting, promoting and web traffic analysis,
then
SiteBuiltIt is a great way to go.
Hiring a Professional Web Site Designer
This will save you a lot of time instead of doing it
yourself.
You can also be assured of having a professionally designed
web site built to reflect your business. A good web
designer
will know how to build a web site that sells, which
is the ultimate
goal for your business.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Affordable Site Design and Low Cost Hosting
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Avoid the 12 Common Web Design Mistakes
Copyright 2002 Herman Drost
Are people visiting your web site but not buying? This
may be a
sign and the time to do some redesign of your web site.
Often
you are so close to what you have created, that you
can’t see
obvious design mistakes. I often do the same when writing
an
article – everything looks fine when I have finished,
yet when I
review it the next day and I’m amazed at how many
mistakes I
have made.
Let’s look at some of the most common Web Design
mistakes:
1. Sloppy Web Site Copy – your heading and first
paragraph should
clearly indicate the purpose of your web site. “Content
is King”
on the Net, so make sure there is plenty of focused
information
for your visitors. The content should draw the visitor
through
the site to take action in the end. Include contact
information
on every page in case people have questions.
2. Bad Color Coordination – avoid using dark
text on a dark
background. Use dark text on a light background, such
as black
on white. Use colors that blend well together –
observe nature
or look at paintings to get some idea of good color
combinations.
3. Pages Load Too Slowly – using too many images
or inserting
large images on a web page, slow down the loading time
of your
web page. Optimize your images (reduce their size) before
you
insert them on your site, otherwise your visitors will
leave
before your site is loaded.
4. Poor Navigation – this means visitors can’t
easily find the
information. They experience broken links, error pages
or
discover too many moving objects (animations, flash,
scrolling
text, marquees) – all these will annoy the visitor
and cause him
to click elsewhere. Keep your navigation simple by creating
clear links on all web pages. Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
How Much Hosting Space Do You Need?
Hosting from $30/year
5. Orphan Pages – these are pages other than
your homepage, where
the visitor has no idea how it fits in with the overall
structure of your web site. You should always have a
link to the
homepage, so visitors know where they are on your web
site.
6. Long Scrolling – the visitor has to scroll
horizontally, or
many pages vertically to view the whole web page. Create
the
width of your web page to fit on one screen, to avoid
horizontal
scrolling and have a maximum of 3 pages to be scrolled
vertically.
7. Meta Tags Missing – without optimizing your
web page with a
description or keywords, people can’t find you
on the search
engines. Research key words or phrases relevant to your
site
content. Include them in your title, description and
Web Site
copy.
8. Lack of Marketing Strategy – a beautiful lawn
without sun or
water will soon die. A Web Site without visitors will
soon die
also. They are the life blood for your website. Create
numerous
marketing strategies to attract visitors to your web
site – you
never know which one will be the most effective.
9. Poor Layout and Design – create an aesthetically
pleasing
design to keep the visitors on your site. Create enough
white
space between your text and images by using margins.
Don’t
overlap text and images and avoid capitalizing all text
– it
gives the impression you are shouting at your visitors.
Use
font type such as Arial or Verdana to make it easier
to read on
your computer screen.
10. Avoid Using Frames – frames don’t allow
you to bookmark the
page or return to it and sometimes the URLS stop working.
11. No Cross Browser Compatibility – you may
be losing many
customers if your Web Site is not compatible to the
browsers
most people are using. Internet Explorer (IE 4, 5, 6)
is
currently the dominant browser, and most users are displaying
800x600 pixels or more, with a color depth of at least
65K
colors. (http://www.w3schools.com/browsers/browsers_stats.asp)
.
Therefore check your design with these statistics in
mind.
12. Outdated Information – your web site is like
a garden. If you
allow weeds to block out the sun and take over your
garden, it
will be destroyed. Attracting and keeping web site visitors,
means continually adding new information (i.e. latest
news),
deleting irrelevant, outdated information and removing
broken
links.
Continuous maintenance of your web site is crucial
to
attracting and retaining visitors. If you don’t
have time to do
it yourself, hire a Web Gardener (Web Designer), to
keep your
site looking fresh, clean and fast loading.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Low Cost Hosting and Site Design
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Prepare Images for Your Web Site – Part
1
Copyright 2002 Herman Drost
You are staring at the your monitor waiting for the
image to
download. It finally appears but it has blurry edges.
You go to the next page but can’t read the text
because of the dark image in the background. The next
page has animated images, that don’t seem to stop.
The spinning globes keep spinning. The last page has
a large graphic on it, which is a link. You click on
it for more information but it goes nowhere. You leave
the site in frustration.
Images are an essential ingredient for Web Site design.
You want visitors to have an aesthetically pleasing
experience. Properly preparing your images is necessary
to
enhance the appearance of your web site. In Part I of
this
article I will explain:
When to use images for your web site?
What image file formats should you use on the Web?
When to use images for your web site - Navigation
Graphical buttons can link to other pages or resources.
Image Maps – this is a graphic that contains
several links on it. It has several “hot spots”
or invisible buttons, you can click on. For example
you could have a photograph of your family and put a
hot spot on each person’s face that links to that
person’s web site.
Logos and Trademarks – your business or organization’s
trademark are crucial for name recognition and branding.
Thumbnails – this is a small, “thumbnail-sized
version of an image. When you click on it, you jump
to another page with a larger version of the same image.
The visitor can see many different, small images on
the first page without having to wait for larger files
of the larger images to load.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
What are the different image file formats?
Web graphics can be categorized into two file formats:
bitmap and vector.
Bitmap – these are composed of individual values
for each color
displayed. The larger the dimensions of the image, the
larger
the associated file size will be for the same graphic.
When
viewed with magnification, a bitmap resembles a series
of little
squares, each of which has a color value that contributes
to the
overall shape. Bitmaps have a very rough appearance
when viewed
closely but form images when viewed from a distance.
Bitmaps are best suited for photos, drop-shadow effects
and
soft, glowing or blurry edges.
Vector – these store information about the image
in mathematical
instructions that are then interpreted and displayed.
Vector graphics are best suited for line art, shapes
and
illustrations.
Image File Formats
Graphic file formats used on the Web are GIF, JPEG and
PNG
Graphics Interchange Format (GIF)
GIF is a platform-independent file format that is limited
to a
display of 256 colors. GIF has been adopted by most
developers
because of its small file size.
GIF is considered a “lossless” format.
This means that as the
image is compressed, no information is lost.
Types of GIFs
Animated GIF (89A) This 89a version of GIF allows storage
and playback of a sequence of still images to create
the
illusion of animation. Animated GIF files consist of
sequential
frames that reload from a browser’s cache and
replay in an
infinite or predetermined loop to simulate motion.
Transparent GIF
An advantage that a GIF has over a JPEG image is that
the
designer can designate a color of the GIF image to be
transparent. For example, you can create a circular
logo in a
square image by making the background color transparent.
The
image appears circular, when, in fact, it is square
with
information to appear transparent.
Interlaced GIF
Graphic interlacing (the progressive rendering of images)
is unique to GIFS and is the preferred method for
display of large graphic files. Many people find the
“fuzzy-to-sharp” animated effect of interlacing
visually
appealing, but the most important benefit of interlacing
is that
it gives the reader a preview of the full area of the
picture,
while the picture downloads into the browser.
When to use a GIF
Buttons, bullets and navigational tools that accent
your
Web pages. Interlacing is best for larger GIF images
such as illustrations and photographs.
Joint Photographic Experts Group (JPEG)
Graphics in the JPEG format are capable of much greater
color
depth than GIFs, but usually require more time to download.
JPEG can contain up to 24 bits of color information
(16.7 million colors). Remember though, that most users
are only
capable of displaying 8-bit color.
When to use a JPEG
JPEG enables you to use brilliant colors and provides
support
for complex images and digitized photographs but it
is not
designed for use with simple images.
JPEG compression is not as effective as GIF compression
and may
distort images with few colors or large areas of the
same color.
JPEG compression is therefore not designed for low-resolution
images.
Portable Network Graphics (PNG)
The PNG file format is emerging as the new format for
Web graphics.
PNG files are lossless and support transparency like
GIFs, yet also
support compression and high bit depth like JPEGs. In
addition,
PNG bit depth can be adjusted, unlike GIFs or JPEGs,
which must
be 8-bit and 24-bit depth.
When to use a PNG
PNGs behave similarly to GIFs and work best with flat-color,
sharp-edged art. PNGs compress both horizontally and
vertically,
so solid blocks of color generally compress best. They
also support
better interlacing than interlaced GIFs.
Knowing what types of graphics to use and when to use
them for
your web site will help you avoid the many pitfalls
of bad web
design.
Part 2 of this article will discuss how to optimize
graphics for
your web site and factors that affect optimization.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Prepare Images for Your Web Site – Part
2
Copyright 2002 Herman Drost
When surfing the Web, you will have noticed web sites
where the images load very slowly whereas other images
don’t match with the theme of the site or appear
blurry. Presenting a professional image for your business
means your web site design must be professional also.
Part one of this article discussed when to use images
for your web site and what image file formats to use
on the Web (www.isitebuild.com/imageoptimization1).
In this article (Part 2), we will discuss how to optimize
your images for the Web.
Image optimization is the art of making your images
suitable for the Web. There is a large difference in
preparing your graphics for print compared to the Web.
In print you have to have as much data as possible to
get a good graphic. The main factors that influence
the display of graphics for the Web, are the size of
the file and the screen display quality of the graphic.
Factors Affecting Web Graphics
1. File Size
When you design web pages you need to create a balance
between visual appeal and page download time. If your
page has too many images on it, it will take too long
too load and visitors will not stay around to wait.
2. Cropping
This means cutting out unwanted areas of your image.
It decreases the file size and helps visitors to focus
on your
image.
3. Anti-aliasing
Jagged edges of an image can be prevented by anti-aliasing.
This creates a blended edge around an image.
Because of the extra colors necessary to create the
blend, file
sizes of anti-aliased GIFs are a little larger. Use
anti-aliased graphics in almost all cases, except when
creating
very small type as graphics.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
4. Bit Depth and Screen Resolution
Bit depth refers to the number of colors in an image
or the
number of colors a computer system is capable of displaying.
To calculate bit depth, one bit equals 2 colors, then
multiply
2 times 2 to arrive at each higher bit depth. Quality
and file
size decrease as bit-depth decreases.
New computers support thousands or millions of colors
(32-bit),
but many older color systems can only show up to 256
(8-bit)
colors at a time. This reality imposes limits on the
size of
files and number of colors that can be included in Web
graphics.
Check how your image appears with a 256-color monitor
and a
true-color monitor. Do this on your PC using the
Setting/Control Panel/Display option, then select the
Settings
tab/256 color option.
5. Image Resolution
Monitors typically display data at 72 dpi (dots per
inch).
Therefore, always save your files on the Web at 72 dpi.
Always resize your image in your graphics software
before you insert it onto your web page. If you resize
its
dimensions when it’s already on your site, it
will look
distorted.
6. Browsers
Someone viewing your site is subject to a completely
different result depending on which browser he is using.
Your
images may appear harmonious in Internet Explorer (IE)
but may
be broken up in Netscape Navigator (NN). Therefore check
your
image for differences with Internet Explorer (IE) and
Netscape
Navigator (NN) browsers. Your images should appeal to
all
users.
Unfortunately AOL has its own browser, which filters
sites
through its own AOL proxy system. This means all graphics
are
converted from JPEG and GIF to the ART format.
Most AOL users also use their browsers with the default
“compressed graphics” checked, so what normally
looks good in
IE or NN, will look blurry or distorted on AOL. To change
this,
AOL users need to go to preferences and check “never
compress
graphics”.
7. Caching
This is a temporary storage area of your hard drive
where
browsers keep files while they display them. You can
create a consistent look and feel to your Web Site,
by reusing
another graphic on another page. You will be retrieving
it from
the cache. The more graphics that you reuse, the faster
your
pages will load.
Testing
To test load times of your pages you need to first
publish them and then clear the cache in your computer
before
loading them, and timing them, from the Internet. Put
the url
in your browser address box, start timing when you hit
Go and
stop when the word 'Done' appears in your status bar.
Images are the main factor that contributes to slow
loading of
your web pages. By implementing these techniques for
optimizing
your images, visitors will have a far more pleasing
experience.
Part 3 of this article will discuss other methods for
creating
fast loading images when creating a professional web
site.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Prepare Images for Your Web Site – Part
3
Copyright 2002 Herman Drost
Image optimization significantly improves your site's
effectiveness. Whether your success is measured in revenue
per user, page views, unique visitors, or pure profit,
accelerating your Web site makes a huge difference.
Part 1 of this article discussed when to use images
for your
web site and what image file formats to use on the Web.
Part 2 discussed how to optimize your images for the
Web
Part 3 will present more ways to optimize your images
so
your web pages will be fast loading.
Studies show that a one-second improvement reduces
click-aways up to 65%. Faster page views means more
page views and a better user experience. This leads
to higher user retention and therefore more revenue.
Here are a few ways this can be done:
Creating Thumbnails
Make 2 copies of your large image in your favorite image
editing software (Fireworks or Photoshop). Make a small
“thumb-sized” version of your large image
and put it on
your first page. Put the large version of your image
on another page. Link the small image to the larger
one. When visitors click on the small image it will
take them immediately to the larger image.
Pre-load graphics
If you want a large image to load fast, you can pre-load
the graphic on another page. Create a 1x by 1x pixel
of the larger image and insert it at the bottom of an
earlier page
(it will appear as a dot and the visitor won't even
know it is there). The browser caches the image. When
the visitor arrives on the page with the large image,
it appears almost immediately.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
Slicing
This is where you divide a large graphic into smaller
pieces. This keeps the file size of the images smaller
enabling them to download faster. Slicing a graphic
can also help with design and layout of your web site.
Use Height and Width Attributes for your Images.
The browser doesn't have to calculate the image size
because you've told it the height and width values already.
If the height and width attributes are not included,
the browser has to load the entire image, then calculate
its size before displaying it.
Height and width attributes are inserted automatically
in the HTML code by WYSIWYG page editors.
Don't use the height and width attributes to make a
graphic appear smaller on the page than its actual size;
this just creates a larger download time plus added
computer processing time. Resize the graphic in your
image editing software instead
and use it in your page at its true size.
Interlacing
Have you noticed web graphics appearing on the page
gradually in layers? As each layer appears the image
becomes clearer until it is in full focus. It gives
the viewer a rough idea of what your image will look
like and decide to wait or click onwards while the image
is rendering. On a fast connection the image will load
quickly, so you won't notice the rendering effect.
Interlaced images increase file size slightly. Only
apply it to large GIFs where the file size is less noticeable.
Use of Alternate Text
Some people surf the Web with the graphics turned off
(for faster web page loading), or they are disabled
(visually impaired people use the text-based Web). A
good Web
Designer will accommodate these situations by adding
the ALT attribute to the HTML element. The ALT element
allows you to put text in place of the image so the
readers have an idea of what the image is without having
to view it.
The ALT attribute will show up if your image is broken.
It can also be inserted as one of your keywords, for
search engine optimization.
Using the Gif Wizard
This is a handy tool to reduce the file size of your
graphics.If you go to www.gifwizard.com, it will compress
your graphics online, on any platform.
Optimizing your Web Site will deliver faster page downloads,
increased page views, improved user retention, a better
user experience and therefore more sales.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Choose a Web Site Designer
Copyright 2002 Herman Drost
It seems that everyone from the 15-year-old child to
their Grandmother is able to design a web site these
days. You could also build the site yourself using a
word processor or other web site program; however if
you choose this route, plan on spending quite a bit
of time learning, to get your site to look professional.
Creating a web site is not as simple as typing a letter.
If you want your site to look professional, it is imperative
to have a designer that will be with you from the start
to the finish of your web site and will also be there
in the future should you need changes or updates to
your site. So how do you distinguish who is a good designer
or a bad one?
Here are some important steps to take before making
that important decision:
1.Credentials – does the person or business have
professional qualifications in Web Design and the Internet?
Are they certified in any particular area of web design?
You can often check this out by going to their “about”
page on their web site. If they have taken the time
to gain the qualifications, then you know they are serious
about their business.
2. Experience – how long has the person or business
been designing web sites and working with the Internet?
If it is only a short time then they may not be familiar
with all the technologies available in designing a web
site and may not be around to take care of your future
needs.
Look at the design of their web site and other sites
that they have designed by going to their portfolio
page. Do the colors and text look balanced? Do all the
links work, does the site load fast and is it easy to
navigate the site? Do all the pages have a consistent
look?
3. Testimonials – this will give you a good idea
of the service and design you can expect. Look through
the testimonials of satisfied customers. The testimonies
should have the email address and the web site address
listed (so you can contact them if need be). Beware
of fake testimonials in which just the name is listed
but no email or site address.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
4. Vision – create a basic plan of the type of
web site you want. Do a search of other sites on the
Web, to get a rough idea of what type of site you are
looking for, that is unique to your business, (not just
a copy of someone else’s). Sketch your ideas out
on paper, so that when you contact your designer, you
already have a good idea of what you have in mind.
Decide what kind of web site it should be – will
it be an informational web site, a web site that will
continue to expand as you develop your business, or
an e-commerce web site with a number of products for
which you accept online payments?
5. Technology – if you want to use advanced technologies
on your site, such as flash, shock wave, database integration,
make sure your designer is familiar with them and how
this may affect your site. They are often expensive
to implement and may not be needed for you to set up
your business on the Web.
6. Contact – make sure you can contact your designer
by phone or email and see how long it takes for them
to get back to you. If it takes a long time, then this
may be an indication of what your future contact with
them will be like. Are they helpful, professional, polite
and friendly? I find this always makes it easier to
do business and less stress on yourself, since you will
want it to be a strong and stable relationship.
7. Free Consultation – once you have a plan of
what you want on your web site (or even if you don’t
know where to begin), contact your designer for a free
consultation before you set up a contract. Most web
designers will give you a free consultation if they
want your business. This will help you clarify what
is expected in the design process.
8. Contract – make sure you have a contract drawn
up before you make any payments. It should state clearly
what is included in the contract e.g. how many pages,
links, graphics? Does it include marketing and maintenance
of your web site? If not, then ask what does it cost
for the extras. This can include domain name registration,
scanning and optimization of graphics and hosting. (see
my article “how to choose a hosting company”
at www.isitebuild.com/webhostarticle.htm)
9. Pricing and Payment – surf around the Web
to compare prices, so you have a ballpark figure of
what to expect for your site design. You can expect
to pay half of the full price up front. If they are
professional, they will accept credit cards for online
payments. Do the prices include submitting your site
to the main search engines? (This should be done by
hand if it is done properly). Don’t be misled
by those that say your site will be submitted to 3000
search engines by automatic submission software.
10. Testing – your designer should test your
site before it is completed. Will it look good in Internet
Explorer as well as Netscape browsers? What screen resolutions
can it be viewed in? It should be able to be viewed
in all resolutions. Without extensive testing, your
site may not look good to a large number of your customers.
11. Ongoing Support - support means that you know you
can contact them to get a prompt and courteous answer
to any question or concern you may have. Can the designer
grow with your web site? You may want to make additions
or changes to your site in the future especially if
your business is expanding. Does your designer have
other ideas for driving traffic to your site (since
this is the lifeblood of a successful web site)?
If you follow these 11 steps in choosing a web site
designer, you can then be reassured of great design
and support that will contribute to the ongoing success
of your business.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How To Build A Web Site That Sells
Copyright 2002 Herman Drost
Have you ever set off in the car to your destination,
without a map, naively believing you will find it? Several
frustrating hours later, you are either lost or stressed
out. Your wife says, “I told you so – you
should have brought the map!”
This is the same situation when you create a web site
without planning. The end result will be an unclear
purpose, target market goals and structure. Ultimately,
you will lose visitors and end up with little or no
sales.
Let’s look at each of these points:
Define Your Purpose
Without a clear purpose for your site, you will not
know where you are heading. For example, the purpose
of my design site, is to help small business owners
attain a presence on the web to sell their product or
service. Now, write down the statement of purpose for
your web site. Go over it a few times to make sure it
is crystal clear, otherwise your customers will be trying
to figure it out for themselves.
Research Your Target Market
Research the product or service you wish to sell. Find
out if it has a good niche (e.g. a product or service
nobody else has thought of), or it has a strong demand
(many people are searching for it). Do a search on some
of the major search engines (e.g. Yahoo, Overture) for
keywords and phrases that you think people will be using
when looking for your product. Now you can see what
kind of demand there is for it.
Realize many others may be competing to sell the same
product. Focus on something unique you may have to offer,
that stands out from your competitors. If you are setting
up an affiliate program, make sure it is a reputable
company with a good track record with lots of help available
from others involved. Don’t recklessly jump in
– you will waste a lot of time and money. This
is the number one reason, why many entrepreneurs give
up so quickly.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
For a more in-depth look at targeting your market,
read my previous article,
“How to Target Your Customers and Put Them in
a Buying Mood?”
Set Your Goals
Create a timeline for the planning, building and marketing
of your site. Without doing this, procrastination may
take over your goals.
Decide how much money you want to spend to create your
site and how much you will invest for its promotion.
Set a target date for what you want your site to achieve
- you can always adjust it if you need to. Make a goal
for how many visitors you will attract to your site.
What percentage of these will be actual sales? When
do you expect to make a profit?
Choose a Domain Name
Look up available domain names for your business, by
using Nameboy. (www.nameboy.com). They will provide
a large list to choose from. Keep your domain name as
short as possible, so it is easy to remember. Avoid
hard to spell words. Also avoid words with hyphens in
them, because people won’t remember to add the
hyphens and may end up at your competitor’s site.
Mindmapping – How to Sketch Out Your Site
This is the process that allows you to structure ideas
on paper in the logical order your brain follows, rather
than the linear process normally used when forming ideas.
Take one sheet of paper, draw a circle in the middle
– this is the subject of your homepage. From there,
draw branches, which have more ideas about your topic.
If any topics are related in a more definitive way,
create another branch off the current idea branch. Within
minutes, you will see your mindmap develop into a dynamic
sketch. You might find that a standard sheet of paper
is not enough to contain all your thoughts. Use more
paper, create more branches, and keep the ideas flowing.
With a clear purpose, definite target market, targeted
goals, a domain name and a clear structure, you are
now ready to begin building the pages for your successful
web site.
In my next article, I will discuss how to structure
your web pages, so they will be easy to read and navigate.
This will attract visitors to your site, and ultimately
make more sales.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Avoid Sloppy Web Site Copy
Copyright 2002 Herman Drost
If your web site visitor can’t find the information
on your web site, within 10 seconds or less, you will
lose them. Two of the largest factors that contribute
to this, are the lack of clear purpose and poor layout
of your web pages.
Let’s look at how you can resolve each of these
issues.
Lack of clear purpose – the first page of your
web site must have a clear title and description, which
immediately states what your site is about. (if you
need help to determine the purpose of web site, read:
“How To Build A Web Site That Sells”
You must include a clear benefit of your product or
service in your description. For example if you are
a web design company, your title may be “How to
Build a Web Site That Sells”. Your description
may be something like: “Let us save you precious
time and hassles, by designing a professional web site
that WILL sell your product or service”.
Realize many others may be competing to sell the same
product. Focus on something unique you may have to offer,
that stands out from your competitors. If you are setting
up an affiliate program, make sure it is a reputable
company with a good track record with lots of help available
from others involved. Don’t recklessly jump in
– you will waste a lot of time and money. This
is the number one reason, why many entrepreneurs give
up so quickly.
1. Alignment – There are 3 kinds of alignment
for your web page
– left side, right side and centered. Choose one,
then use it on
the entire page or even throughout your other web pages.
Don’t
try to mix alignments, because this will make your web
page look
unprofessional.
One such example, is to align all the text on your
page to the
left. This will create a strong edge and make it easier
for your
visitors to navigate and read. Avoid bumping up your
text to
the navigation bar or graphics. Create an equal amount
of space
between all the elements on your page. If they are bunched
up,
it will create a cluttered appearance.
2. How To Use White Space – Visitors do not appreciate
useless
clutter and masses of content on Web Pages. Most users
prefer a
page with well distributed content resulting in less
clutter.
Users quickly scan pages and the more that they must
scan
through, the more information they will miss.
This does not mean you should not provide a lot of
information.
Just do not provide it all on one page. Each page should
contain
approximately 50 per cent less text than a printed version
of
the same information.
If you have a lot of copy on your web site, try to
have only 4-6
sentences per paragraph. Split the page up into different
topics, with the subject title close to the accompanying
text.
3. Repetition – each page of your web site should
look like it
belongs to the same web site, the same company and same
concept.
For example, navigation buttons, colors, style, illustrations,
format, layout can all be part of the repetition that
unifies
the entire site.
4. Contrast – this is what draws you into the
page and pulls you
in. Pages that just have all text and no graphics, or
vice versa
and have no contrast can be very boring (unless it is
an
article or book). If elements on your page, such as
type,
rules, graphics, color, texture, are not the same, make
them
very different.
Be aware of what you want the visitor to focus on.
What will be
the first thing that a person will be attracted to when
that
person first enters your site? If your site is not well
organized, it will be difficult for your visitor to
find what he
is looking for.
5. Graphics – graphics should be used to illustrate
the benefit
of your product (this is why there is the popular saying,
“a
picture is worth a thousand words”). You should
use them to
enhance the experience of your visitor. If it does not
have a
clear purpose to be there (other than just to have a
pretty
picture on your site), don’t use it.
6. Spelling and Grammar – bad spelling and grammar
can destroy
the professional effect of your web site. Don’t
just use the
spell checker for correcting your copy. Read through
it yourself
several times or get a friend who is a proficient proof
reader
to check your work, before you launch your site for
the world to
see.
With a clear purpose and layout to your web pages,
your visitors
will easily find the information they are seeking, rather
than
your competitors. Doing this, will help to increase
sales from
your web site.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Calculate and Speed-Up the Download
Time of Your Web Site
Copyright 2002 Herman Drost
Have you ever experienced the frustration of waiting
for a web site to download, then giving up and moving
on to another? This is because most web users lose their
attention after 10 seconds.
If your site takes longer than this to load, you will
be losing
many visitors. This means that the web designer must
use images sparingly and choose file formats carefully.
How to Calculate Download Time
1. Check the size of the HTML file and any associated
images, files or programs. You can do this by right
clicking on the file or image and reading its properties.
For example, you may have a page that consists of 10
files, for a total of 84 kilobytes (KB).
For a more extensive explanation for calculating file
sizes,
see my previous article -
“How Much Hosting Space Do You Need?”
(www.isitebuild.com/hostingspace.htm).
2. Determine the speed of your network connection.
Some of the more common speeds are:
14.4 Kbps (kilobits per second) - slow modem speed 28.8
Kbps - typical modem speed for some users.
56 Kbps - typical modem speed for most users with a
dial-up connection.
1.544 Mbps (million bits per second) - full T1,
enterprise grade network line (equivalent of 24 phone
circuits).
3. For this example, we will use 56 kilobits per second
(Kbps).The connection speed and file size must be converted
to a common unit of measure for division: either bytes
or bits. Remember that 1 byte equals 8 bits. The connection
speed is already
defined in bits: 56 kilobits = 56,000 bits. To convert
the file size to bits, you should first convert it to
bytes (84 kilobytes = 84,000 bytes). Then convert the
bytes to bits by multiplying 84,000 by 8 (1 byte = 8
bits), which results in 672,000 bits.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
4. Divide the file size (672,000 bits) by the connection
speed (56,000 bits per second). The bits cancel out,
and the results is 12 seconds. This is the amount of
time it will theoretically take to download the Web
page.
Remember that the figure derived from these four steps,
is a theoretical measurement. It does not consider certain
factors, such as the fact that 56 Kbps modems rarely
operate above 50 Kbps. Nor does it consider network
overhead, such as noisy phone
lines, or network congestion.
Therefore the best way to determine how quickly users
can download your web sites pages, is to test them in
a real-world setting. For example, test your web site
by accessing it through a dial-up (i.e., telephone)
connection. That method will give
you a much more reliable estimate.
Factors that Affect the Download Time of Your Site
1. Optimizing Images - this refers to the process of
striking a balance between file size and image quality.
Your images should not be too large or have too many
on your web site. This will cause your pages too long
to come up in the users browser and they'll lose their
patience.
Of course, if you images are too poor (too small, or
with too low of a resolution), your site will be unattractive
and it won't matter how quickly the site loads. You
need to seek the perfect balance between size and quality.
2. File Formats - There are two main types of images
on the Web:
GIF (Graphics Interchange Format) and JPEG (Joint Photographic
Experts Group) files. Each format compresses files differently
and each exhibits different strengths and weaknesses.
The GIF standard works better for images with large
areas of similar, flat colors, such as logos, drawings
and diagrams.
JPEG is better at compressing photos and images with
complex and widely variable colorings. Within each standard,
you can adjust quality settings. Those adjustments will
affect file size and image appearance.
The key to optimization is to try out all the different
options to achieve the smallest possible file size while
maintaining an acceptable level of quality.
3. Reuse Your Images - increase the efficiency of your
site by making intelligent use of the fact that browsers
usually cache (save for later use on the user's hard
drive) downloaded files, including Web site images.
Therefore, when a page calls for an
image that's already been used, it loads and displays
much more quickly on subsequent page views because it
is coming from a local hard drive rather than the Internet.
Therefore, one of the wisest things you can do is to
reuse images; whenever possible, use the same logo on
multiple pages, the same graphic buttons and the same
graphic dividers. After the first time a user loads
these elements, they'll pop up very quickly on subsequent
pages.
4. Text - text on pages loads far more quickly than
images, permitting you to convey more information more
efficiently. Don't have a page on your site that makes
the user scroll down several times. Too much text on
one page will slow the download
time of your site. It will also make it very tiring
for your visitor to read all your text.
5. Web Site Enhancements - there are hundreds of other
elements you can choose to include on your site. This
may include such things as: search boxes, pull down
menus, opinion polls, hit counters, rotating banner
ads, associate programs etc. You can have a multitude
of options to add virtually unlimited functionality
(and clutter) to your web site.
To sort out if you need any of these extras, ask yourself
the question:
How does it help me accomplish the purpose of this web
site?
If you can't think of a good answer, chances are you
don't need the extra element. Make sure they fit into
your site's overall aesthetics. Check how they affect
load times.
By reducing the download time of your web site, visitors
will return because they remembered how fast it was
to find what they wanted (rather than the slower site
of your competitors). This may ultimately increase the
number of your sales.
=======================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and
author of iSiteBuild.com
Low Cost Hosting and Site Design
(http://www.isitebuild.com/sitehosting.htm)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Layout Your Web Pages
Copyright 2002 Herman Drost
Searching for the right information on a web page can
be a very frustrating experience. Have you ever encountered
web pages that are so cluttered with information and
graphics, that you leave, totally exasperated?
The same situation applies if you have a web site designed
with animated graphics, pop ups, revolving text etc.
It may dazzle your visitors, but if it takes more than
10 secs to load, you will lose them. See: How to Calculate
and Speed-Up the Download Time of Your Web Site
Start With a Simple Plan – to design a good web
site you must start with a good plan. Create a list
of all the information and graphics you want to include
on the site. To see how to sketch out your site, see
my previous article: How to Build A Web Site That Sells
Factors That Effect Web Page Layout.
1. Screen Resolution – Most Internet users these
days use a 15-17 inch monitor. Therefore, use a screen
resolution of 800x600 pixels when designing your web
page. Some still use 13-inch monitors and many have
large monitors over 17 inches.
The way around this is to use percentages when designing
your web page. The web page will then resize to the
particular resolution the visitor is using. For the
designer, this takes more work than using a fixed width
for your pages. If you want to design your pages with
a fixed length, then it’s best to use a resolution
of 800x600 pixels.
2. Contrast – strike a good balance between graphics
and text.
It is easy to have too much text on your site (unless
it is a
book or an article). Visitors usually scan web pages
so make
sure you use short sentences, small paragraphs and it
contains
small headings. See: How to Avoid Sloppy Web Site Copy
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
Too many graphics on your web page may create too much
clutter.
It also slows the loading time of your site. Only use
graphics
to emphasize the points you are trying to make. Remember,
a
graphic can also distract people from the message you
are trying
to convey.
3. Color – Have you ever gone to a site where
there is a dark
background and dark text? You can hardly read it. Try
to stick
to a light background with dark colored text. For example,
a
white background with black text is still the easiest
to read.
Beware of using a dark textured background. The text
will become
unreadable. The color should not distract your reader
from the
main points of your site.
4. White Space – this is the space between the
elements on a web
page. If there is none or too little white space, your
web page
will appear disorganized. Try to make the page look
clean,
simple, easy to read and navigate.
5. Navigation – the key to good navigation of
your site, is for
your visitor to find the information quickly and easily.
It must
be clear and simple. If the presentation and organization
of the
content is vague, the visitor will get lost, frustrated
and move
on to another site.
The home page is usually the web page that contains
all the
initial navigation to your web site. However, planning
your
homepage is only a small fraction of your job when designing
your navigation. The deeper you can plan your site’s
structure
and navigation, the more successful your site’s
navigation will
be.
With clear, clean, simple and attractive layout of
your web
pages, information is easily retrievable. Your visitor
will have
an enjoyable experience and wish to return.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Create an Effective Web Site Navigation Structure
- Part 1
Copyright 2002 Herman Drost
A ship captain traversing the open seas without a good
navigation system will surely get lost. Maybe he’ll
strike sharp rocks and his ship will sink. A visitor
who arrives at your site and can’t navigate it
for the information they seek, will surely get lost
also and leave in frustration. Your ship (your web site)
will also sink if this continues to happen.
Good site design means a good navigation structure
for your web site. This means the visitor can find the
information with ease.
Put yourself in the shoes of your Grandmother. Would
she quickly and effortlessly be able to find the information
she wants, or know what to click on to make the purchase?
Don’t think that just because it is easy for you,
it will be easy for others.
Visitors should not need to click more than three times
during their navigation, to find the information they
are searching for.
1. Navigation Styles
These can range from navigation buttons, navigation
bars,
plain text links, fancy animated graphics or drop-down
select menus. You can also use illustrations, photographs
or graphic images to show your visitor around. For example,
an image map contains one graphic with different “hot
spots”(invisible buttons) that link to other pages.
2. Primary and Secondary Navigation
Primary navigation consists of the navigation elements
that are
accessible from most locations within the site.
Secondary navigation elements allow the user to navigate
within
a specific location. For example, many sites have a
page that
offers information about the company. The primary navigation
element may be an About Us link.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
Once the user arrives on the About Us page, there will
be other
links (secondary links), which navigate within the About
Us
page.
These could be links to Press Releases, Corporate Locations,
Investor Information and so on. These links are secondary
navigation elements because they are relevant to the
About Us
page but not the other pages of the site. Therefore,
these links
will not be found in other areas of the site.
3. Guided Navigation
This is a popular technique, in which you guide the
visitor
through your site. Links are provided for the next step
and
establishing links that keep the users on track continues
the process. These links should supply the necessary
information, as well as an alternate course clearly
marked to
allow the visitor to exit. For example, an online purchase
should lead the user through shipping information, then
on
to payment information, then to receipt information.
4. Creating a Navigation Action Plan
Determine goals and needs of your audience Decide what
the
purpose of your site is and who your target audience
will be.
For more in-depth information on this subject visit:
“How to Target Your Customers and Put Them in
a Buying Mood”
(www.isitebuild.com/target.htm)
Learn from navigation that works Visit several successful
sites
that show good navigation e.g., Fedex.com. These sites
show good
navigation planning.
Generally, good navigation includes several characteristics:
Offers easy to learn elements
Remains consistent
Provides feedback
Appears in context
Offers alternatives
Provides clear visual messages
Offers clear and understandable labels
Remains appropriate to the site’s purpose
Supports visitors goals and behaviors
Providing feedback has the biggest impact on users.
Navigation
should tell people, where they are and if possible,
where they
have been. Visitors should also be able to easily determine
linked or clickable material.
They need to know whether they successfully made a
purchase,
conducted a search, or completed some other task.
Navigation that allows visitors to find information
easily and
quickly will contribute to your web site’s success.
Ask your
grandmother (or someone who is not familiar with the
Web) to
navigate your site. If they can find the information
they want
within 3 clicks, your navigation structure must be a
success.
Congratulations!
Part 2 of this article will show “How to Design
Your Navigation
Structure and Common Navigation Mistakes to Avoid”.
=========================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Web Site Design and Low Cost Hosting
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Create an Effective Web Site Navigation Structure
-Part 2
Copyright 2002 Herman Drost
Searching for information on the Web has recently become
like a mine field. You find the site you want, only
to be greeted by pop-ups when you enter, pop-ups when
you are on the site and pop-ups when you leave. Other
sites use a flash introduction, make you wait several
minutes (which feels like hours), until the page finishes
loading. Heck, you just want to find the information
as swiftly as possible without having to watch out for
these mine fields.
A fast and simple navigation structure is essential
for a successful web site. Visitors must have a good
experience at your site, if you want them to return.
How to Design Your Navigation Structure
1. Sketching it out.
Part 1 of this article (www.isitebuild.com/navigation),
discussed the different navigation styles and a navigation
action plan. Now let’s begin sketching out your
site.
Take one sheet of paper, draw a circle in the middle
– this is the subject of your homepage. From there,
draw branches, which have more ideas about your topic.
If any topics are related in a more definitive way,
create another branch off the current idea branch. Within
minutes, you will see your web site develop into a dynamic
sketch. You might find that a
standard sheet of paper is not enough to contain all
your thoughts. Use more paper, create more branches,
and keep the ideas flowing.
Once you have sketched out your site, use separate
sheets of paper for each web page. Make sure you define
a heading for each page and decide how it links to the
other pages. This exercise will help you to decide how
you want visitors to navigate through your web site.
2. What navigation style to use
Decide on which navigation style you will use. This
could be a navigation bar across the top, a navigation
bar on the left (the two most common styles), or an
image map (an image divided into separate links to other
pages).
If you use graphical icons or other graphics instead
of text, then include the text links elsewhere on your
site. This is because some people browse with their
graphics turned off and this technique allows them to
still see and use the links.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
Hosting Plans from $30/Year
3. What colors should you use?
If you have a dark background, with dark graphical icons
or text, your links will be invisible. When using rollovers
(links that change color when you move the mouse over
them), be careful that the color of the changed link
will not disappear, in case your visitor wishes to return
to that link.
4. Navigation alignment
Some sites have the navigation icons or text links lined
up against the side or top of the page. Leave an equal
amount of space on either side of your navigational
links and make sure they are aligned with each other.
5. Repetition and consistency
If the visitor has to search for the buttons on every
page, or if the links have different words, techniques
or icons, they get annoyed. Don’t you?
Navigation elements from page to page should be repeated
and consistent throughout your site. If a visitor sees
a navigation system on every page, it will add to familiarity
and orientation.
6. Check your links
Have you ever followed a navigation link, only to find
you can’t get back to the home page? You may have
clicked on a link, only to get a page error –
the page does not exist! Particularly if you have linked
to a web site outside of your own. With time that site
may have disappeared or changed its address.
Make it easy for your visitor to find their way around
your site, by testing out where your links go and that
each of them work. You should do this periodically to
avoid the problem of dead or broken links.
7. Testing your navigation structure
You’re overjoyed that your site is finally finished,
so you tell all your friends and family about it. They
politely say it is great, but ask you what it is about
and how can they find their way around.
Once completed, you need to step back (go outside of
the box you have been in) and get others to navigate
your site – preferably your
Grandmother or someone that has never been on the Net.
This is called a usability test. If they have no problem
to discern the purpose of your site and can navigate
it with ease, you are ready to publish it for all the
world to see.
Design your navigation structure with the visitor in
mind. Eliminate any obstacles (minefields) that will
annoy and frustrate them, causing them to leave and
never wish to return. If you make it easy for them to
find the information they seek, you will gain many happy
customers.
=======================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner
and author of iSiteBuild.com
Free Consultation for Site Design
Hosting from $30/year
(http://www.isitebuild.com)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
How to Test Your Web Site Usability
Copyright 2002 Herman Drost
When designing a web site, you are never sure how it
appears to
all people. This is because people use different browsers,
resolutions, computers and connection speeds to the
Internet.
Your site may look good with your browser, but absolutely
horrendous in other browsers. This is why you should
test the
usability of your site, before you expose it to the
world.
What is usability testing?
This indicates the ease with which folks can use your
web site.
Let’s look at a few usability factors.
Who is winning the browser war?
Here are the browser statistics:
39% Internet Explorer 6.0
51% Internet Explorer 5.0 2%
Internet Explorer 4.0
3% Netscape 4.0
A few years ago Netscape was the dominant browser,
however
Internet Explorer now has 80% of the market. With the
introduction of Netscape 6.0 and 7.0 (their latest release),
this may eat a little into IE’s market.
The latest browsers support the latest designing technologies,
such as Cascading Style Sheets (CSS1, CSS2) and XML.
Installing different browsers
Test your web site in different browsers, so your web
site
can be seen by as many people as possible.
Internet Explorer
Download Internet Explorer 5 and 6.
The way to do this is to either have each one installed
on
a different computer, or to have 2 operating systems
on your
computer. You can do this with partition magic.
Trying to install IE 5 & 6 on the same operating
sysytem doesn't
work. One overrides the other.
Netscape
Download NN 4.79 and 6.2. You can install them on the
same operating system as Internet Explorer.
Other browsers
The Opera browser
This is often known as the “third browser”
after Internet
Explorer and Netscape. It has received international
recognition for being faster, smaller and more standards
compliant than other browsers.
Kmeleon
This is a simple, efficient, fast browser that loads
very quickly.
This is because it is an unbloated browser. If your
web site
looks good in this browser, it will look fine in Netscape.
Subscribe FREE to
Marketing Tips Newsletter
Receive your FREE trial download of this ebook for
subscribing:
Name
Email
How to Choose a Hosting Company
How Much Hosting Space Do You Need?
Hosting from $30/year
Test for different resolutions.
Just because your site looks great with your computer
set
to a resolution of 800x600, it doesn’t mean it
will look good
at a 1024x768 resolution. Often your web site may be
hard
to read or aligned to the left or right of the screen.
Here are the statistics:
1024 x 768 resolution 44%
800 x 600 resolution 50%
640 x 480 resolution 3%
To test your web site in different resolutions, go
to start –
settings – control panel – display –
settings – slide the
pointer to the resolution you want.
Test for connectivity speeds.
You may be proud of your fast DSL, satellite or cable
connection to the Internet, however still most Internet
Users still connect via the modem. Connectivity speed,
determines how fast your site will load. If it contains
many graphics, which have not been optimized for the
Web, you
may rapidly lose the patience of your visitors. They
will click
elsewhere.
Sources
Web Browser Statistics
http://www.w3schools.com/browsers/browsers_stats.asp
http://webdesign.about.com/cs/statistics
http://www.upsdell.com/BrowserNews/stat.htm
http://www.webreference.com/stats/browser.html - daily
summary
of browser statistics.
http://www.anybrowser.com - tests your site in different
browsers
(not always reliable).
Browser Downloads
Internet Explorer
Netscape
Opera
Kmeleon
Checking your web site’s usability can generate
more traffic to
your site. It may take you a little extra time and patience,
but you can be assured you are reaching and pleasing
a wider
audience.
==================================================
Herman Drost is a Certified Internet Webmaster (CIW)
owner and author of iSiteBuild.com
Low Cost Hosting and Site Design
(with FREE comprehensive web traffic analysis)
Subscribe to the “Marketing Tips” newsletter
for more original
articles. subscribe@isitebuild.com
|
