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