Web Pages That Suck - learn good web design by looking at bad web design

Submitter’s comments: Probably going to win all sorts of awards for innovative, clever, and other pointless words, but as a useful helpful and informative site it is a bit of a disaster. I have no idea what all those people are doing and what I’m supposed to do except listen to all those annoying sounds. And I bet they spent millions on the site as well.

Vincent Flanders’ comments: I think it’s going to win at least one award—WebPagesThatSuck’s Worst Website of 2011. On the other hand, it’s mathematically possible for some other site to be worse. Nah. Vegas is putting it as a 2-100 favorite. The site is not a “bit of disaster”, as the submitter suggests. It’s the black hole of f**king death of disasters.

The good news is that you can use Xerox’s site as an acid test. Ask your favorite designer what he thinks of the site. If he likes it, you know he has his head so far up his ass he can kiss his tonsils. If he hates it, the odds are good that s/he’s a designer who understands that websites are about providing information and solving needs.

I swear the bald guy on the Finance and Accounting Floor is the brother of the talking bald guy at Mr. Bottles. I like Mr. Bottles’ talking guy better. The Xerox tool sounds like just another pompous assh*le.

Just as a piece of trivia, the Xerox site looks even worse on a portrait monitor.

If you’re “lucky,” you’ll get a chance to fill out a survey about the website. Please do. My readers are smart and hate stupid websites.

Xerox Real Business

Submitter’s comments: iPearl is source page for mCover, and produce third party covers and protective cases for laptops, e-readers, and so on.

My main objection, apart from the fact that the page looks like it was designed 15 years ago and never updated, is the fact that it WAS updated and yet looks poos. Most of the low quality images of the devices they provide covers for has a mouse-over with some information and more low quality images of the same products. And by low quality I mean they seem to have stripped the colour depth out of the pictures for some reason so instead of gentle shading they you see spots of different shades . There is drop-down box in the top right to let you jump straight to a product, in my case Amazon Kindle, and lo! there are further web pages with animated gifs in low quality images, and far too much text.

I was going to pull this email and not send it once I saw, hidden at the top of the home page, a link for their new site (umm, whatever happened to redirects?). But then I looked at it too.

While it does look better the same low quality images are there, among a few more fundamental errors, like showing the wrong product in the image (there is a Kindle 2 in the picture for a Kindle 3 product).

Biggest issues with these sites:

• Low quality images
• Text in images (why? why put text in an image and then shrink the image? WHY?)
• Animated gifs
• Terrible text colour choice
• Overall design

And, why, if there is a new site that is intended to take over from the old site, isn’t the old site decommissioned and a redirect put in place?

I think they just don’t seem to be marketing themselves very well at all. I will admit they seem to have learned a bit between the iPearl-inc site and the mCover site, but it’s still not great, and there are some fundamental problems they haven’t fixed.

Personally I’d not give them my money until they correct the rest of their web issues.

Vincent Flanders’ comments: This is a stereotypical situation. The company—which probably makes/sells good products—has a website that gives the impression they make/sell crap. If it’s not Rule #1, it’s close to it—people want to do business with people who look professional.

I’d also add that there are serious text contrast issues.

mCover (old site)

mCover (new site)

Submitter’s comments: How about a directory of hotels that dances across the screen so you can’t read it or access the information?

All written in tiny white lettering that frequently sits on top of a white area of photograph so that can’t be read either…Magnificent!

Vincent Flanders’ comments: Once again, my first question is, “Where’s the focus?” Because the navigational buttons have different colors, it keeps me from focusing on them and they’re also hard to read. I don’t see any “dancing” directories. I just see ugly web design.

A lot of text is hard to read because of the lack of contrast and the size of the type—it’s too small. I bet the site was designed on a laptop, which makes every element larger and easier to read.

As bad as the “More Hotels” may be, the home page is no slouch when it comes to sucking. In many ways, it’s even harder to read the text here than on the “More Hotels” page. Plus, you generally sit closer to your laptop’s screen than you do to your monitor on the desk.

ChesterTourist.com – More Hotels

Submitter’s comments: Here’s a good one for you—an ugly yellow page.

Vincent Flanders’ comments: So many websites have too little white space. This site has too much white space. I’m also confused by the CSS. Besides several CSS files, we have a truckload of CSS in the document head. Some of the subpages have a completely different look, plus the Custom Books page uses a lot of all-cap text, flush-left text, flush-right text, centered text and multiple colors of text.

Coupons On A Key Chain

Submitter’s comments: Ohdeargod this site is abysmal. Impossible to navigate, overwhelming to look at, a fondness for orange-on-white text (in Flash, can’t be selected to copy/paste). Easily one of the worst product websites I’ve ever had the displeasure of visiting.

I just wanted to know if we could use Pine Sol on wood…

Vincent Flanders’ comments: If you know where to look, or if you get lucky, it isn’t hard to find the answer to your question. Unfortunately, it’s not good to base your navigation on your visitors’ luck or prior knowledge of a site they’ve never visited.

Initially, I was overwhelmed by all the choices. Since my monitor is set up in portrait mode, as soon as the page loads it starts scrolling. Not only is there some vertical scrolling, there is lots of horizontal scrolling. The key to finding out what to do is focus on the middle green square—”WELCOME TO THE WORLD OF PINE-SOL.” The trick is to notice the small type that says, “Or click on”, which is followed by TABLE OF CONTENTS. That’s the secret square. “Cleaning wood” is one of the menu choices.

Too confusing. On the other hand, someone did a nice job of making the 2 billion different colors work harmoniously with each other.

Pine-Sol