Style & Layout

Opinions about good style vary greatly from person to person. I can't possibly tell you what a good style or layout is. However, I can give you some tips that will help you decide what is right for your site.

Colors
Background Images
Navigation
Browsers
Images & Bandwidth
Frames

What color should your text be? How about your background color? And your links? You could go and throw together any old colors, but if you do, don't expect visitors to stay long.

One of the most important aspects of a web site is its appearance. Your site must not only be pleasing to the visitor's eye, it must also be easy to read. Try to choose colors that make your text stand out without being painful. For example, bright red text on a dark black background will stand out, but it will also be tiring if not painful for your visitor's eyes. Of course, not everyone agrees that colors shouldn't be painful.

One problem is that not every monitor can display 16 million colors. Many are limited to far, far fewer. If you choose a color that your visitor's monitor can't display, their browser will "dither" the color. That means it will use many dots (pixels) of colors it can display to try to simulate the color you chose. When it does this with a background color, the text becomes very difficult to read. Some browsers promise they won't dither background or text colors. However, if they don't dither, they must instead try to choose a color that is similar to the one you picked. That won't necessarily be one that looks good. To cut down on this, you can pick your colors from the 216 standard browser colors. These colors are supported by most browsers on most operating systems. There will still be problems with some systems (such as certain Unix systems), but you can't please everyone when it comes to color.

If you want to soften your colors, try using hex 33 (decimal 51) instead of 0 for some of the red, green, or blue components. There won't be too much of a difference, but it may be enough to soften your colors.

[Top of this page]

You also have the option of using a background image. Make sure that image does not obscure your text! Many, many web sites out there do not follow this simple rule. Therefore, their text becomes difficult to read once the background image loads. Try to make your background subtle or as close to a flat color as possible. Lots of changes in color within your image can make your text completely unreadable. If your background has borders, try viewing it in browser windows of varying sizes. Also, remember that if your visitor's monitor can't display any of the colors in your image, their browser will dither the colors, or pick another color.

Background images should always be non-animated GIF files. Unfortunately, JPEG files take too long to draw to be effective backgrounds. If you use a JPEG image, scrolling will take a long time.

If you want a simple border along the left side of your page, like the one at this site, make a GIF file that is wide (I use 1,600 pixels) but short (I use 4 pixels). Since GIF compression works very well on a solid horizontal color, you can't have a background that is too wide. Any width will compress well. Since background images tile, if you don't make your image width enough, it will appear as two or more vertical stripes on high resolution monitors.

[Top of this page]

Another of the most important aspects of a web site is its navigation system. At the very least, you should have a link to your homepage on every page. Your visitors may arrive at your site from search engines or links from other sites and therefore may not enter on your homepage. If they don't have a way to get to your homepage, they never will.

You should make it as easy as possible for your visitors to travel through your site. If your visitors are forced to go back to your homepage every time they want to get to another section, they may get bored and leave. If they have any trouble finding what they are looking for, they'll probably leave. If they don't understand your navigation system, they'll definitely leave. You want to make your navigation system simple, easy to use, and easy to understand.

At this web site, I felt it was important to include a menu on every page. I did not want my visitors to have to go back to my homepage every time they wanted to go to another section. I chose to place the menu on the left side of each page. However, that does not work well in text-only, table-less browsers such as Lynx. Therefore, when someone enters my site with a Lynx browser, they will find the menu at the bottom of every page. Unless you are using a CGI script to detect which browser they are using, you will not be able to modify your site on the fly like that. You will need to consider your menu placement well.

Any time you have a long page, it is very useful if you include a link back to the top at the bottom of your page. Many people use browsers, such as WebTV, Lynx, etc., that do not scroll as easily as Netscape Navigator, and MS Internet Explorer.

[Top of this page]

One of the things you must decide is which browsers you want to support. Every browser is different and each has it's own quirks. If you design your website to look great in MS Internet Explorer, it will probably be ugly in Netscape Navigator, and vice versa. It is important to choose which browsers you are going to support, then try your site with each of them.

I have found that by following some simple rules, you can support the vast majority of browsers. First, always use standard HTML. Don't use extensions added by a single company unless you only want to support their browser.

Second, always be as strict as possible with your HTML coding. For example, if you use frames, you can place the <frameset> tag inside the <body> tags. That will work fine in MSIE. However, Netscape will completely ignore the <frameset> tag. If you place the <frameset> tag between the closing </head> tag and the opening <body> tag, it will work in both browsers.

If you can use a closing tag, use it. The paragraph tag (<p>) does not normally need a closing tag. However, I have run across a couple of minor browsers that don't display the page properly if the closing tag isn't there. Make your HTML as standard as possible.

In your attempts to use standard HTML, you may want to check out the official specifications. Also, the web site Doctor HTML can test your HTML and tell you where there are errors or non-standard tags. Doctor HTML will check one page at a time for free. NetMechanic provides a similar service and will check your whole site, but it has far fewer features and options.

Another browser to consider is the WebTV. Due to the limitations of televisions, WebTV had to introduce some limitations that normal browsers don't have. For example, if you were to view a site with a white background (such as this one) it would look horrible. That's why whenever someone visits this site with a WebTV, I change the background to black with a dark blue left border. If you would like to make your site display ok on a WebTV, check out the Developer's section of the WebTV web site.

[Top of this page]

It is important that you make your image files as small as possible. Each byte takes time to transfer and if your page takes too long to load, your visitors will not stick around.

Your average user is going to be connected to the internet via a 28.8 modem. That's very limited bandwidth. You need to conserve it as much as possible.

If your image is something that was created on the computer and has lots of flat colors, it may be best to store it as a GIF image. If your image is something you scanned in, your best bet is probably the JPEG format.

The GIF file format is most effective when you have a limited number of colors, and there are horizontal rows of pixels that are all the same color. To further reduce your image, run it through the GIF Wizard. The GIF Wizard reduces your file size by compressing your palette. It also works very well with animated GIF files. It is free for non-commercial users and fairly inexpensive for commercial users. There are other software packages out there that can accomplish the same the, but I haven't yet used any that are as effective. (Note, if you use this link to the GIF Wizard and sign up as a commercial user, I will get bonus credits in my account. I just felt I had to disclose that up front.)

You can use animated GIF images. However, keep in mind that animating an image will make it larger and make it take longer to download. Animation can also be very distracting. Do you want your visitors to pay attention only to your images, or would you also like them to read your text? The biggest problem with animation is that browsers don't deal with it as efficiently as they should. Therefore, if your visitor has a low-end system with a small amount of RAM, their whole system will slow down the entire time the animation is playing.

You also need to decide how many images to place on one page. Most browsers need to open a new connection to your web server for every image on your page. That can really slow things down if you have lots of images.

ALWAYS, Always, always use the width, height, and alt attributes on your images. Without the width and height attributes, your page will constantly be shifting around while it is loading. This can be very distracting and annoying. Without the alt attribute, visitors who can't or don't display graphics won't know what your image is. I've heard that 5% of web surfers surf with graphics turned off! Also, there are many blind people who surf the web. Their computers read your pages with a speech synthesizer. They can't see graphics, so if you don't tell them what your image is, they won't know. I've talked to many, many people who immediately leave any web site that does not use the alt attribute.

If you use an image as your menu, make sure that people visiting your site without graphics can still navigate your site!

[Top of this page]

Don't use frames. Well, let me clarify that. Don't use frames unless you believe it is necessary for the navigation of your site. Frames introduce many problems and most sites that use frames do not deal with those problems.

A visitor cannot bookmark a frame. A visitor cannot pass the URL of a frame to another person unless they are very familiar with their browser software. Any time a frame loads, the visitor must click in the frame before they can use the arrow keys to scroll it. When navigating a framed site, the back button does not always bring you where you expect it to, sometimes it will bring you all the way back to the beginning.

At the very least, please provide your visitors with the option to view a non-framed version of any section of your site that can survive without frames.