How to Make Your Web Site Look More Professional There are so many people out there making web pages these days. With the new Web Site and HTML editors out there you don't even need to know HTML (Hyper Text Mark-up Language) code to make one. Unfortunately, because of this, there are a lot of mediocre and inferior sites out there. Don't let your site be one of those! Read on for invaluable tips and tricks. Naturally, one's first homepage is usually fairly basic and elementary. As one goes on and learns tricks one's sites begins to have some useful substance and form. It takes some experience to make your page look the way you want it to look. Even with a no-code HTML editor there are basic design techniques that need to be followed. The following information is meant to serve as a starting point for thinking out new sites and improving your existing websites. I hope to point out the ways that most novices go wrong and suggest how to fix many of these basic programming problems. This information should be helpful for beginners and to those that have made their first pages and are ready for something more challenging and impressive.

Go to the source!

In case you haven't yet discovered this, you can see the HTML code of any page on the entire internet just by viewing the source code. In Netscape 3.0 you click on "view" in the menu bar and click on "page source" and voila' you are looking at the HTML code for that page. In Netscape 4.0 you can also "right click" and click "view frame source". If you are using MSIE, well, you're on your own! (Why the heck are you using MSIE?) If the site is in frames, you need to right click on each frame and then click on "open frame in new window" then you can look at the source for each frame. This is a great way to learn about frames.

Most good programmers will see things they like on different pages and copy some or all the HTML code. Then with a few minor changes and new text you can have particular look you liked on another person's site. Just changing the background and font colors on a site can be like night and day!

Categorize and Organize Your Information

Think of your web page as an outline. You should have specific main subject headings that you are covering and should try to devote a page (or section) to each subject. This makes for a much more organized navigational system.

For the purposes of explanation we will design links for a hypothetical site. Lets say we have 15 pictures from the X-Files. Obviously, we will need a section (page) for just the X-files pictures. Otherwise the pictures would slow down the loading of your first page. And lets say we also play Nintendo 64, and we know 437 cheats. Now we need a section (page) for cheats. Also, most every web page somewhere contains a list of links that are appropriately related to the information displayed. Or there is the inevitable list of reciprocal (traded) links. In other words, links to other's pages that may not have any particular connection to the page's subject matter.

In addition, most personal pages will have a short bio section, maybe with some pics.

So now we have a few sections: X-files; Nintendo64; Links; and Personal Info.

Go For Speed

Do not put too many large pictures on one page of your site, especially the first page. It needs to load very fast. It's a proven fact that most people wont wait very long for a page to load before they go somewhere else. Keep in mind that there are plenty of other places for them to go. Try to have your page load in less than 60 seconds.

Also you should try to make all gif files as small as possible without losing resolution. Small doesn't mean just width and height, but actually, how many kilobytes is the picture? A much larger sized picture can have considerably less mass if it was made with fewer colors. Try the Gif Wizard to shrink your GIFs and optimize your speed of load.

Navigation

Navigation is probably the single most important part of any web page. It doesn't matter how much information your site contains if the surfer cannot find it. It is very important to have easy-to-find, recognizable links, and the surfer should know exactly where he is going to end up by the name of your link. Please do not make the kind of links that have cryptic messages like: "you should see this" or "click on the happy face for a surprise" for example. Life is short, and you should not be wasting the surfer's time with things he might not want to see.

Lets talk about the navigation bar! A nav bar is a list of all the primary links on your site and is usually set up as buttons (see below) or text links with brackets around them like this:

Here's how our bottom-of-the-page linkchart or text nav bar would look:

[HOME][X-FILES][CHEATS][ABOUT ME][LINKS]

As you can see, you can get to anywhere on our hypothetical site from this place. The nav-bar is an invaluable tool. You should have one on the bottom of every page of your site. Many programmers will also add a text nav bar under the button nav bar for those surfers that have their browsers set to not load images. Note: Many people who surf from work environments, or that have a slower modem, do not have their browsers set up to load images because they take too long. At any rate a text nav bar is a terrific help to the surfer.

For a button nav-bar, just add section heading names from your site onto matching buttons. I usually use a button nav-bar on the top section or left hand side top of a page and a text nav bar on the bottom. This method also works well if you put the buttons in a separate frame as described above. Here is a button nav-bar that contains the same links that we used above.

---

Prime Real Estate

The Prime Real Estate on a web site is what loads into the top screen without any scrolling. On different resolutions and monitors it will be larger or smaller, but the top screenful is everything! You have got to grab that reader right there, and let him know why he should continue on through your site. Tell the surfer what is on the page at the top.

NOTE: I have actually watched people surf and never scroll (my husband). Some people don't scroll. If they don't see what they want in the first few lines they leave. So you have got to make that first screen count! That way you keep the surfers you really do want. Your top screen should include:

1. The name of your Site (Banner?)
2. Contents Information
3. Some provocative statement?
4. Your logo or chat line name.

What it shouldn't include:

1. Wasted Space
2. Outside links. Only links that are internal go at the top.
3. Awards. They are outside links and should go down further, or preferably on a different page.

Choose font families and stick with them

The total maximum number of fonts that should be used in most publication is 3-4. You can use variations of the same font, italics and bold and different sizes. The best thing to do is try to mix fonts that are related and work well together.

Fonts are something that helps create the mood of your page, and you don't want to have too many switches going on. If you have too many fonts perhaps you need to spend more time defining your page and what you are trying to accomplish with it. What mood do you WANT to create?

Make sure the fonts you use are readable. It may look really cool to you to have some gothic type, but may be very difficult to read. Think of it this way: "Would my mother be able to read this?" If the answer is no, you probably need a simpler font.

Colors, colors colors

Color combinations are a bit like fonts in that they create a mood. Also like fonts you need to limit how many different ones you use at one time. The background you select will have a lot to do with the color fonts you choose. Go for the most readable colors you can. There is nothing wrong with a white background.

Backgrounds

In my many hours of surfing I have seen some really terrible backgrounds! The busier they are the worse they are. Remember the old adage K.I.S.S. or Keep It Simple Stupid. Hey, it's brutal, but it's true. The more complicated the background, the more you lose the words and the true meaning of the site. Hopefully, we have established by now, that the content is the thing, not the background.

One very nice technique used for backgrounds is to use your site or company name or logo and skew it (change the angle) and make it so light and washed out you can just barely read it. It is an effective trick and always looks impressive.

One background I would caution you against is the over-used "stars on black" background. That one has been done to death! So unless you are making a Star Wars page, try to stay away from the star scenes.

Use Buttons for text links

Buttons are a way to bring your site together and make it more cohesive. They can match your banner or be complimentary to your background. In addition, they can be placed in a separate frame as a table of contents or be used as a navigation bar when lined up with other matching buttons (see example).

---

This site was created on 11/5/97, and was last updated on 10/5/99. I hope the information herein has been useful to you. If it was, please let me know. Happy programming!

Send me a msg

---

If you are looking for more inexpensive and free tools or applications check out one of my other web sites:

---

[Go to the Source] [Organize Your Information] [Go For Speed!] [Navigation] [Prime Real Estate] [Choose Font Families] [Colors, Colors Colors] [Backgrounds] [Use Buttons for Text Links]