This FAQ will briefly describe various issues in web pages design, and how they are normally worked around.

My page looks great in Netscape. What's wrong?

Potentially, plenty.

• AOL, Compuserve and Prodigy all still use proprietary browsers that generally don't support tables, frames or any of the modern browser features we take for granted with Netscape.

• People often don't load images. Many image-heavy sites, especially those that rely on images for navigation, often take very long to download. Because of that, even Netscape users often run with images off. With images off, many sites descend into a visual labyrinth. You can help people navigate your site by using the alt tag, like this:

  <img src = "test.gif" alt = "A lovely test image">

  Those who have images turned off (or text browsers) will see "A lovely test image" in lieu of the image itself. Netscape 3.0 and Microsoft Internet Explorer 2.0 and above will display the alt tag before loading the image, making it possible to create a clickable image display that can be read immediately upon load.

• Some people still use text mode browsers. Text mode browsers such as Lynx are still used by about 10% of the browser community. Often, it's easier for experienced users to glance through the text of your site without bothering to load a resource-hungry program such as Netscape. Others don't have computers powerful enough to run a SLIP or PPP connection. For people who have shell accounts, this is often the only way they can browse the web. Be gentle with them by at least checking your site in Lynx.

Sidebar: Making your pages look good in all browsers

My image map looks real nice, but a lot of people don't finish loading my page.
What's wrong?

Your image map is almost certainly too big, and you don't even notice it. This is a common problem with site designers, especially on large, well-funded sites with T1 connections. Just because your site looks fast doesn't mean the poor sap with a 14.4kbps modem won't hate you for it.

Be sure to test your site by dialing in to it on a system with a 14.4kbps modem, Windows 3.1 and a display capable of displaying 256 colours - or even less. You'll be amazed at how this transforms your site - and it's how most people will see it.

How do I shrink my images?

As we've seen, an oversized image can really turn people off. How can you make your image smaller?

• Use the right format. Most art that you create is best stored in the GIF format. It will look sharper and be significantly smaller than a JPG. Most photographs you scan should be stored in the JPEG format, which will handle the continuous ranges of colours better than GIF.

• Use fewer colours. If you're using a GIF format, you have a wide lattitude; using Photoshop you can select the exact number of colours you want your image to use. Often you can cut it down to 16 colours without that much degradation in quality, if you're dealing with a line art illustration. This is particularly true if you want to use your image as a background.

  In the case of a JPG image, you have a choice of high, medium or low quality. You'll probably be pleasantly surprised at how decent a low quality image looks, again, especially as a background.

• Be sure to use colour. Because of the way images are stores, colour images don't take more storage space than black and white ones. This is because black and white images are stored in shades of grey - often as much as 255 of them. Each different shade is stored in the same way as a separate colour, so you wind using almost as much space as a colour image. Bad idea unless you're trying to create an artsy effect through the use of black and white.

Designing Down: What are the statistics?

As we gaze at the web on our 24-bit, 1280x1024 monitors, we often forget that most people who view our web sites use rather lesser equipment.

Although these statistics are not nearly as bad as I'd feared, they are certainly depressing enough. My thanks to Daniela Jorge from the Web Design mailing list for digging up these figures as an answer to a question from Ken Milburn.

Unfortunately, I suspect these results are at least somewhat skewed. People who take this kind of survey are likely to be more technically clueful than the average person, and thus have higher resolution. Just as importantly, those those who have higher resolutions are more likely to know what they are. I'd bet that a majority of those who checked "Don't know" probably have 640 x 480.

Note that this is third-hand information, but probably came from one of the many WWW usage surveys floating around the net.

This reinforces the importance of having at least one machine - preferably a PC, since most web surfers use PCs - that can go down to a 640x480 resolution with 256 colours so you can test view your pages before sending them out into the cold, cruel and merciless low-resolution, low colour world.

What is the Single-Pixel GIF? Why might I want to use it?

See my detailed commentary on this subject

What is anti-aliasing, and when should I use it?

Any image that uses curves or diagonal lines can be inflicted with the dreaded "jaggies", jagged lines that make your creation look rough and crude. Anti-aliasing smooths out those lines at the expense of legibility; anti-aliased text often looks blurry and hard to read. The example below shows two sets of identical shapes, one anti-aliased and one created without its benefits:

Figure 1: Effects of Anti-Aliasing

As you can see, small text that's anti-aliased is much harder to read than text that isn't. Because of that, we recommend against anti-aliasing for text in a more or less typical size. This is why most text you see rendered as graphics is done using a large font.

However, in the larger sizes, such as the 35-point Garamond you can see here, anti-aliasing makes your text look smoother and more natural. Also note the anti-aliased diagonal line on the bottom definitely looks nicer than the non-anti aliased diagonal line below.

The bottom line is that the more complex the shape and the higher level of detail, the less likely anti-aliasing is to be appealing. Watch out for blindly anti-aliasing everything, and also watch out for blindly not anti-aliasing everything. Doing it just because it's the default in Photoshop can be a big mistake!

The Web Design Issues FAQ has been accessed times since it was created on 11:26 29 June 1996.