|Solution: How Do I Create Successful 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:|
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
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:
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
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">
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:
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.
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:
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.
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).
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.
contains many of the most common and useful script functions used on web pages.
Copyright © 1995-2005, Keith Turbyfill. All rights reserved.