10 Common Web Design Mistakes: Are You Guilty?

Using too many adverts on your web page breaks the hard work you put into your design in many ways. Adverts break the flow of your content. They introduce color schemes into your web page that conflict with your choice of colors. So having too many of them on the page can produce unpleasant results.

The situation is made worse when your web page is saturated with ads that keep flashing and are looped animations. These become more distracting and annoying to the visitor. Once a visitor is in that state of mind, there is no way that the ads will attract clicks.

Another thing about the ads, especially if they are animated, is that they tend to be images which in turn slow down the load speed of your web site. Whichever angle you look at it, you are in a no-win situation.

One or two static graphical ads per page should be sufficient. Use text ads if there is need to include more than two ads on your page.

This is a problem I see over and over again on web sites. There are some web designers out there that insist on using images in spaces which they cannot fit. The best solution here is to simply resize the image—preferably in an external image editor—so that the image can be optimized accordingly.

Unfortunately, using HTML to resize images does not optimize them. The proportions to which the image is resized also mess up the image. This can clearly be seen in images where the people have either been stretched thin or compressed, making them look unnatural. Adding the distorted image then works against the web designer by making the design look unprofessional.

Always resize images in a fixed ratio or based on a percentage. Also never scale the size of any image upwards, but rather down in size.

So you figured out how to make a new window pop up dynamically, but no, you decide that is not enough and you go ahead and create an entirely new operating system that runs exclusively within your website. You then make the grave mistake of testing it in a single browser and version. Now that it works, or seems to work, you think everything is fine and you are happy. But what will your visitors actually experience?

The reality of web design is that it is not all that straight forward. Scripts and CSS code that run in our browsers are quite fragmented and buggy, and there is no way of knowing how it will work on different browsers than to simply test on each one of them. That is the simple solution. Whatever you do, make sure you design with the user in mind, and test it on all target platforms and screen resolutions.

Patterns or deep detailed graphics should never be used behind plain text. Patterns only work well when there is no text in the foreground, making them have a primary role in the design. Where there is text make an effort to place the text on a plain background. You should also have dark text over a light background to make it clear and easy on the eyes. The ideal here would be black text on white or a near white background.

It is also good to note that background patterns or text on images can be disturbing to many visitors because the difference in contrast and color tones do not sit well when viewed on screen, especially where there are complementary colors involved. The problem again is made worse if the background image is animated.

The rule of thumb here is when presented with a choice of a consistent readable font over beauty, then you will be better off going with the consistency. Fonts displayed on web browsers rely heavily on the fonts found on viewers' computers.

Fonts like Arial, Helvetica, Verdana and Times New Roman are most likely found on every computer. Using a mix of fancy fonts will not get you anywhere, even though the font may appear on the user's computer, simply because some fonts are not scalable while others are not legible on most displays.

A font like Verdana is designed to work well on all displays. This would be a good choice of a font. Pick a single font throughout your website and stick to it. Do not be tempted to pick a font, which may never display on your visitors' computers simply because they do not have it.

This is the eternal sign of bad web page design. Why is there the need to display everything your web site has to offer on the home page? The home page should be clean and informative in as few words as possible. There should be a clear navigational model that allows the user to reach any other page for more information right from the home page. The home page is your first impression, which will either make or break the rest of the website.

If possible, try to provide all the relevant information within the fold of the page or provide an allowance for scrolling of just about half to one page length. Make appropriate use of white space within the elements of your page.

Following these keys makes your website aesthetically appealing and gives the visitor a welcome feeling—and not one of being intimidated or forcefully stuffed with information.

On rare occasions, there may be a need for more information on the home page that pushes the need to have long scrolling pages. This is evident in cases such as news websites.

There is nothing more annoying then when you land on a website and have to figure out how to navigate through it, only to start the process all over again because the next page is a totally different layout—and so is every other page.

Keep web site navigation and design layout consistent with itself as well as other web sites. Trying to be unique and standing out on the web does more damage than good. Most Internet users are familiar with how navigation works on the other 99.9 percent of web sites they visit, and they expect yours to work the same.

They want to be familiar with your web site when they visit it. This means they should be able to comfortably navigate your site on instinct. If this does not happen, then you could lose your precious visitors when they find a complicated landing page. How about when your visitors now have to repeat the process on each subsequent page?

How would you like to read an ad in the paper about a new restaurant down the street which just opened? You prepare yourself, take a walk or a drive down to the restaurant only to get there and find a big under construction sign hanging at the door. That is exactly what you do to your web site's visitors whenever you place an under construction message.

Here is another way to look at it. A web site is always a work in progress and therefore is technically always under construction. If your web site is not ready to be viewed, then you have no business putting it out there in the first place. Get it done, then publish it.

Plan your web site updates and enhancements around a model that allows the least amount of downtime but never bring down your entire web site and mark it as under construction. Search engines also penalize sites which display under construction messages instead of other relevant information.

I could probably come up with a whole book as to why this is wrong. For starters, no one downloads a web browser to view a single web site. Telling someone that it's best to use a certain browser crosses the annoyance threshold.

Never take control of your visitor's computer or desktop environment. That is why it is called web browsing. It is your duty as a web designer to ensure that your site works in as many web browsers and platforms as need be. If you target a closed environment such as a corporate Intranet, then maybe you can be excused for targeting a particular platform and you may include that fact in the user manual.

The situation gets worse when you have to force my poor little granny to tinker with the operating system graphics resolution to exclusively view your website. If you cannot design websites with the user in mind, then you have no business being a web designer.