Web Site
Building
If you're doing
business on the internet, one of the most important aspects of your businesses
success is your web site. If your web site doesn't look professional, no
matter what product you're offering, your chance of success will be minimal.
Take your time and make sure you understand the full picture before you begin.
Before we begin this tutorial, the absolute best advice I can offer is
this…If you really want to succeed on the Internet in the shortest amount
of time, I highly recommend Ken Evoy's highly acclaimed online business
building system,
Site
Build it. This highly professional system was specifically designed to
enable anyone to quickly and easily create a successful online business -
from building and hosting your web site, to publishing an ezine, developing
products and marketing. The
Site
Build it system nearly guarantees your success. All the tools, all in
one place, and all for one price, are all tied together into a straightforward,
integrated, step-by-step process that succeeds.
The appearance
of your website is one of the most important aspects of your success. Your
product or service will literally be judged by the appearance of your
website.
Poor web design is one of the leading causes of small business failure. There
are literally thousands of home-based Internet businesses struggling to make
a living online. The problem is, they don't take the time to learn how to
properly design their sites.
Web Design Guidelines
Your main page
should specifically let your visitors know exactly what you're offering.
If your potential customer can't find your product or service, they definitely
won't waste a lot of time looking for it. They'll go on to the next site
and probably never return. They're visiting your site for a specific purpose.
They want something your site offers.
Create a page to display your Privacy Policy in regard to the personal
information you collect from your visitors. Explain your reasons for collecting
the information and let them know if the information will be given to or
shared with a third party. We'll talk more about this later.
Create a page about you and/or your company. Include your name, company name,
photograph, biography, address, phone number and email contact information.
Display your copyright information at the bottom of each page. It's best
to include both the word Copyright and the ©
symbol, as some countries don't
recognize one or the other. Your copyright might look like
this:
Copyright © year Company
Name
All rights reserved. |
Keep in mind,
your visitors may enter your site from pages other than your main page. Make
sure you include good navigational links on every page. Place your navigation
links together at the top, bottom, left or right side of the page. Use
tables to neatly align your links and maintain a nicely organized
and uniform appearance throughout. Try to keep the number of clicks required
to get from your main page to any other page on your site down to three or
four and place your company logo on each page.
Use caution when selecting your background and text colors. Busy backgrounds
make text difficult to read and draw the attention away from the text. In
addition, always be consistent with your background theme on each page of
your site.
Select your colors very carefully, as colors affect your mood and will have
an affect on your visitors as well.
Bright colors such as yellow and orange, cause you to become more cheerful
or happy, while colors such as blue and purple have a calming effect. Dark
colors such as brown and black have a depressing effect. A good rule of thumb
is to use colors based on the type of effect you're trying to achieve.
ALWAYS check and double-check your site for spelling and grammatical errors,
and make sure your images and links are all working properly. If you have
several errors, this will make your site appear to be unprofessional. If
you are designing your site using an HTML editor, use spell check.
If you must use frames, use them sparingly. Frames, if not used properly,
can make your site look unprofessional. Avoid making your visitors have to
scroll from side to side to view your content. This can be very irritating
and cause your visitors to leave. In addition, it is difficult for Search
Engines to index sites made up of frames.
If you must use Java on your site, use it sparingly. Consider using JavaScript
instead.
If you're using pop-up windows to display special offers or ezine subscription
info, try to use a JavaScript that utilizes cookies. That way the window
will only be displayed to your visitors the first time they visit your website.
You can find one here.
View your website through different browsers and screen resolutions so you
can see how your visitors will view your site.
Click here to test
your site's browser compatibility.
Always be consistent when using font styles and sizes. Avoid using large
font sizes, as this looks very unprofessional.
Never use tables with standard borders, as they look very unprofessional.
If you'd like to use tables with borders, consider using a color border that
is size one or two. You'll learn more about tables and borders later.
Continually add new content to your site. Give your visitors a reason to
keep coming back.
Web Design Tips
When designing
your website's main page, instead of trying to cram all of your information
into one page, consider creating sections. These sections can contain highlights
of your information with a link to further information. You can set your
sections up in tables with colored heading sections for information
such as news, articles, products or whatever you'd like.
It's much better to keep your main page down to the most essential elements.
You can then use links to additional pages to provide the detailed information.
A good rule of thumb is "less is more." In other words, keep your main page
as small as possible, while at the same time, include your most important
elements.
To enhance your page, you can format your text using bold headlines, colored
table cells, and graphic bullets and/or arrows.
If you use the same graphic bullets and arrows throughout your page, you
can enhance your page's appearance, but you won't add any additional time
to your site's load time. When you reuse an image, your image only has to
load once. When the image has loaded, it will instantly be displayed in all
of the other locations.
Web Design Mistakes
Poor load time
Poor overall appearance
Spelling/Grammar mistakes
No contact information
Poor content
Poor navigation
Broken links and graphics
Poor browser compatibility
Large slow loading graphics
Too many graphics
Pages scrolling to oblivion
Multiple use of animated graphics
Animated bullets
Too many graphic and/or line dividers
Busy, distracting backgrounds
Multiple banners and buttons
Poor use of frames
Large fonts
Pop up messages
Over use of Java
Poor use of tables
Poor organization
Different backgrounds on each page
Over powering music set to AutoPlay
Confusing
Too much advertising
Large Welcome banners
Multiple colored text
Text difficult to read
No Meta tags
Multiple use of different fonts
Under construction signs
Scrolling text in the status bar
Large scrolling text across the page
Poor use of mouse over effects
Take your time and design your site very carefully. It may take you a little
longer, but it will be well worth the extra time in the long
run.
Getting Started
If you're new
to web page design, let's first begin with how a web page is created.
A web page is created using a language called, Hypertext Markup Language,
better known as HTML. You can write your own HTML within a plain text editor,
such as Note Pad, or use an HTML editor, which will write the code for you.
HTML codes, also referred to as tags, are enclosed by the lesser than (<)
and greater than (>) brackets and may be written in capital or lower case
letters.
The opening bracket is followed by an
element, which is a browser command, and ends
with the closing bracket.
<font size=2>
An element may also be followed by
attributes, which are words describing the
properties of the element, and further instruct the browser.
<font size=2>
Attributes are only contained in the opening tags to the right of the
element and are separated by a space and followed
by an equal (=) sign.
The value follows the equal sign and is enclosed
in quotes.
<font
size=2>
Basic HTML Document Structure
Below is a very
basic HTML document structure. It contains the opening HTML tag, the TITLE
tag enclosed between the opening and closing HEAD tags, the opening and closing
BODY tags and the closing HTML tag.
All of your text, graphics and any additional HTML codes will be placed between
the <BODY> and </BODY> tags.
<HTML>
<HEAD>
<TITLE>Your Web Page Title</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML> |
Each HTML tag
above contains an opening tag and a closing tag. The opening tag is written
with the command enclosed with brackets.
Example: <HTML>
The closing tag contains a forward slash followed by the command enclosed
with brackets.
Example: </HTML>
The opening tag is telling the browser to begin the specified action and
the closing tag is telling the browser to end the action.
The proper way to write HTML is to place your closing tags in sequence with
the opening tags.
This is an example of a properly written code:
<B><I>Example</I></B>
This is an example of an improperly written code:
<B><I>Example</B></I>
Creating an HTML Page
Begin writing
your HTML by creating your document's basic layout. Copy and paste this code
into your text or HTML editor.
<HTML>
<HEAD>
<TITLE>Your Page Title</TITLE>
</HEAD>
<BODY>
This area will contain everything that will be visible through a web browser,
such as text and graphics. All of the information will be HTML coded.
For a complete list of HTML codes and examples, visit our
HTML Codes Chart.
</BODY>
</HTML> |
<HTML>
- Begins your HTML document.
<HEAD> - Contains information about the page such as the TITLE, META
tags for proper Search Engine indexing, STYLE tags, which determine the page
layout, and JavaScript coding for special effects.
<TITLE> - The TITLE of your page. This will be visible in the title
bar of the viewers’ browser.
</TITLE> - Closes the <TITLE> tag.
</HEAD> - Closes the <HEAD> tag.
<BODY> - This is where you will begin writing your document and placing
your HTML codes.
</BODY> - Closes the <BODY> tag.
</HTML> - Closes the <HTML> tag.
For a complete list of HTML codes and examples, visit our
HTML Codes Chart.
Saving an HTML Document
Once you've written
some HTML, you will need to save your document with an htm or html
extension. If the page you’re saving is the main or opening page
of your web site, it must be saved as, index.htm or index.html. When you
acquire your own domain, your server will look for a file called index when
your link, http://www.yourdomain.com/ is clicked on. If you're saving a page
other than your main page, try to save it using the page's primary keyword
phrase for higher Search Engine ranking.
Your file name should look something
like this: index.htm
Viewing an HTML Document
If you’re
using a text editor to write your HTML, and you'd like to preview your work,
you must view your new page through your web browser. Open your web browser
and go to "File" - "Open" on the browser toolbar and then "Browse" through
the folders to locate the new page you created. Double click on the file
to select it and click on "OK"
WYSIWYG Editors
If you decide
to use a WYSIWYG (What You See Is What You Get) editor, which is highly
recommended, here are a few of the most popular:
Coffee Cup
DreamWeaver
HotDog
HotMetal Pro
HomeSite
Microsoft
Frontpage
Although this mini tutorial provides you with a basic overview to assist
you in creating your own web site, there is much more to creating a successful
web site than simply learning the basics. For a complete step by step web
design course, and over fifty free web page templates, visit my
Web Design Mastery
site.
To your success!
Web Design Information:
Web
Development
HTML
Codes
HTML
Tips
Javascript
Snippets
216
Safe Colors
Symbols
Web Design Articles:
Selecting
a Quality Domain Name
Selecting the Best Web Design Language for Your
Project
Bring
Your Web Site to Life With PHP
The
Birth of a Professional Web Site (10 part series)
Increase
Your Traffic by Recovering Your Lost Visitors
Using
HTML Tables to Format Your Web Page
HTML
Forms -- Back to the Basics and Beyond Part One - Basic Forms
Tutorial
HTML
Forms -- Back to the Basics and Beyond Part Two - Advanced
Forms
HTML
Forms -- Back to the Basics and Beyond Part Three - Form Tips &
Tricks
35
Deadly Web Site Sins that will Kill Your Business!
Selecting
A Quality Web Host
Mini-Sites
-- Highly Targeted Sales Generators
Spice
Up Your Web Site with JavaScript
Use
CGI to Automate Your Web Site
Give
Your Graphics A Professional Look without the Price
Use
JavaScript to Dynamically Update Your Website
10
Website Essentials to Increase Your Sales
Is
Your Domain Name A Trademark Infringement?
Steps
to Optimizing Your HTML Codes
The
Secrets to Building a Successful Website
Additional
Tutorials:
Creating an Ebook
Work at Home
Opportunities
Internet Marketing
Strategies
Internet Marketing
Tools
Developing
an Internet Business
Developing
a Professional Web Site
Free Content
Webpage Optimization
Hosting Your Site
Promotion
Internet
Marketing
Building Your Site
Listing Your Site
Internet
Advertising
Developing Traffic
Web Development
Strategies |
|
