Common Web Design Problems

This list contains many of the most common mistakes made by web page designers. These are problems which make it difficult or impossible for many web surfers to use a site efficiently. Remember that your site represents your company or organization to current and potential clients. They are giving up their time and computing resources to view it, so it pays to make that experience as pleasant and efficient as possible by avoiding these issues.

These problems are explained below:

Deep Linking

This is the practice of linking directly to someone else's content from your site without the target's consent. Embedding images stored on another server in your own page is the most common example. This is criminal theft of service, similar to stealing cable TV. Always ask permission before using other people's content. It's okay to link to someone else's page, just don't embed their content within your own.

Very Large Images

Important images should never be larger than about 20 kbytes. Artwork should be linked via small icons and the size of the full image clearly stated.

HTML Reduced Images

The "height" and "width" HTML tags should never be used to reduce the size of an image as this forces the browser to download more data than is needed. A graphics editing program should be used to reduce the image to the appropriate size.

Unspecified Image Dimensions

The actual width and height of every image should be specified in the tag. This allows the browser to complete its layout and display the data it has rather than waiting for the entire page to finish loading.

No Text Alternatives

All images should have a text equivalent, either as an ALT tag or in a separate description. This is especially important if they represent links. This allows users to see what their options are without waiting for the entire page to finish downloading. It also allows users to navigate your site without downloading any images. Image maps should always have plain text equivalents. Having text friendly pages has become especially important as a growing number of web-surfers are using cell phones and PDAs to view your pages.

Java Required

Activation of Java or Java Script should NEVER be required to navigate your site. Both still have substantial security holes: asking a user to turn on Java at an unfamiliar site is like asking them to mail their credit cards to a stranger. Very few functions truly require Java. Those which do should be optional and clearly labeled.

Cookies Required

Cookies are unreliable and often a nuisance. Users worried about being targeted by marketing databases usually disable them. Some functionality performed by cookies can be accomplished via hidden form variables. Whenever you are using cookies, for any reason, you should say so clearly. You should also make sure that cookies are only returned to the server that set them, as many browsers now disallow other uses.

Browser Dependent

HTML extensions specific to one browser should NEVER be relied upon. Requiring users to switch programs just to read your site is simply unreasonable.

Inconsistent Links

A single document can be referenced by many different URLs, particularly if your site has multiple names. Be consistent in how you link to documents so that the browser's cache does not have to load the same file multiple times. To improve flexibility and consistency, leave the site name out of your links. For example, "http://www.foo.com/my/doc.html" becomes "http:/my/doc.html". This makes the link independent of which name was used to access your site and saves you from having to change hundreds of files if the name changes.

Broken Links

Links on your site may refer to documents that are not available or servers which are down. You should regularly check your server's error logs for Document Not Found errors. To help prevent such problems, each document should contain a commented list of those documents which refer to it. This allows you to easily update your links when a document moves.

Long Indexes

Index pages should be concise and contain a minimum of graphics. This allows users to quickly find what they are looking for.

Bad Scaling

Your site should adapt well to different window sizes. A page that does not scale itself to a wide range of sizes forces users to scroll around or to consume excessive desktop space in order to find what they are looking for. Be sure to test your page on sizes ranging from 600x400 to 1200x900. Remember that just because someone has an 1024x768 display doesn't mean they want your site taking up all of it.You may even want to try your site on a 160x160 PDA display. It's hard to optimize for this format, but often you'll find that simple rearrangments can make your page much more readable even in this limited format.

Bad Alignment

Page elements may overlap or become obscured. This is usually due to an excessive reliance on tables or to differences between browsers. Be sure to test your page at different window sizes and on different browsers to make sure it appears correctly.

Frames

They almost never look as good on someone else's browser as they do on yours. They rarely scale correctly to different display sizes, often leave unwanted garbage behind, and always mess up the browser's history trail. Many users hate frames deeply. If your life just isn't complete without frames, at least provide "frames free" alternative links.

Bad Background

Your background should contrast with the foreground text, but not garishly. If you are color-blind, please let someone else choose the colors. Low contrast or clashing colors make a site almost impossible to read. Do not rely on a background image to create contrast with your text. Set the page's background color so that people browsing without image auto-loading can still read your information.

Obscure Links

Important links should be arranged in an easy to read and logical format. Only incidental links like footnotes or references should be placed in paragraphs.

Unnecesary Registration

Requiring users to submit personal information should only be done if it is absolutely necessary and only truly necessary information should be required. There should be a clear statement declaring why the information is necessary and exactly what it will and will not be used for. Most of us just lie anyway (see how many bite@me.com addresses get registered). Sending unsolicited commercial email based upon registration information without a reader's permission will likely provoke extremely hostile responses.

Missing Directory Slash

Links to directory index pages should always end with a forward slash "/". For example, if you are linking to the index page of the path "/mystuff/subdir", then the correct internal link would be "http:/mystuff/subdir/" or when linking from another server, "http://www.mydomain.com/mystuff/subdir/". If you leave the end slash off, then browsers will get a directory error and have to retry with the slash added every time the link is followed. This creates unnecessary delays, especially during high congestion.

Obsolete Image Maps

Image maps should be "client side" to allow users to see the active areas of the image and reduce link time. For backwards compatibility, an image could use both client and server side maps, but there's really no point anymore.

HTTP File Download

Avoid using HTTP links for transfering binary or large files. Some browsers do not process binary files reliably, although this is not nearly as much of a problem as it used to be. When possible, uUse FTP, that's what it's for.

Plug-Ins Required

If a user installed all the plug-ins proffered by the sites they visit, their browser would grind to a halt, if it started up at all. Worse than Java, plug-ins are tremendous security holes. Even popular ones from "reputable" software houses are often buggy and can lead to browser crashes and even data loss. Whenever possible, allow the user to download the data and view it outside their browser. If a plug-in is necessary for multimedia content, clearly identify what plug-in is needed and provide a link to its source.This has become less of an issue since IE no longer supports plug-ins. Still, you should avoid content which requires proprietary software.

Most of these problems can be avoided by testing your site on a variety of platforms and checking your server's error logs. Remember that not everyone has a T1 connection with a 1280x1024 true color display. Keep in mind that a web savvy user will likely have Java turned off, minimal plug-ins, and will change their window size frequently. Your readers are your customers and if you make it a chore for them to view your site, your customers WILL go elsewhere.

Seth B. Noble - Netiquette - Web Design Problems - sbnoblenarda.net - Updated November, 2002