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 Music) 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 Links) 5. If I use 8 frames on my page people can view everything at once. They'll love it! (see Frames) 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!) Music 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. Animations 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 problem. Banners 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 text. 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. Backgrounds 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 background! 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 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 automatically. 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. Advertisements 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 page. 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. Frames 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.