Foreword

The idea of building a web site is not new. The idea of wanting one is far from rare. To start with a good site on the first try, planning is essential. Unless you have plenty of time to design a site over and over, identify what needs to be done to make it right and save as much time (and lost hair) as possible.

What It's About

The first thing is to decide on a theme for the site. What topic will it cover? What information do you have to share about the subject? How many pages are required to cover each issue? Will there be diverse sections or just one? Do you need several graphics or just a logo? Every section and page on the site should be a continuation of your main theme. Everything on the site should be a reflection of that theme. Even though subject matter may change from page to page, it should still be related to the main theme of the site in some way.

How Many Pages

Make a list of ALL topics to be covered on the site. Take that list and break it down into the number of pages you will need to cover the topic well. Use a word processor for your text, as it would be on individual pages. Try to keep the length of the pages no more than two or three full screens. What you see when you look at the initial page without scrolling is one screen. Visitors lose interest easily if they have to scroll very far.

Making a pre-list of all files (pages, scripts and graphics) will also help prevent incorrect revised links and associations. I use Microsoft Excel to maintain a list of what goes on each page. This helps when you want to get organized for upgrades. You know what is safe to delete and what has to be saved. As the site ages it is easy to forget what a particular file is for if it isn't used often.

Navigation

Now that you have a good idea how many pages will be on the site, it's time to decide on a navigation system. Simple navigation should be the foundation of every good site. If your visitors can't find your pages they will never see them. It's a good idea to make every page of the site accessible from every other page. If your site is large, that can mean numerous links that become cluttered if an understandable navigation system is not deployed. Whether you use simple text links, mouseovers with images, or even go for an elaborate scripted system is up to you. Whatever you choose, the system should handle every page of the site without confusing your visitors.

Colors and Fonts

Repeating, I believe every page should be an extension of every other. Colors & fonts, as well as subject, should be the basis for that extension. It gives a uniform feel while allowing subtle differences. When you choose the color and font for your main theme (your index page), that color and font should be continued throughout. This maintains consistency and adds professional appeal.

Naming Your Files

Keep the names of images and pages closely connected in order to find them at a later time. As the site grows, memory of names may escape you if care isn't taken in association. Example: A page titled "books.html" could have images of the books named "books-jordon.jpg" or "books_king.gif".

Section Folders

If you plan a large site with different sections about different concepts of your main theme, you could use a separate folder for each concept. This avoids clutter in the primary root directory. Folders for images and programming (*.swf, *.asp, etc.) are also a good idea. My home site has folders named literature, images, awards, graphics, photos, flash, and several others. I am able to find what I need quickly and easily without a major search through thousands of files.

Tech Stuff

It is important to understand what technology is required for your site to operate as designed. If you use forms, a shopping cart or search, then you will need scripting to make them function. If you aren't a CGI programmer there are many resources that can assist. Perhaps you use Miva XML or DHTML. Also ensure the server you choose can handle the file extensions of the programming.

If you plan to use large databases or if large files will be downloaded by your visitors, you must verify the server you select can handle the bandwidth requirement. Many servers have limits not only on the amount of data you may store, but also for the network bandwidth utilization.

Where to Build

Finding the right server to upload your work can be as important as the design. Some servers have high download speeds that will make large pages load faster. Most have different capabilities in handling file extensions. If disk space will be a factor, you will find servers that offer anything from one page to unlimited space for prices ranging from free to several thousand dollars a month.

There are even hosts now that offer free web space with no advertising. This is worth considering because you will find the hosts that inject pop-up interstitial ads on your site will create unintended drawbacks. If at all possible, I advise finding a server that does not force you to have ads on your site.

It is very important to read the fine print of any host you may use. Some free sites obtain the right to use any and all of your work when you agree to their service, even though the copyright for that work belongs to you. They have the right to use your property without any compensation to you. They have the right to use the elements in any way they see fit. So be very careful what you load to your site if you discover conditions for hosting.

The Design

You now have an idea what you want on your site, where you want it to be, and how you want it to work. It is time to create the actual design using all this information. A friend taught me an important shortcut for getting the design right the first time. The first thing I do is draw a crude outline on paper. Then I use an imaging program to render that drawing on the computer. I use the image to make the first of two templates that will help put the final touches on a design.

In your imaging program construct a new file the size of an open browser window. My browser uses the toolbar across the top and I view my computer at 800x600. So I make my files 800 pixels wide by 450 high since that is the size I see in my browser window. I use this new file to represent the area that will be my page in a browser and it becomes my Image Template.

The Image Template

Make the background color of the template the same color you want on your site. Place your images on the template the same way you would want them on the page. Place your text and any other objects you would want on the model. The result will be your main Image Template. It should look like a screenshot of a web page. This image is an example of how I worked out my latest design using this technique. You can use the template to build the actual images that will go on your page. Simply crop them from the template. Using your Image Template will help you see how to set the spacing on tables and other HTML basics as you make your next template.

The HTML Template

After I finish the Image Template it's time to create the HTML Template that will help me layout each page of the site. The first thing I do is to put the colors, fonts, head tags, logo and tables in place. Then I build the navigation system into the code. I name this page Template.html and use it to create all the other pages.

After this, you can copy and paste the content from a text or document file into the HTML Template and once you name it, you have a new page. Placement of images and objects may require adjustments to the basic template, but most of the work will already be done.

Have Fun

I hope this helps you create your own pages and makes the job as easy as possible. No matter how you build your pages, remember to have fun. It is important to like what you do; others will too.

Copyright © 2000 Maggi Norris, Nem5 Webmaggic Awards - All rights reserved.