Top 10 Most Embarrassing Website Mistakes

First, I’m being kind in calling these mistakes. You don’t just do these “by mistake” — it requires a willful action to do something that to most people is a blaring faux pas. As the web matures, I see these less and less often, but new, enthusiastic web designers who are primarily technical people aren’t always wired in to what users expect when they visit a site.

So here they are: the top 10 things that will wreck the credibility of your site. Please note I am not ranking them by how ridiculous they are because any of them should get you fired if the website project is paid work, and possibly are in violation of the Geneva Convention.

#1 Visitor Counters

These went on life support at the end of the last century and died with kiddies using MySpace finally becoming adults. Almost anything a counter says is a potential embarrassment: either the number is really low and tells you no one cares about the site; it’s moderate, meaning one or more people keep hitting refresh to jack the number up; or high, meaning you started the counter at an inflated, fake number. Nothing screams liar like being visitor number 10004.

It’s more modern cousin is less puerile, but still awkward — the “click here for stats” link. Sure the data is more interesting — to you, maybe. But unless you are selling ad space, keep it under the hood. It still evokes the question to the average user, “Why is this here”?

#2 “Best Viewed With {Firefox, IE, Chrome, etc.}”

The browser wars are not your concern. Stop telling people what browser you decided they need to use based on your design. Making a site functional and looking reasonably good in all modern browsers is your job.

#3 Monitor Contrast Test

Seriously? The job of your website is for people to make sure their monitor is calibrated? I haven’t seen this one in over a decade for a reason, so enough said.

#4 “Best Viewed in {some WxH screen resolution}”

Really? Okay, this is forgivable, given you live in a TARDIS stuck between 1984 and 2005. From the start, HTML was designed to be flexible enough to accommodate multiple resolutions, and life was good considering monitor sizes were limited and slowly got larger. But in a world where most web viewers are mobile devices of any number of sizes, you can’t target any one slice of the range. The solution is to optimize for a moderate screen size (fixed width being less than average monitor resolution on laptops and tablets), or better yet use responsive design. Whatever. The point is you can’t expect people to put down their phone and find a PC at the local library to look at your site. Which brings us to:

#5 Oversized Web Pages

I can always tell when someone made a website using a monitor that doubles as a screen for a drive-in theater. I’m sure it looks normal to them, and every other page on the Net was obviously made too small. Sorry, no soup for you. If people using the typical screen resolution du jour and have to scroll sideways to see it all, you did something wrong, not them. It could be layout or oversized images, usually both. Fix it and test on your grandmother’s PC.

#6 Huge File Sizes (images)

Like the oversized monitor warning sign, I can tell when people either have a screaming-fast connection or only test the copy of their website on their computer. Today’s almost ubiquitous broadband made download times almost a non-issue, but increasingly insane and uncalled-for camera photo resolutions have brought back the headache. The most important thing that people get wrong is that IMAGE SIZE IS NOT FILE SIZE. What you see on the screen is surprisingly irrelevant to how much space the file takes up on your computer, and more importantly, how long it takes to load.

There are two reasons for this. The first is that you can “resize” how an image is on a webpage without changing the dimensions of the file itself. People who do not understand that a “thumbnail” is a separate, SMALLER VERSION of the original need to learn this pronto. The second is that two photos (or other graphics even) that are the same dimensions in pixels can be different file sized by a scale of 100 timers or more. Seriously. It’s too much to get into here, but file type and compression make all the difference in the world, and done right will show no difference in quality. Usually resizing the (non-thumbnail) image to be no wider than a typical screen and re-saving as a JPEG with even slight compression will do the job.

#7 Background Music

If you are making a site for a movie or band, feel free to push a video or audio clip in the visitor’s face. Better yet, allow them to choose whether or not to play it and not alert their co-workers you’re surfing on company time. Otherwise, don’t think about it. I’ve broken this rule a couple times over the years at the client’s insistence and threatened to take my company name off the credits. And if you use MIDI music, ever, anywhere, I will hunt you down. I will find you. And I will kill you.

#8 Painful Text-Background Color Combinations

Either you are color-blind in this respect or you are not. If someone says “it’s kinda hard to read”, and the font set and size is typical, they’re probably being nice by not requesting you be a ward of the state so someone can dress you at taxpayer expense before you go outside. So listen carefully when people say this. Test trial it out with people you don’t know. Do it. For the children.

#9 Animated GIFs

No one objects to a waving flag once in a while. On a page for a personal hobby or organization not expected to have a budget to do things right, it doesn’t look so dumb. Now add in more waving flags, hands popping in and out of mailboxes, starbursts announcing “NEW!” and “UPDATE!”, flashing horizontal bar separators, and congratulate yourself. You’ve just created an ADHD circus. Which when combined so often with MIDI music, the 1990s truly was the Dark Ages of the Web. That, and the fact that people who made such web sites worked from their parent’s basements. For the love of all that is wholesome, it’s time to get out of the basement.

#10 Excessive Stock Graphics

This is a grey area. First, let’s be clear we’re not talking about official logos, but generic images that either accent or distract from content. Secondly, let’s distinguish between CLIP ART and STOCK PHOTOGRAPHY, the former a definite step below the latter in terms of professionalism. They can be used sparingly — as in one or two images per page. But any more than that and it’s obvious filler, or someone still recovering from changing times not allowing them to use a bombardment of animated GIFs.

Iconic images directly related to the topic can be exceptions to this rule, especially if it’s artwork emblematic of the subject. Again, sparingly. Heck, you can even get away with a line-drawn hot dog if it’s on a post announcing a picnic. Just remember, the website is not a street sale flier. Unless it’s for a street sale, in which case professionalism isn’t expected. But again, less is more, and sometimes none is better than one.