Illustration by Dean Proudfootat Idealog.*

But, sometimes, it’s really hard to put your finger on what exactly isn’t quite right. [...]]]>

Illustration by Dean Proudfoot
at Idealog.*

But, sometimes, it’s really hard to put your finger on what exactly isn’t quite right. And when it comes to bad website design there are a lot of opinions on what makes a site not just good, but great.

There are, however, some very obvious things that stick out to clearly make a website distasteful (and please leave a comment at the end if you want to add to this list!).

Elements of Bad Website Design

1. Frames. These are the sections of a website that have their own scrolling areas. There’s really no need for frames. 2 reasons not to use them: 1) They’re annoying to visitors, 2) Some browsers have a hard time rendering them.

2. Sound. Unless you’re a musician I would strongly advise against using any kind of sound. If you really must, then have a way for the visitor to turn it off. The only time I’ve seen music done very well was on a photographer’s website. It was set to a very tasteful slideshow presentation of their photos. It added an emotional touch that made me want to pick up the phone and give her a call to hire her!

3. Flashing Animation. Animated gif’s are even worse. This is similar to the reason for not using sound. It forces a barrage of images on the visitor that can easily cause them to hit the back button. Flash animation must be very reserved and subtle. The only site I have Flash on is In Its Place. The header graphic gently scrolls through before and after pictures of client’s messy homes.

4. Flashing Background. ANY background has to be done carefully (ie. subtly). But, a flashing background is too strong visually to compete with the content of a site.

5. Obnoxious Colors. The topic of color for websites could be a whole site in itself. Selecting colors, and the psychology of colors, is a fascinating topic for me. So far this is the best resource I’ve found for helping pick the right colors for a website: Color Scheme Designer 3. Playing around with different combinations just makes my mouth water! I bet this tool could even be used for picking colors for interior design. Beautiful stuff.

6. Inconsistent Navigation. The same navigation scheme should really be on every page of a website. And the most easily read and used style of navigation is to place it vertically along the left hand side of the page. It’s also a good idea to have redundant navigation, meaning more places on your site for visitors to find information. Put a few important pages in a horizontal navigation near the top, and similar links to those pages at the bottom.

7. Difficult To Read Text. It seems to be very trendy right now to make the color of text a mid-level grey color. It’s jokingly referred to as the “devil’s color” because the hex code is #666. Making your text anything but black increases the difficulty with which it can be read, especially by the elderly and others with vision problems. Black text on a white, or nearly white, background (and a large enough font) will make it a lot easier for a visitor to read your information.

8. Broken Links. Isn’t it annoying when you try to follow a link from a site and it goes nowhere? Keep up-to-date on your links by checking them with a link checker.

9. Broken Pictures. Either the background coding is wrong in referencing where the picture lives, or the webmaster didn’t upload it to the right folder on the site. And if an image is referenced off-site to a now-nonexistent picture then the link needs to be taken down.

10. Image Files Too Large. Most digital cameras now take pictures that are several megabytes large. That’s great for printing out a large hard copy image, but it doesn’t work for a website. Especially now that search engines will be factoring in how fast a page loads. Those big images are really going to handicap your site, not to mention really annoy anyone with a dial-up connection.

The rule of thumb for images on any website is to keep the file size under 100k, and to size the image to exactly how you want to display it on your site. Don’t rely on setting the height and width in your code to render the image the way you want, do that in your image editing software first.

11. Splash Page. Who is really going to be convinced to buy from your company solely on a flashy splash or entry page? They are annoying, and an invitation to hit the back button. A visitor comes to your site to solve a problem, not be impressed by your theatrics.

When I set off to write this post I thought this would be a fairly simple article. I’ve ended up doing much more research on this topic than I intended. Which is a good thing! You can never learn too much about web design.

Designing a website for best usability and conversions (convincing browsers to become buyers/clients) is a never ending game. You learn from every website project you create and manage, and hopefully apply those lessons to improve your future websites and make your current ones better.

That’s one of the wonderful things about building a website… it’s an ever-changing entity that needs to be tended, much like a garden, for best results in the end.

Other’s Opinions of Bad Website Design

The classic resource for finding badly designed web sites is Web Pages The Suck. They’ve been around for a very long time (close to 15 years now). Vincent Flanders, the guy that runs the site, offers 2 very long checklists for redesigning your site. Very helpful and insightful.

Just going through the examples gives you a really good idea of what doesn’t work. Sometimes there’s no accounting for taste, as they say.

The biggest point Flanders makes is to ask yourself “does my site talk about how great my company is, or does it talk about how I can solve my customer’s problems?”. That’s part of the reason I don’t have my resume on this site. Why should you care about my past work history? I put forth samples of my work, and talk about how I can build your business a great website that brings in customers for you (and give you a roadmap if you want to do it yourself!).

A couple other good resources are Bad Design by, of all people, the United Nations (no kidding). Another one is Top 10 Mistakes in Web Design by Jakob Nielsen, the guru of web usability.

In the end if you don’t really learn anything from every website you build, then what’s the point? Sure, every site has some issues, which will hopefully be corrected over time. That’s the beauty of web design… a website is such a fluid entity that it’s fairly easy to modify what doesn’t work.

As my Dad sometimes says: “Some people can serve as a horrible example.” Same goes for website design.

Update 2/11/10. After talking to a friend I think there’s another item that could be added to this list:

12. Call To Action Make it easy for people to buy your product or contact you. Don’t make them hunt for that kind of information. Whether it’s an “add to cart” button or a “contact us” link it needs to be made obvious.

*From Idealog magazine, New Zealand.

For smaller sites this is a [...]]]> There have been many useful and interesting add-ons to Firefox to increase usability. I just recently discovered another one: a free link checker from Kevin A. Freitas. It’s a great way to check your link validity, but one page at a time (which can get a little tedious).

For smaller sites this is a great option, but for larger sites you’ll probably need to go with something with more firepower, like Web Link Validator. There’s a “lite” version (which is free) and a heavy-duty professional version (with a heavy duty price tag!).

For WordPress there a nice little plugin called Broken Link Checker. With this plugin you can check your links for any breakage from the back end admin panel.

And for anyone who doesn’t know about the relevance of broken links check out Google’s word on link checking and broken links. Webmaster Tools does list any crawl errors that come up for your site, but depending on the kind of error it may not show you the source page of the error. Frankly, I don’t think this is very helpful to list an error and then not give an indication of where to find it on your site.

If you have other suggestions for free ways to check you site’s links please let me know. I’d love to add to this list.