How Do I Create Successful Web Pages?

Editing Tools. The first thing to get is the right editing tool for your level of expertise. Professionals tend to use tools such as Frontpage, Dreamweaver, or any of several other commercial products. Beginners may want to start with something like Microsoft Publisher or even Microsoft Word to create web pages. Another great web creation method for novices are the simplified on-line creation tools such as Homestead and Tripod. These online providers provide truly easy-to-use web creation environments for beginners.

Titles, first words, and Meta Tags. If you're looking to bring people to your web site, you first have to have content that folks want to see. No amount of tips, tricks, or skullduggery will overcome the basic premise of content. You are here now reading this because you're interested in the topic. You probably found this web page through a search engine. The best way to be found on a search engine is to come up in the search results. While you can submit your site to be listed in the search engine categories, I have found the following to be the best way to help people find you on the web:

Page Title: In HTML, this is the text between the <TITLE></TITLE> directives at the top of your web page. In my experience, a good title is the single most important factor in being picked up on search engines, and having people click on it to come to your site. Many experts will tell you to make the title long -- and to stuff in as many descriptive words as possible -- I believe the title should be short and descriptive. Think about it. When you're using a search engine, are you likely to click on the link with dozens of synonyms, or the link that is a short clear description of what you're interested in seeing?
First Words: The first few words on your web page are golden. These first words should be in plain text (not graphics). They should describe in one or two sentences what is on the page. Think of those first few words as a description field in the search engine for your web page -- because that's exactly what they are on many search engines.
META tags: Meta Tags are HTML directives which provide overall information or instructions for your web page. Here is an example of using META tags as a useful tool for your readers and search engines:

<title>How Do I Create Successful Web Pages?</title>

<meta name="author" content="Keith Turbyfill">

<meta name="keywords" content="create, page, search, found, success, find, engine, meta, tag, seen, great, Internet, techniques, tips, tools, domain, style, design">

<meta name="description" content="How to create web pages that are found by search engines and seen by others on the Internet. A few common techniques that will help you create great web pages.">

<meta name="robots" content="all">

The first entry, <TITLE>, is not a META tag, but illustrates what I was saying about an appropriate title rather than a title filled with keywords. The second entry, the META tag for "author" should contain your name. It's also not a bad practice to include a copyright notice on your web pages as well. Next, you'll see the META tag for keywords. Use this entry to specify all the individual words you think people might use when searching for your web page (Note: Some search engines ignore all words after about the tenth). Then include a description META tag. This description content should be similar to the "first few words" described earlier. On many of my pages, I use exactly the first couple of sentences that are displayed on my web page as the description META tag content. This entry should be one or two sentences that succinctly describe what is on your web page. Finally, you may also include the robots META tag entry as shown above. This is simply a directive for the search engines as to the scope of searching on your page. On some pages, you may not want (or it is not necessary or useful) to have a search engine index the page or follow the links. If you're wondering -- yes you can set most of these types of tags using the "easy-to-use" tools such as Homestead.

Layout. Layout and style is important if you want people to stay and view additional material (let alone buy something). My general recommendation is to keep the layout simple. Some of the layout and design tips below will seem to some as restrictive; however, if you want to keep your web site viewable by the largest possible audience, it is good advice. In the end, you'll need to decide for yourself what fits your target audience and creative requirements.

Bright is better. Unless the mood of your site demands it, brighter tends to provide a better experience. Most graphics tend to work and look better on a plain white (or at least solid) backgrounds. As a rule, avoid the cheesy multi-color backgrounds.

Lots of White Space. Think vertical. Try to keep plenty of blank space on the pages, particularly on the sides. Avoid at all costs making readers scroll left-to-right on your page. Scrolling down typically isn't a problem. White space on the side is also important from a practical sense. Not everyone has their monitors set to (or a system capable of) high resolution. The rule of thumb is to make it no wider than viewable on a 800x600 resolution screen. I usually keep my pages at 640x480. A size of 640x480 keeps the pages accessible to almost every system and browser (i.e. WebTV). You may use this screen resolution test page to look at web pages simulating the size of various screens. Try looking at this page (http://www.kturby.com/pcwebpage.htm) using different screen resolutions. Then go look at other pages. In some cases, you'll find disaster (particularly at the lower screen sizes like 640x480). One of the easiest and most common ways of controlling width is to put your page content in tables. For example, the example HTML code below will display text in a column 500 pixels wide, just like the one on this page:

<table border="0" width="500">
<tr>
<td>
<font face="Arial">
Lots of people ask me for advice on creating web
pages, and more often how to be found on search engines. Here are my suggestions
</font>
</td>
</tr>
</table>

Hard set the Background and Foreground Color. This is one a lot people forget. Don't leave the background and foreground to automatic or default! The result of not setting a default color scheme can make your page look terrible (or render your website unreadable) on many systems! Use your editor page properties or the HTML <BODY> directive to set the colors. For example:

<body bgcolor="#FFFFFF" text="#000000">

keeps this page on a white background with black text as the default. The same concept holds true for the default font used on your web page. Here is a handy quick reference color chart that will give a wide variety of browser friendly colors.

Use Basic Fonts. This seems to be the hardest thing for novices to do. There are only a few universal fonts (i.e. Courier, Arial, Times New Roman, etc.) Using a very cool font may look great on your system -- but it may look terrible on thousands of other computers that don't have that same font. Stick with the basic fonts for all your text. If you really need a special font for a title or heading, put it in a small graphic and insert the graphic. That way, everyone will see the same thing.

Keep a common look and feel. Try to keep a common theme for your website. In addition to the colors, and graphics, make sure you stay consistent in navigation. Try to always have the same navigation buttons in the same places on various pages, etc.

Keep Frames to a minimum. Framed pages tend to turn into big headaches. Sometimes there is no better solution that to use a framed page (several independent windows in a single browser window). Usually, this is done for navigation, for example, to keep certain buttons or content up on the top or side while changing the content window beside). Avoid frames until you experiment and learn all the unexpected behavior they can cause (for example, when someone finds one of your pages from a search engine and opens it up without your frame -- or when someone else's frame opens your frame inside of their frame!). It's best to learn how to deal with all of these issues before publishing framed pages.

Avoid sounds and motion. You may be thinking "What?! Isn't that what interactive is all about?" The problem is that too many people overuse sounds and motion. Most readers tend to find it annoying. Music and sound effects drive many readers away immediately. The best advice I can give you is to avoid sound and motion like the plague. Then, when you find the occasion that you just can't resist, it will probably work well, and add function or interest to your website.

Optimize. If you use photos or graphics on your website, learn to optimize file size. Don't go anywhere else. Don't do anything else before you learn how to optimize!

Let's cover the basics now: As an example, if you have all your graphics in the JPG format, open them up in a graphic editor. Find the JPG file options when you choose "File Save As". Somewhere in the options when saving (or in the options on the menu bar) you'll find a setting (usually a slider bar) for setting the size and/or quality of the JPG. In most cases, you can take this down to around 30 to 50 percent and still have a good looking picture.

It makes the difference between having a graphic that is several hundred KB and one that is 20 KB. It makes the difference between having a web page that loads in a few seconds and one that takes a LONG time to load. For photographs, learn how to resize the photos to 640x480 or 800x600. Again smaller size and quick loading is the key. If you'd like to see examples common web graphic mistakes, take a look at these Photo Size and Optimization Mistakes. (Note: Because it illustrates several size and optimization problems, the page is large, and can take a couple of minutes to load over slower dialup connections). Size equals time. How much? Try this Download Time Calculator. While intended for calculating file transfers, you can also put in values of KB to see how long your page or pages will take to transfer.

If you don't have a graphics program, you can try some good shareware ones such as Lview or Paint Shop Pro. You can also try a free program like Irfranview that will do basic file saving options and picture resizing. If you like you may also view step-by-step instructions on how to optimize graphics. Also keep in mind there are commercial products (utilities) you can buy that can batch optimize the graphics on your website (automatically do a whole directory of images at a time). If you run Windows XP, the Resizer Power Toy is an excellent and easy tool to resize one or several files at a time.

Test your pages. There are two particularly important ways you should test web pages for the Internet. First, if you have fast access such as cable modem, ADSL, or a corporate network link, you should setup a dialup account to test your web page loading. The issue of sizing and optimization will become crystal clear. Second, you should test with various browsers. Currently (early 2002), Microsoft Internet Explorer has an incredible lead in the market. It is not uncommon for the latest two versions of Internet Explorer to account for over 90% of user browser access on a web site. However, it may also be important to you (or a company that you're working for) to be accessible to versions of Netscape. Ultra-compatibility usually goes back to versions 4.x of Netscape. Most clients are satisfied if the latest version on the market is compatible. Finally, also make a point to test with AOL and the bundled AOL browser. While the bundled AOL browser is based on Internet Explorer or Netscape, it has been customized, and there is some specialized optimization AOL performs (graphics and caching) that can negatively impact the appearance of your web site. Being that AOL has such a large market share, it is usually a good idea to test your pages using their software. A couple of great tools to look for to help with your testing are Xenu - a Windows-based program that will test your entire site for bad links, and the WebTV viewer - another Windows-based program that simulates viewing your pages via a WebTV interface. If you can get your web site running and looking good on WebTV, it will run and look good on just about anything. You can also test the general syntax of your page with tools such as CSE HTML Validator. While it certainly is a good idea to have correct syntax, the results of some errors and warnings aren't as dire as the people selling the full version of the program claim. (The "lite" version is free).

Inspiration vs. Theft. One of the best ways to make a great website is to look at what works! Take another look at the web sites you use a lot (or can find easily in a search engine) and see what works for them! There's nothing wrong with creative inspiration derived from the works of others. Personally, I doubt any of us have had a truly independent creative thought -- it's always influenced by our experience and the works of others. The trick is to create, add, shape and alter what you found on someone else's page to be unique enough to call your own. Don't go out, steal, and use other people's content as your own. The correct thing to do is:

Steal it. (For lack of a better description).

Figure out how it was done.

Recreate it.

Repeat the creation several times until you understand it.

Modify and alter it.

Find similar tools and methods for creating it.

Then, go out and create something new for you.

At this point, you've probably done enough to call it your own. If you doubt it, ask the person who's work you looked at for inspiration and ask them to take a look. In my experience, you'll get an honest answer, and usually help in creating your work. If the original author is unhappy, you're probably not deriving inspiration and learning "public" techniques, but stealing someone's work. Start over.

It's a thin line between inspiration and theft. We're all probably a lot more wobbly on that line than we'd like to admit. When in doubt, stay off the side of theft.

Search Engine Submission. This is a tough one. I know there are a lot of people who encourage you to pay them to drive traffic to your site. I'm not saying all of these are scams, but some are. Frankly, getting listed in a category isn't always useful. What counts is your page link coming up within the first few pages of a search. Good content, titles, and meta tags do more to make this happen than anything else. If you're dead set on getting listed in search engines, at least go with a big name company with a money back guarantee on getting listed (for example Microsoft's bCentral services as of Feb/2002).

Counting and Tracking. Once you have a web site up and running, you should add counting code to each page so you can find out where people are going, what type of systems they are using (browser, screen resolution, colors, etc.). Most importantly, you can find out what search words they are using and which search engines they are coming from. You can get a basic free counter at www.sitemeter.com. It will provide reports all of the information mentioned here. All you have to do is sign up and insert the code they give you on the bottom of each of your pages.

Take a look at the bottom of this page. You'll see a number. I've added a counter to some of my pages to illustrate counting and tracking. Click on the number and you'll go to the summary report page for this counter. You'll be amazed at the amount of helpful information that is available.

Navigation, Searching and Site Maps. After someone comes to your web page, you can also provide additional tools and material to make it easier for readers to find exactly what they're looking for. Easy to use navigation bars, local search engines, site maps, and table of contents are all common and useful for this purpose. Here are some examples from this website: A Site Map, providing a quick list and short descriptions of all the major sections, a Search page, in which the reader can search for a particular word or phrase, and a Table of Contents which provides a complete list of Page Titles with links. Or sometimes it's useful to point readers to the most popular pages.

For very long pages, using In page navigation with hyperlink anchers is also very common and useful. This technique allows the reader to click a word or letter to "hop down" to a specific point in the page. Here is an example of in-page anchor navigation in a glossary of Skydiving terms.

Finally, design each page as if the user "dropped in from nowhere", particularly in regards to navigation. Much of the traffic on websites is generated from links from search engines. A good rule of thumb is to have at least one link at the bottom of the page that takes the user back to the main section of the web page topic (not necessarily the home page).

Domain Name. Finally, I recommend a domain name for anyone serious about web traffic. It's not that hard to do once you have your web page up. The easiest (but more expensive) way is to go to a big player like Yahoo! Domains and sign up for a domain name that points to your web site. There are lots of cheaper alternatives, but these sometimes require you do and understand more, and sometimes these less expensive vendors have more operating problems (system problems, down time, etc.) than the "big players".

Would you like to try a sample? Here's a simple template web page filled with line by line comments illustrating and explaining the recommendations made here. This JavaScript template contains many of the most common and useful script functions used on web pages.

Lots of people ask me for advice on creating web pages, and more often how to be found on search engines. Here are my suggestions: