Web Page Design Tips by krupa77


More Info
									                      Web Page Design Tips
Guidelines for creating an effective and attractive web page
Personal Opinions of Peter G. Aitken

With the increased popularity and availability of the Web, more and more people are putting up
their own web pages. Whether it's a personal page or a business page, you certainly want to
present your information in a clear and accessible manner that provides your visitors with a
pleasant experience. Furthermore, just like the clothes you wear, the design of your web page
says something about you. Is your web page the equivalent of a custom tailored suit and an
Italian silk tie? Or is it more like a pair of tattered bluejeans and a gravy-stained sweatshirt?
Believe me, your visitors will notice even if you don't. On this page you will find my personal
take on what elements contribute to effective web page design, and on certain things to avoid.

My goal on this page is not to tell you how to create a web page, since the specific details will
depend on the web page authoring software you are using. Rather I hope to present some general
design guidelines that you may find useful. Please remember these are personal opinions and if
you disagree with me that's fine but I don't want to hear about it!

Top 10 Dos of Web Page Design

If you want a web site that will scare visitors away, frustrate them, annoy them, and lose
potential customers here are the top 10 things to do (needless to say this is really a list of don'ts!).

    1. Ooo, this black background looks really cool! Particularly with the dark purple text
       displayed on it (see Backgrounds).
    2. Hey, I like this music so everyone else will like it too. I'll play it on my web page. (see
    3. This animated button looks great. I'll add a dozen more to my page. (see Animations)
    4. Why should I check my links? My visitors won't mind if some of them don't work. (see
    5. If I use 8 frames on my page people can view everything at once. They'll love it! (see
    6. I can make sure people see this material by opening a couple of new browser windows.
       No one will mind. (see Opening New Windows)
    7. My page is so awesome that people will not mind wading through a bunch of ads to see
       it. (see Advertisements)
    8. I have 10 really great pictures of my pet armadillo and I'm going to put them all on my
       web page. So what if they are 100,000 bytes each? (see Images)
    9. My page isn't finished - in fact there is nothing there but the title. Even so I am going to
       broadcast my URL to all the newsgroups and search engines. (see Unfinished Pages)
   10. I are a good speler and I no grammer so I dont need to prufreed my page or run a spel
       chekker. (no explanation needed!)


It is a fairly easy matter to play music on your web page. When someone views your page, their
computer's sound system will start playing the music or other sound effects that you specified. In
almost all cases I advise against this. The main reason is that your visitor's taste in music is
unlikely to be the same as yours. A classical music lover is not going to enjoy a track from the
latest Nine Inch Nails release, nor will a heavy metal fan get much enjoyment from your favorite
Verdi aria. Other potential problems are that the user may be already listening to something else
on the radio, or maybe the baby is asleep - who knows?

There are a few exceptions, of course. For example, if your web site is devoted to a specific
musical group or composer then playing some of their music makes sense. Generally, however, I
suggest that you stay away from playing music automatically on your web page. Let the user
select the music if they want to hear it. Be aware that copyright issues exists also, and playing
music on your site may constitute a copyright infringement.


Animated icons, scrolling text, and other moving elements are all the rage. Having some
movement on your web page can indeed be an effective way to call attention to certain elements
and to simply liven things up a bit. Remember, however, that more is not always better. I have
seen web pages that are a seething mass of animation with the site's information (if there is any)
hard to spot amidst all the squirming and wiggling. My personal preference is to avoid animation
altogether, but if you want to use animation, do so sparingly. Rule of thumb: do not have more
than 2 or 3 animations in view at any one time.

Opening New Windows

With some simple programming it is possible to open a new, or secondary, browser window.
What happens is that when someone navigates to your page, a second web browser window
opens and displays an advertisement or some other information while your main page displays in
the first browser window. This is perhaps the single most annoying thing I see on the web and
my advice is simple: DON'T DO IT!!! Unfortunately some companies that offer free web pages
do this to display their ads and you have no control over it, but it's still just as annoying. Also,
many people run software that prevents these windows, or popups, from appearing, so your
message may well be lost.

Secondary windows can be put to good use if they are under the user's control. For example,
displaying an image in a secondary window when the user clicks a link can be a very effective
approach. It is the automatic display of secondary windows, with no control by the user, that is a

The term banner refers to a graphical element, usually at the top of a page, that identifies the
page and provides some visual appeal. I am not talking about advertising banners; they are
discussed in the section on advertising. Some banners are "fancy" text created in a graphics
program and saved as a GIF file. Others are animations created with Flash. Still other banners
contain photographs or other images. Properly used, a banner can be an attractive part of your
page and can also serve to provide an identity to your page, something to set it apart from other
web pages. Remember that graphics images take time to download, so when designing a banner
pay attention to its file size. The most beautiful banner in the world will not impress your visitors
if it takes 2 minutes to download.

                                    Easy Banners
Here's easy way to create nice looking text banners such as this one.

You need the Microsoft Word for Windows word processing program and a graphics program
such as Paint Shop Pro or PhotoShop. Here are the steps to follow:

   1. In Word, Select Insert, Picture, WordArt.
   2. Select the desired text style from the examples that are presented, then enter your banner
   3. Edit the WordArt as desired - for example changing its color or size.
   4. With the WordArt picture selected, press Ctrl+C to copy it to the clipboard.
   5. Switch to your graphics program.
   6. Paste the picture as a new image (Ctrl+V in most programs).
   7. Set the palette transparency to the image's background color (white).
   8. Save the image as a GIF file.

Banners created in this way have relatively small file sizes. The above sample is only 3200 bytes.


Because a plain white background can be boring, most web pages use a background which can
be a solid color or, as on this page, a repeated pattern. Backgrounds can really improve the
appearance of a page, but you need to use some common sense. Some backgrounds make it
difficult to read the text on them, either because the background is too "busy" or because the
background color is too similar to the text color. Remember that the people reading your page
will have different monitor sizes, different room lighting, and some may have visual
impairments. Just because red text on a purple background looks great to you does not mean that
everyone else will be able to read it easily.

And by the way, the one guaranteed way to make your site look amateurish is to use a solid black

Unfinished Pages

Has this ever happened to you? You see a notice of a new web site: "Great new site for Ferrari
cars" or whatever. You navigate to the site and all you find is a title and an "under construction"
icon. Some people, it seems, just can't wait to get their web page out there even if it's not finished
- or in some cases hardly even started yet! This is a sure way to lose visitors - once they see your
unfinished site they are not likely to come back. Don't publicize your web page before it's ready.
Even if it is not 100% finished, it should have some material on it that people can enjoy before
you start inviting people to visit.


Links are the very heart of the World Wide Web, and it's a rare web page indeed that doesn't
have at least a few links on it. There are three kinds of links, external, internal, and bookmark.

An external link is to a page on a different web site. Visitors to your page will be frustrated if
they find external links that do not work. It is true of course that you have no control over
external links, and a link that worked fine one day may suddenly stop working for any one of a
number of causes. For this reason you need to check your external links once in a while and
remove the dead ones from your page. Many web page authoring programs can do this

An internal link is to a page on your own site. You have complete control over these links and
there are no excuses for non-functional internal links. This is particularly true since most web
page authoring programs provide a way to detect non-functional links.

A bookmark link is a link to a location on the same page. When the user clicks such a link
(which looks like any other link), the browser scrolls the page to bring the bookmarked location
into view. As with internal links, there is no excuse for having non-functional bookmark links
on a page.

Images and Download Time

Pictures are an important part of most web pages, but if your page has too many images, or if the
image files are big, it will take visitors a long time to download your page. This can be a real
turn-off. If you want to put a lot of images, or particularly large images, on your web site, here
are a few pointers.

   1. Make two copies of each image, a small thumbnail and a large full-size image. Display
      the thumbnail images on your page, with each image linked to the full-size version. Your
      page will load quickly, and visitors can download and view only those large images they
      are interested in.
   2. Create two versions of your page, one with large images and one with smaller images,
      and give visitors a choice of which one to view. They can select the large, slower-to-load
      images if they are patient or if they have a fast Internet connection.
   3. Minimize image file size by always using the appropriate file type (GIF or JPG) and, with
      JPG images, selecting an appropriate level of compression. You'll find more information
      about image file formats and JPG compression of my Tips on Scanning page.


Ads are a seemingly unavoidable part of the web. It may be a while before anyone is willing to
pay you to advertise on your site, but anyone can enroll in a banner link exchange program in
which a banner promoting your site is displayed on other peoples' pages in return for your
displaying an ad banner on your page. There's probably no harm in displaying an ad banner on
your page, but you should not expect too much from these services. Because they serve a general
audience, your banner will be displayed on all sorts of web pages and will rarely be seen by
anyone who is interested in your topic. You can expect very few visitors to your page from
belonging to such a banner exchange.

You are much better off if you can find targeted advertising - a program that is aimed
specifically at people with a common interest. There are a number of banner exchanges along
these lines. If your page is about gardening, for example, your banner will be displayed only on
other pages related to gardening, and only ads for other gardening sites will be displayed on your

Another approach is a targeted service. When you sign up for the program they provide a small
bit of code for your page. The result is that targeted ads appear on your page, ads that are related
to the subject matter of the page. Each time someone clicks an ad, you receive a small payment
(very small, believe me I know!).

Whatever approach you decide to take, remember that people do not visit your web site to see the
ads. They should be a secondary part of your page, and not distract from the main topic of the
page. I have seen pages where you have to scroll past half a dozen ad banners to get to the main
information. It's a real turn-off and a bad idea.


By using frames you can divide your web page into two or more sections, with each section
displaying a different document. You can, for example, keep a table of contents displayed in one
frame while displaying information in another frame. When used appropriately, frames can
enhance a web page, but it's easy to go overboard with frames. Another factor to consider is that
frames make it difficult for the search engines to properly index your content. My approach is to
avoid them altogether unless I have a very good reason for using them. In other words, don't use
frames simply because they are available.

To top