Start your own e-commerce website

An effective website is essential to start your e-business. The are a number of critical

success factors that you should understand in designing your own website. These web design essentials have been explained below.

While Surfing the WWW, you have come across many hot sites. You might have wondered how you could design websites just like the ones that you had seen. This tutorial will show you how - from deciding on your site's content to finding a home for your site on the Internet. If you have any questions about making web sites that are not answered in this tutorial, please ask for help by sending me an e-mail.

WEBSITE CONTENT

The most important step in web creation is deciding on the content. You can have a personal home page that describes your background and interests. Or you can have a site with all the short stories you have written. More importantly make sales from your website and make money. You can leave a legacy of anything to the world through your website. The critical thing is that your website should be on a subject that you are interested in.

Remember that your web site must have content i.e. it should have a message to deliver. A website with fancy graphics may be cool but will not draw any visitors because there are plenty of cool sites with content. Other sites I have seen had many links, but no actual information. If you have this type of strategy please give it up because people on the net are looking for information not links. (They go to Yahoo, Alta vista etc. for the links.) 
Preparing the Content
How do you decide what to put on your web site? It's best to start off with your own personal home page with links to a few of your favorite sites. Hopefully by this time you will become aware of what you want to put on your website. Once you have decided what you want the world to know about you or your business.

What is the goal of your web site? Is it to inform? entertain? attract customers? sell a product? Answering this question will provide you with direction and focus (This is the visioning stage of your website). If your setting up a commercial website it is a very good idea to formulate a vision statement for your website. After you have a vision statement you should then prepare a mission statement for your eCommerce website.

Determining the intended audience for your web site is important. A web site setup for people new to the Internet will be very different from one written for experts. If your web site is something besides a personal page, you might need to do some research. You can either do it the traditional way (using your library) or you can use Infoseek, Yahoo or any other search engine. After you have gathered all the information make a summary of what you want to cover.

ORGANIZATION AND STYLE

Begin by sketching out on paper how you would like your web site to look. If your web site  will contain many pages, a flowchart showing how the pages are connected might be helpful.

To get an idea of how you want your web site to look, it helps to look at other people's. Visit Media Metrix 500 to see an alphabetical list of the Internet's top 500 sites. Web Pages that Suck teaches what to avoid when designing a web.

Once you have a rough idea of what you want your web site to be like, you will be ready to find the graphics and other goodies you need and tackle HTML programming. In the section below, there are some guidelines to help you out during this process.
Web Site Design Guidelines

1. Put the most important stuff near the top of the document. Some of these important stuff include the title of your page, the purpose of your page, and the date your page was last updated. This is so that people will look at the rest of your page.
2. Write clearly and be brief.
3. Do not overload your web site with graphics. Web sites with a lot of graphics take a long time to load up.
4. Organize your documents for quick scanning by using headlines to summarize topics, and by using lists.
5. Do not put too much stuff on one page. If a page is getting large, split it into separate pages. For example, your home page might have separate sections for the links, the guest book, and your personal information.
6. If your web site contains more than one document, make sure it is easy to navigate. You can do this by putting a table of contents at the beginning or end of each document. Another way is by using frames.
7. Avoid BLINKING TEXT. It attracts attention, but it is very annoying. There are better ways of emphasizing text, like BOLD and ITALICS.
8. Provide your e-mail address in a hypertext and/or graphical link. This will enable people to get back to you with comments and suggestions on improving your site.
9. Make your site accessible to as many people as possible, including those with text- based browsers and slow modem connections. The best way to learn how is by visiting Creating Accessible HTML

 

SPICING UP YOUR SITE

A web site with nothing but text would be pretty boring. Take advantage of the technology of the Internet and add some cool stuff to your site - graphics, audio & video, Java applets, web counters, guestbooks, and message boards.
Creating Your Own Graphics
You want to create your own graphics. Unfortunately, you have no artistic ability. Should you give up? The answer is a resounding NO. You can become proficient at creating graphics. First, download Paint Shop Pro. Next, go through at least one of these excellent graphics tutorials:

1. Tips and Tricks for Paint Shop Pro
2. Web Graphics Tutorials: Create Professional-Looking Web Graphics

Obtaining Free Graphics
You want to use graphics in your web site, but you are either unwilling or unable to create your own.

The solution is free graphics.

Before putting any graphic that you did not create yourself on your web site, check if it is freeware.
If it is not, obtain permission to use it. For more information about copyright laws, visit The Copyright Website.

1. "Steal" graphics from other web sites. Let's say you come across a web page with a really cool graphic you like. First, click on the image with the right mouse button. Then, a menu will come up. Now, click on Save this Image As.
2. Use either Alta Vista's Image, Audio, & Video Search or Image Surfer to find the images you want.
3. Use a scanner to scan in your graphics. To learn more about scanners, visit A Buyer's
Guide to Desktop Scanners. This tutorial tells you everything you need to know about scanners. It discusses how they work, what types are available, and the best scanning deals of the month.
4. Take advantage of custom graphics if you cannot find the image(s) you are looking for.
 High Power Graphics is a free custom graphics service for all webmasters. Their turnaround time is usually one week. Be sure to give a detailed description of what you want.
5. Capture screen shots (in Windows). Press Print Screen to capture the entire screen. To capture just the active window, press ALT + Print Screen. Next, start up your favorite graphics program and paste the image from the clipboard.

Audio & Video
There are various ways of including multimedia in your web site. The most common method is "link and load." That is, you link to the audio or video file, just like you would link to a picture file. When a visitor clicks on the link, the multimedia file will be downloaded.
Good places to find audio and video files:

1. Alta Vista's Image, Audio, & Video Search
2. Lycos Music: MP3 Search
3. Sony Music: Audio/Video
4. Internet Underground Music Resource
5. The Classical Music MIDI Archive
6. Music Video Clips

Java Applets
Using Java applets, you can include cool things in your web site like Antony's Java Clock.
Good places to find Java applets:

1. Cool Applets from JavaSoft
2. Gamelan: Earthweb's Java Directory
3. Applet Depot

Web Counters
You might want to know how many people visit your site. To learn how to add a counter to your web
 site, visit Web Counter or Fast Counter.

Guestbooks
In addition to knowing how many people visit your site, you might want to know something about your visitors. The way to do this is through guest books, which are forms that people fill out. Here are some
questions you can ask visitors to your web site:

What is your name?
What is your email?
Where are you from?
How did you find out about my web site?
Comments?

With Guestworld, you can add a guest book to your web site in a matter of minutes - for free.

Message Boards
By adding a message board to your web site, you can encourage discussion among visitors about
topics that interest them. They are kind of like newsgroups, but much easier to maintain. You can get
 a message board for free from InsideTheWeb.

CREATING HTML DOCUMENTS

Now that you have everything together (text, graphics, general idea of how you want your web site to look like), it is time to create the HTML documents. If you want a web site without learning HTML, there are many free web page services that have site-building tools to help you out. However, if you learn HTML, you will be able to build a better web site.
Learning HTML
Case Western's Introduction to HTML is the best tutorial for learning the basics of HTML in a few short hours. The Bare Bones Guide to HTML is the best HTML quick reference guide on the Internet. It is a concise "cheat sheet" that you can use to look up the correct forms of tags as you are creating web pages. Print out a copy of it and keep it in a handy place.

The good thing about HTML is that almost nothing is a secret. Let's say you come across a web page that does something that you wish you could do. You can learn how to add that particular feature to your web page by looking at the document's source to see how it was done. To do this (in Netscape), click on View in the menu bar. Next, click on Document Source. You can also save the HTML file on your hard drive and experiment with it. This does not mean you can copy a person's HTML code and call it your own.

Learn more about HTML and web site creation by checking out the following links.

 Also visit Ask Dr. Web. This site has pages and pages of tip about HTML, graphics, multimedia, and content.
HTML Editors
HTML is a pretty simple language, but it is very tedious. I created my first HTML documents using a text editor. This was very time-consuming because I had to type every single HTML tag in. I knew there had to be an easier way.

Eventually, I found it in the form of HTML editors. If you are surfing the Net with Netscape, you can bring
up Netscape Composer by clicking on the icon in the bottom right corner of your browser window (provided that you downloaded Netscape Communicator). Unfortunately, unlike Netscape, Internet Explorer does not come packaged with a free HTML editor. Fortunately, AOLPress is a good free editor you can download. Both of these WYSIWYG editors will make creating HTML documents as easy as creating word processing documents.
HTML Converters
HTML Converters convert documents to and from HTML. They are useful if you want to convert a long text document into HTML.

FINDING A WEB SERVER

You have created all the HTML documents you need for your web site. On your hard drive, the only people who will see your web site is you, your family, and maybe some friends.

To make your web site accessible to the world, you need to find a web server to store all your HTML documents. Your Internet service provider might provide free storage for your web site. If this is not the case, you can find information about free web space providers at The Free Site: Free Web Pages.

PROOFREADING

Now that your web site is on a server, you should take it out for a test drive. It might really help to get other people's opinions when proofreading your web site; they might spot some things you might miss.
Things to Check For

1. All your links work. If you have many links, it might be time-consuming to check all of them. This is where a web site analysis tool like Doctor HTML can come in handy.  In addition to checking if your links are valid, it checks your spelling, image syntax, document structure, table structure, and form structure.
2. Your site is easy to navigate, so that people can find what they are looking for.
3. Each page is easy to read. If you are using a background graphic, make sure that the text is readable.
4. There is enough whitespace around graphics, between text items, between bullets text, and between headings.
5. Each page loads up reasonably fast (on a 14.4k modem). If a page takes more than 30 seconds to load up, consider removing or shrinking the size of larger graphics. GIF Wizard is an online utility that will help you reduce the file size of your GIF files so that they load faster and take up less space in your homepage directory.
6. All the graphics are related to the content of your web site. In most cases, do not include an image just because it looks cool. Graphics that are out-of-place will distract visitors from the important stuff.
7. There are no spelling or grammatical errors.
8. All your information is correct and up-to-date.

Places to Get Your Web Site Critiqued for Free

1. The comp.infosystems.www.authoring.misc newsgroup is a good place to get your web site critiqued. Here, you can ask people to give their opinions on the design and content of your site.
2. You can also get your web site critiqued for free at either Sales & Marketing Technologies or Site Builder Resources.
3. Critique is a critique exchange program. In exchange for critiquing other people's sites, they will critique yours.
4. Ask your friends and family members to evaluate your web site.

ADVERTISING YOUR SITE

If you want people to visit your site, you have to advertise it. If you do not, nobody will visit
it no matter how good it is.

Before you start promoting your web site, here are a few preparations you should make. First, make sure that your web site has an informative title. Next, come up with a good description that is 25 words or less.
Search Engines
To find information on the Internet, most people use search engines like Infoseek or Alta Vista. If you want people to find your web site, register it with the search engines by visiting Submit-It. This site lets you register your web site with all the search engines at once, so you do not have to hunt each one down.

Before registering your site with the search engines, visit Northern Web's Search Engine Tutorial. This excellent site that explains how to create "search engine friendly" web sites. It discusses how search engines index documents, and how you can use that knowledge to improve your site's search engine position.
Banner Exchanges
The Internet Link Exchange and Looksmart Clicks are banner networks that advertise your site for free using banners like those that big companies have. In exchange for displaying other people's banners on your site, they will display your banner on other people's sites.
Newsgroups and Mailing Lists
Newsgroups and mailing lists can be valuable resources for promoting your web site. You can find newsgroups related to your web site's topics with Usenet Info Center Launch Pad, and mailing lists with E-mail Discussion Groups. Use a signature file each time you post to a newsgroup or send an email message. A signature file is a few lines of text added to the end of a message. Here is an example of a signature file that you could use to promote your web site:

Learn how to create a successful web site!
http://small-business-advice.org

When you send email to a webmaster asking for a reciprocal link, remember to include the title and URL of your site. Also include the title and URL of the site you want to exchange links with because many webmasters have more than one site.
Sites that have Links to Places Where you can Submit your Site for FREE

1. WebStep Top 100 is a list of the 100 best places to advertise your site for free.
2. Free Links: The Ultimate Web Site Traffic Builder categorizes directories, search engines, and links pages where you can list your site for free.
3. 2001+ Places To Promote Your Web FREE!! is another site you should check out.

UPDATING YOUR WEB SITE

Your web site is now on a server and people are visiting it. As time passes, some people will e-mail you with suggestions on improving your site. Read through these and make changes to your site if necessary. Also update your site if you have new information, corrections, or improvements. Remember to check for broken links periodically because web sites often move or disappear entirely.
Let Others Know that You are Updating Your Site

1. A "Preview of Coming Attractions" section. This lets people know what to look for on your site in the future. It will encourage repeat visits.
2. A "Last Updated" message near the top of your main web page and each subpage.
3. A "What's New" section, where you document the changes you make to your web site. This makes it easier for repeat visitors to see what you have changed.
4. Put a link on your main page to Mind-it and encourage your visitors to register. They will get e-mail prompting them to return whenever Mind-it detects an update.
5. Put a icon before new or updated sections. You might want to include a date with this information. Remember to remove the icon after a month or two

 

USEFUL TIPS AND TRICKS

Background

1. If you have Paint Shop Pro, here is a trick you can use to generate a good background quickly. First, open a new image file. Then, click on Image in the menubar. Next, click on Special Filters. Finally, click on Add Noise. Now, experiment with different settings until you find a suitable background.

Formatting

1. Do not use too many horizontal rules.
2. Use consistent layout. Place navigational information in the same place on each page. By doing this, people will know where to find the elements of each page, after 2 or 3 pages.
3. Using the single-pixel GIF trick will give you more control over the horizontal and vertical of elements on a web page than "normal HTML."
4. Using the invisible table trick will allow you to add "margins" to your web pages. It will also enable you to have multiple columns of text.

Frames

1. Do not use more than two frames - one for navigation and the other for the actual content.
2. If you use frames, include target = _top within hypertext links to external files. 

Graphics

1. Use inline graphics. Instead of linking to graphics on other servers, link to graphics on your own server. This will make your web pages load up faster.
2. Be considerate to people who have text-only browsers like Lynx, and those who have turned images loading off. Use the ALT tag for all your important images. In addition, some search engines index the text within ALT tags.
3. Use thumbnail graphics.
4. If you have many images that are unrelated to the content of your web site, you can place them in a separate "Art Gallery" section.
5. Include height and width attributes within images tags. This will speed up the load time for your page. It will also preserve your page layout if someone looks at it with image loading turned off. HTML Image Scanner is a design utility that updates all the <IMG> tags of a web site so they all contain WIDTH and HEIGHT attributes.

Links

1. Describe and organize your links. This way, people will be able to find what they are looking for. In addition, they will know what to expect when they click on one of the links.
2. Use e-mail links with the address in it because not all browsers support the mailto: tag.
3. Use specific link references. Instead of saying "Click here for newsgroups that accept new web site postings," you might say "These newsgroups accept new web site postings."
4. When linking to pages that are part of your web site, use local links, instead of remote links. For example, use <A HREF = "index.htm">, instead of <A HREF = "http://small-business-advice.org/index.htm">.
5. List file sizes for links that download files.

Miscellaneous

1. If your web site is graphics intensive, create an alternate text version of your web site.
2. Do not use every HTML extension in the book. Study the Enhanced for Netscape Hall of Shame for examples of what not to do.

 

MORE RESOURCES

 

Advanced HTML	Free Graphics
1. Background Colors teaches you how to change the color of the background, text, visited links, unvisited links, and active links. It also has the color codes for many different colors.	1. The Logo Shop is a place you can get a free logo designed especially for your home page.
2. Carlos' Forms Tutorial is a step-by-step tutorial on the creation and proper use of fill-in-forms.	2. Fairy Suryana's 3-D Library has free 3-D letters & 3-D graphics for your home page.
3. Sharky's Netscape Frames Tutorial is a guide on how to program with Netscape frames.	3. Free Web Graphics by Pam Bytes is a large graphic collection includes backgrounds (embossed and patterns), beveled and textured buttons, and coordinated web page themes.
4. Image Map Tutorial teaches you how to create image maps in three easy steps.	4. Lem Con One - Graphics Vault has hundreds of different graphics and backgrounds for use on your own web sites or for anything else.
5. HTML Tables Tutorial uses numerous examples to help you learn how to create tables.	5. Andy's Art Attack has free animated GIFs, backgrounds, icons, buttons, bullet points, arrows, HTML tips, graphic tips, and much more.
6. All You Want to Know about JavaScript is a great JavaScript tutorial site.	General WWW Resources
7. Matt's Script Archives offers free CGI scripts for guestbooks, random links, and many other cool stuff. In addition, it offers extensive help in installing the scripts.	1. Beginner's Central is a good site for people who are new to the Internet. It covers the basics in an easy-to-understand way.
	2. Your Complete Guide to Searching the Net - because the days when you could rely on a single search site for all your needs are gone.
Web Site Design	Web Site Promotion
1. The Yale C/AIM WWW Style Manual covers the principles of web site design thoroughly. Illustrations throughout the manual make the concepts easier to understand.	1. More Hits has useful tips for getting repeat visitors to your site, in addition to first-time visitors.
2. Beyond the Bones of HTML is an informative web site design guide. It discusses issues like screen layout, typography, and color choices.	2. Guerrilla Marketing Online is a weekly web magazine for small business, entrepreneurs, sales people and marketers of all kinds.
3. Net Tips for Writers and Designers is written for site designers, typographers, architects, screen writers, HTML hackers, and thrill seekers. It won runner-up in the 1995 Cool Site of the Year contest.	3. White Palm's Effective Banner Design many useful resources related to banners and banner advertising.
4. Guide to Web Style is a cookbook for helping people create better web sites.
5. Robyn's Road to Web Page Builder Resources gives a good overview of web site creation and present many useful links in a well-organized way.
6. Web Site Design Guide is an informative web site design resource guide.
7. The Sevloid Guide to Web Design is a collection of over 100 tips, tricks and techniques on every aspect of web design.