Ugliest / Worst Business Web Sites of 2009, But You Can Learn Something From Them
The only thing you can learn from most bad web site designs is the need to nuke the site and start over. A companion list, Worst Over-The-Top Web Sites of 2009, features these car wrecks on the Information Highway.
I have a second list of business-oriented web sites — Worst Business Web Sites of 2009 — but, with some exceptions, the only thing you can learn from them is "Don't Make Your Web Site Look Like These Sites."
The following sites have specific design mistakes and there is a chance these sites can be salvaged. If you learn from their mistakes, you won't be throwing money away.
A few of the things we can learn: "Just because you can, doesn't mean you should," eliminate unnecessary design items and get somebody else to look at your web site.
Vincent Flanders' comments: Ironically, the site has found a good use for animated images — to show off their 3D graphing software. Unfortunately, they couldn't leave well enough alone and had to use an animated GIF background.
One lesson you should learn is "Just because you can, doesn't mean you should." There's no need to have an animated background nor is there a need for so many animations.
This corresponds with another of my recommendations, "Eliminate unnecessary design items." Following this rule will do more to help your site than about anything else.
All they have to do to improve the site and raise it to the level of mediocre is just remove the animated background. I just changed one HTML statement and made the site infinitely better. (In case they remove the background image, here's a screen shot of the original page.)
Every site benefits by having someone else look at it.
2. Gates and Fences
A few of the things we can learn: Gimme Focus, tone down the graphics, eliminate unnecessary design items, make your text readable, don't use music files and cut down the file size of the page.
Vincent Flanders' comments: My first reaction is “Where's the focus?” My eyes are immediately drawn toward the large picture of a welder — which would be marginally OK if this was a welding web site.
My eyes are then drawn toward the garish red navigation buttons (I swear I have these somewhere on an old machine). Next, I look for the logo and I don't find a “real” logo, but some text saying “Welcome To Gates N Fences.” (You don't have to say “Welcome to” because they've already made the commitment to go to your web site.) Because I think they must be links, I mouse over the two pictures at the top of the page. They're not. What you get is text that's impossible to read.
There are a lot of design elements to eliminate, starting with the background image. Get rid of what's trying to pass for a logo and get a real logo. Eliminate multi-color links. Links should be one color (not red and blue).
While not impossible to read, it's difficult to read the text on the home page. On one of the pages, we have an incredibly cheesy credit card graphic (it says "Buy Now”) floating across the page. Speaking of incredibly cheesy, I'd like to comment about the music (Kenny G) that automatically plays when you visit the site — in Internet Explorer (not with Firefox and maybe other browsers). You have to pay to play.
You can't put music on your site unless you pay for the privilege. See my article Why You Can't Use Music On Your Web Site. It's possible they paid. The company is in Miami and they make really cool gates and it's possible they traded one for the use of Kenny G's song. It's possible. (Update: Kenny G has left the building.)
The home page is around 2.45Mb, with 2.28Mb consisting of that Kenny G song. Gosh, if they get rid of the song, the web site would load much faster. Here's another company who looks like they have excellent products that has a less-than-excellent web site.
3. WeighMax Precision Scales
A few of the things we can learn: Physically reduce the file size of your graphics, make sure there's enough contrast between the text and the background, check your site in different browsers (this tip is good for any site) and tighten up the white space.
Submitter's comments: I was looking for a postal scale the other day when I ran into this site.
The front page has dark gray letters on a light gray background (here's a screenshot because it may have changed). Sure most of the text is too small to be readable. But what really sets this page apart from most crappy pages of this nature is on top of the Flash — the totally inexplicable “Welcome to http://www.WeighMax.com” in that neat “In the future, letters will not be human readable” font.
Click on the Mailing postal scale link. Yep, there is not a better way to showcase your products than to take a large picture and use HTML to make it into a thumbnail. I also doubt if anyone would comment if the large bit of moving orange wasn't there at the top.
Vincent Flanders' comments: Does anybody ever look at their web site? Here's a screenshot. Scroll down and ask yourself, “Can anyone except a fighter pilot or professional athlete read the text?” There's not enough contrast. The background color is #E9E9E9, while the text color is #777777. This would work only with large text, but we know it's too small. There's a special spot in web design hell reserved for whoever's signed off on this.
The “Mailing postal scale” page doesn't work in Firefox. Somebody didn't use BrowserCam to check out their site in different browsers. This is an amateur's mistake. Oh, the HTML as thumbnail concept shows you're not even an amateur. Here's what one of the 220Kb scale images really looks like.
Other comments #1: The orange Flash animation is an unfortunate problem — failing to set your wmode to transparent in both the embed and the object tags (or even, shock horror, using a Flash insertion method that doesn't suck) is an easily correctable problem. At least they're using Flash for what it's supposed to be used for on web sites — flashy non-essential stuff.
All the site really needs is a few simple corrections — mainly just the contrast, the thumbnails and to replace all those text-images with actual text. If they really, really want to keep the space-age text, then there's sIFR or any one of the other alternatives for keeping those things machine/human readable.
Other comments #2: Seldom do we see so little displayed on so much real estate. This site wastes 3/5 of the page real estate, consequently more miniature pages have to be reviewed to see the full line of products. What's with the stupid animation? It's always a good idea to have a native speaker do the review of translated pages. What's with the damned animation?
NOTE: Site seems to be dead.
A few of the things we can learn: Don't use horizontal navigation and make sure there's sufficient contrast between the text and the background.
Submitter's comments: I guess I just really don't get the fact that to read anything on the page, the user has to horizontally scroll instead of down like a normal web site…I'm sure there's more about it that sucks pretty hard. For a bar that prides itself on being pretty edgy (it's the only bar in the world with no bartenders — and a touch screen menu), their web site is pretty…blah looking.
Vincent Flanders' comments: Strange. I thought horizontal scrolling was a thing of the past. Obviously, it isn't. Once again, we have contrast problems. The Halloween-themed black text on the orange background is difficult to read and lack of contrast is listed as the 3rd biggest mistake in my article Biggest Mistakes in Web Design 1995-2015:
According to Wikipedia: “Contrast is the difference in visual properties that makes an object (or its representation in an image) distinguishable from other objects and the background.” According to Vincent Flanders: “Without proper contrast, visitors to your site can't read the text and if they can't read it, they will leave it.” Here's a web site that gives a really great explanation of the need for contrast — and it's visual.
Other comments #1: To me, this is Web 2.0 "gone bad." Someone tried too hard to be hip and trendy in an overly minimalist way, and produced a site that is visually dull and not very informative (at least within the first few seconds ).
The horizontal scrolling is such a stupid, rookie thing that I almost think it is intentional — just to be different. On a good monitor, the contrast isn't great, but doesn't seem that bad.
I guess what bugs me is the site's content...where is it? While one can guess that the site is about wine, one's first impression certainly does not confirm it. The image gallery seems a bit...no, totally...specious.
Upon reflection, I guess that the site is most definitely not there to attract customers; they certainly don't want ME there. Maybe it's there to make current customers feel privileged and to stroke the egos of the site owners.
Finally, I simply refuse to accept the idea of having a machine dispense my wine. This totally eviscerates the age-old experience of enjoying fine wine. I want a congenial, knowledgeable wine steward/waiter to serve my wine; not some machine from Star Trek. Actually, I guess it really isn't about the wine at all; it's about seeing and being seen with a serving of wine as one's prop.
Other comments #2: The previous comment hit the nail on the head when he said that this web site seems to exist "to stroke the egos of the site owners." That may explain why so many web sites suck — the owners are so caught up in patting themselves on the back "lookit me, me kewl, me own web site" that they overlook that it sucks big time. Why else would rational beings foist such nonsense on the long-suffering world? I think "built to stroke the owner's ego" needs to be right next to "looks like you've never seen another web site" in Vincent's lists of sins.
Other comments #3: One of the ugliest, most useless sites yet. Side scrolling is useful for a photo gallery now that processor speed has increased so dramatically and is preferable to a separate gallery page on an entertainment fan site. We've all seen the old, slow click-by-click gallery pages.
Unless the visitor hovers the mouse on this gallery, the pause and continue buttons won't be seen. All that said, the viewer should have total viewing control of a gallery and side scrolling is the only way to deliver the speed and convenience required. I usually format all my pages so that the body of the page can be easily printed out while the margins are reserved for off-site web sites. But on star pages, I use the right margin thumbnail space to partially reveal a photo of the appropriate actor/actress. The method was test marketed and found to be intuitive.
5. Wyatt Technology Corporation
What we can learn: Don't write drivel. Your web site is not about meeting your needs; it's about meeting your customers' needs (this applies to every site).
of Intelligent Design…
That's from the introduction to the video. Personally, I think they're the product of someone with too much money, not enough taste and way too much time on their hands. It's drivel.
The Wyatt drivel wasn't written for their customers, but for the people at Wyatt. Wyatt forgot the two major tenants of web design:
- The only reason my web site exists is to solve my customers' problems.
- What problems does the page I'm looking at solve?
The page solves nothing.
6. Neck and Back Pain Chiropractic
A few of the things we can learn: Don't use graphics for text. Don't make your web site out of one image, make sure your graphics are logical and make sense and make sure there is enough text for search engines to use.
Submitter's comments: Here's an example of awesome Search Engine Optimization. EVERYTHING is an image. Horrible TITLE tag and, of course, it's a chiropractic site.
Vincent Flanders' comments: Everything is actually 56 images. I went to Summit Media and used their Online Spider Simulator to check out this site. The report was quite interesting as this graphic shows. There are only nine words on the whole page — Neck and Back Pain Chiropractic, LLC – Dr. Malcolm Hill — for search engines to use to index the page. Oh. Those words come from the TITLE tag, not from the body of the page.
The shadows on the text make it harder to read. On the positive side: it's a good domain name and the doctor looks like a doctor. It's a high-quality photo and you would feel comfortable going to him. If you don't agree, take a look at this made-up version of his web site with a new "doctor's" photo added <grin>.
Oh, we've got some shadow problems. Shadows are usually only in one direction. The doctor has illogically placed shadows.
Other comments #1: A nice-looking page, at least. I don't have any issues with the doctor's photo; the obvious (to me) intention is to give the home page a personal "from-me-to-you" feel. It's just a shame about all the images. It's also too bad that there were no knowledgeable developers around to properly implement what is arguably the best-looking Chiropractor site I have ever seen.
Other comments #2: Fireworks + Dreamweaver. This is site created by an artist who created the entire home page in Photoshop and then let Fireworks cut it into pieces. There used to be more sites similar to this when Adobe GoLive (and ImageReady) was popular with a certain crowd.
Other comments #3: The page appears to have been built to fit a 15" screen on my 17" LCD. So much real estate was wasted that the page requires scrolling. The shadowing effect makes reading the white font an even more difficult task. Wonder if he has a dietician and doctor of divinity degrees also. Can I get an order of fries and a bible with that?
7. The Demographics of the Republican Party
What we can learn: It's important to be credible.
I realize that most people who go to GOP.com are true believers but, still, you don't want to provide fodder for your opposition.
If I've done the math correctly, it appears that the makeup of the GOP is 33% African-American men, 22% African-American women, 33% young white women and 11% chubby white men. Hell, even the Democratic Party isn't that diverse. Nobody who has an IQ higher than an ice cube is going to believe these people are the Republican Party. It makes you wonder, what else shouldn't I believe?
What we can learn: Contrast! Contrast! Contrast! This is a recurring theme.
Submitter's comments: I was researching about a medical issue that a very close and dear friend is suffering from when I clicked on a link that took me to a pharmaceutical company. I remembered that your biggest peeve is lack of contrast between the text and the background. Well, not only does this page (and site) have a lack of contrast in the text, but when you mouse over the menu items you get text that's almost impossible to read.
I ran the page through AccessColor and it turns out that 87.46% of either the color difference or color brightness does not meet the W3C recommended standard. Oh, and to top it off, they're using what you call "Satan's CSS" — #666.
Vincent Flanders' comments: NOTE: Page no longer is active. Heck, it has been six years…what do you expect? Anyway, the comments are applicable to websites in general.
I can hear trophy wives throughout America saying, "Just what we need. Another ED drug." Yes, you're right, the contrast sucks. Yes, it is my biggest complaint. Lack of contrast is the biggest problem for sites that are, otherwise, well-designed.
Other comments #1: I normally believe most contrast arguments are just nit-picking, but thanks to WPTS, every time I roll over the swatch for medium grey in whatever application I use, I can only picture a little devil sitting on my shoulder whispering "Do it. Dooooo it."
Ignoring the medium grey and the nearly invisible #999 slug lines in the background (Hey Vincent, that's an idea. Do a page with subliminal "buy my book" texts hidden in #999 on white backgrounds), the most interesting feature here is they're using sIFR to replace their header text with Flash... but don't appear to be using any font that wouldn't just as well be replaced with generic sans serif (according to the source, it looks like they're using Helvetica Light). sIFR's a useful tool, I'll be the first to admit, but the bandwidth increase for someone to download a font just to display an indistinguishably slightly different variant of a core font is a bit suspect.
Other comments #2: The contrast issue is fairly obvious and requires no further comment. What I cannot understand is the text that, to me, is much too small if one considers the rather substantial amount of whitespace. I do understand the importance of maintaining adequate whitespace, but this goes too far. I guess the designer had a really good monitor and good eyes, but not all of the site visitors will enjoy the same.
Other comments #3: The bad news is this site absolutely sucks. At least half of the page real estate is wasted which in turn requires the pages be scrolled. Add the very light green mystery meat popout navigation and the small light font and it becomes a real drudge. The good news is two (pejorative term deleted) have a job — the one that built the site and the one that bought it. More good news — they are seeking new employees. Attention webmasters, opportunity knocks.
Other comments #4: But hey, at least you can download their logos in various formats. Tell me again: why would I want to?
A few of the things we can learn: Don't use Microsoft FrontPage Themes. Stay away from 3-D text, bad color schemes and mission statements. Give your pages a search engine friendly TITLE tag.
Vincent Flanders' comments: The site's been fixed. Here are my original comments: Just saying "the site is using Microsoft FrontPage Themes" is enough to explain away the ugliness. You have to admire the 3-D text — especially the word "Fiesta." Even web sites for gay bars have more sense than to use this color scheme (I'm basing this on my Google searches).
Don't forget the Mission Statement on the home page. Only non-profit organizations should prominently display Mission Statements. As someone so wisely put it, "Every Mission Statement can be reduced to 'All Babies Must Eat.'"
The TITLE tag for the home page is the ever-so-useful "Home." We have at least one "Under Construction" page.
The Table of Contents page is basically useless. Most of the link names don't tell you what you're going to see when you click. If there's one thing, you should have learned by now is that when you see a "Click Here" link, it could be NSFW — like this link — and scary and disgusting.
Other comments #1: Praise the Lord, Alleluia, the web site is copyrighted and will never reproduce.
Other comments #2: IMHO, either you have exciting stuff that other people (besides your mother) will be pleased to see (in which case, by all means list it!) or you... don't. If you don't, then don't create (or at least don't publish) a list of nothing. It just makes it look EVEN MORE like you don't know what you're doing.
FOTV screen capture
10. New Zealand Chess Supplies
A few of the things we can learn: Don't use cheap clip art and make sure your navigation is logical,
Submitter's comments: While looking for a local game supplier I came across this web site. Maybe it's me, or maybe it's the type of people who play chess (I was looking for backgammon supplies!), but at first glance the site is just boring. This design is homespun and unprofessional and the images look like clipart from 1993.
The whole site turns me away from purchasing anything from here. Every page seems to be formatted differently giving no consistency to the web browsing experience. Considering they are selling some fairly expensive items, like backgammon boards up to $96NZD (currently about $70USD), I would expect a better experience for my money and a feeling that I would get a product I would value.
Note: To view this site, you have to copy the link and enter it into your browser - http://www.chess.co.nz/
Vincent Flanders' comments: If you click the “Welcome to our website” link on the home page (to begin with, you shouldn't be using the message “Welcome to our website”), you're taken to what you would logically believe to be “the site.” It's a site map, but since the home page is so old and boring, it's not hard to believe that this is the site. When you click on any of the links, you're sent to a product page — but there are no prices. Worse, there's a message at the bottom of the product page that says, “CLOSE WINDOW.” OK, but if you click it, it closes the site because when you originally clicked it didn't open a new window. You're closing the whole browser.
What you're supposed to do — but have no way of knowing — is that if you want to see product prices you have to use the small navigation at the top left.
It looks like the site was designed for a small screen and the left background image repeats itself.
Yikes. This is horrible.
Other comments #1: Eek! And these people expect me to enter my credit card details? This is one of those sites I'd love to get my hands on, just to tidy it up a bit, because the stuff they sell looks quite good, and it could be a decent site with not too much work.
Other comments #2: What kind of logic is it to use numbers instead of text descriptions for items? It's like walking into a shop and instead of seeing the product you might want to buy, you see numbers, "Yes I'll take number 8, whatever it may be".
New Zealand Chess Supplies — Note: To view this site, you have to copy the link and enter it into your browser - http://www.chess.co.nz/