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

Submitter’s comments: I find it hard to believe that someone at some point in time found this “cool” and paid for it. It’s an Austrian university’s website.

The above is the link to the English version. The German version opens a pop-up onload as an extra. So all non-German-reading visitors are really missing out! :P

The “C” metaphor of the navigation scheme is obviously derived from the logo. But just because you can doesn’t mean you should! It’s wrong to put the logo on the bottom right, especially
when there’s so much empty space on the top left of the page!

The navigation is a set of image maps, and the whole thing is in layout tables.

I also dislike that on the home page it doesn’t highlight individual links on hover, making the blocks of links look like one huge link and that the subpages are made with frames.

If you reload the page with JavaScript disabled it will show the links for Masters and Bachelors degrees. As far as I can see, you can actually reach all content without JS and images enabled, but the metaphor really loses whatever impact it might have had.

As for your pet peeve, yup, we seem to have contrast issues too.

Vincent Flanders’ comments: This is the most bizarre navigation that I’ve seen in a long time. When you go to the German version of the site, no white menu text shows up. This is very bizarre.

I’ve never seen the main logo placed in this position before. On subpages, the logo is at the bottom of the page. Huh?

MCI Management Center

Submitter’s comments: May I present: American Media Professionals.

In my opinion the most glaring piece of suckiness is the spinning “AMP” — really, really annoying.

Click on a link. I chose the wedding link. Just about every line of text on the page is underlined. Are they all links? No. The huge fonts remind me of all the unsolicited right-wing spam that clogs my inbox. They also keyword loaded the bottom of every page.

This guy might do good video work, but his website isn’t very professional and makes me want to look elsewhere.

P.S.: The poor woman in the yellow shirt on the Corporate and Broadcast page looks like her breasts are being smashed by the equipment. (Made you look!)

Vincent Flanders’ comments: I apologize to the submitter for not being able to reproduce his/her email as it was sent. To get the full effect, you need to see the original email.

It is now time for Father Flanders’ Sermon on Sinful Shrinking:

Just because Jesus miraculously turned water into wine doesn’t mean he can miraculously turn your 1.21Mb, 1132- x 1696-pixel image of a bride into a 30Kb image just because you changed the WIDTH= and HEIGHT= attributes to WIDTH=”383″ and HEIGHT=”573.” It doesn’t work like that. Besides, Jesus has much better things to do.

The submenus don’t have the proper links. On the wedding page, there’s no link to the Corporate & Broadcast page. We also have the usual litany of text mistakes: multicolored text, centered text, etc.

BTW…Are there any web sites that don’t suck under the heading of videography services? Maybe we have another YAITS — Yet Another Industry That Sucks.

American Media Professionals

Submitter’s comments: I’m sure you’ve seen worse. Nevertheless…wait for the middle thing to finish loading. No, it’s not done. Wait some more. There goes the music, but it’s not finished. Wait for the 3 Fondue Pots of Mystery Meat Navigation to show up.

Vincent Flanders’ comments: Technically, the site doesn’t need Flash or Mystery Meat Navigation. You can use the site without the MMN because the important information is in the regular navigation. The fondue pan Mystery Meat really doesn’t serve any useful purpose and, what’s worse, mousing over the pans doesn’t reveal any link information. You have to click to go to another level of Mystery Meat. Remember It’s a waste of time.

Of course, if you’re running Firefox with NoScripts or IE with Flash turned off, you get a blank page.

Flash is problematic sucks for lots of reasons (inconsistent interface across sites, eats up extra bandwidth, search engines have issues with Flash, you [generally] have loading screens, etc.), but the biggest reason is it doesn’t solve your visitors’ needs. Everything on this site can be accomplished by HTML.

The Melting Pot

Submitter’s comments: I know you keep rattling on how about how bad architect’s websites are (they are pretty bad). Here is a good example I found while researching ideas for our new site (text as images is going away).

Vincent Flanders’ comments: We certainly don’t need the splash page, but we do need some more contrast on the “real” home page. I find it amusing that there doesn’t seem to be a logo or home page link on the subpages (at least the ones I checked).

There are stranger examples on my architecture page. This site will soon join them.

AIR Architecture

Submitter’s comments: This isn’t your typical website (because it’s all Flash), but it is all kinds of awful. Make sure you watch the intro and then wait and watch the lady come back and insult you.

Vincent Flanders’ comments: This reminds me of that Microsoft Beta search engine whose name I’ve forgotten. Same concept except Microsoft used an African American woman.

There are lots of valid uses for Flash on a car site — helping you build a car that you want to buy, looking at a car from different angles, etc. Having another MAMAW talk at you is not a good reason. Especially when she insults you. If I want to get insulted, I’ll talk to the wife. Oh. MAMAW stands for Moderately Attractive Middle-Aged Woman.

Chrysler Aspen Hybrid

Submitter’s comments: It’s almost as if some people don’t want people to visit their site. It’s all in Flash.
It has stupid animations for EVERYTHING. (Just because you can do something, doesn’t mean that you should do it.)

Vincent Flanders’ comments: It’s a very simple concept: If your website can be built with HTML, build it with HTML and not Flash.

What’s going on with all these sites where there are videos of people welcoming me to their website? On the positive side, when you stop the music it stops on every page. If you leave the site and come back, the blonde replays her welcome message. It would be nice if the site set a cookie so you only saw her once. Of course, most people won’t return to the site.

Complete Health Center

Submitter’s comments: Vincent: Here’s another site for you, if it hasn’t been submitted before.

Here is a web page that will take you back to the dark ages of the Internet in the mid-90′s, when changing font size and colour were considered the be-all and end-all of web design — at least by some developers’ standards. This site, however, is maintained now and has no business trying to sell me anything! Have a look.  Then go and clean your retinas with alcohol to take away the sting…

The most important thing that turns me away from even thinking about buying from these guys is that they deal in computers. My personal opinion is that any computer store web site should have a well thought out web page that is pleasing to look at — in the same way that I expect my mechanic to drive a car that runs smoothly and is not held together by rust. Anything less smacks of an unprofessional attitude toward me, the customer. I would not buy from this company purely based on this web site.

Vincent Flanders’ comments: Technically, I ran the site back on February 11, 2008 and here are the original comments from the submitter:

Australia is a beautiful country. I wish I could say the same about a lot of our web design. A lot of it reminds me of a line from the Men At Work song “Down Under” — “You better run, you better take cover.”

The site was one of five and consisted only of a link. I don’t understand why the site didn’t end up as one of the worst of 2008.

As the submitter notes, it’s EXTREMELY important for your site to have a professional (or at least a semiprofessional) look. “If you don’t look like a pro, the people will go” is a mantra for all web designers. On the other hand, WPTS sorta-kinda-maybe sucks because…well…that’s what the site is called. Actually, this incarnation is better than my art-fart version (click on the graphic to read the text), my sillier Flash version, and my Making It Bad On Purpose Version.

I suspect that, like many companies with sucky sites, they actually offer quality products. But who is going to take the time to find out once they see this site?

Off-topic note: You must see The Wrestler. I was expecting to see the best movie of all time. It was even better.

MSY Technology

Submitter’s comments: My son is going to play in a soccer tournament at this place in February, so I went to the site in hopes of finding some useful info. Aside from being butt-ugly and the layout being broken in Firefox, the big feature is this creepy CGI guy who starts talking to you in a computer-generated voice (MacinTalk?) when you mouse over him. What’s worse is the creepy-CGI-guy reloads on EVERY flipping page you navigate to!

Check out the stats page, where the stats load into this little frame so you have to scroll within the page to see. There’s much more to hate about this site, but I’ll let you find it on your own.

I honestly wonder what these people are thinking about.

Vincent Flanders’ comments: It’s a waste of 54Kb to have the creepy-CGI-guy load on every page, but I’m thankful he isn’t set up to automatically speak when I land on the different pages. Still, I accidentally moused over him a couple of times. It’s just wrong to force people to think about avoiding him. This isn’t a war zone. I should be able to move freely about the page. Creepy-CGI-guy is a glorified “Welcome to our web site” message and it’s stupid to welcome people to your site. They’ve already clicked on a link. They’ve made the commitment.

We’ve got all sorts of text issues: ALL CAP TEXT — and lots of it; underscored text that looks like it should be a link, but isn’t; inconsistent text size; and just about every other text mistake you can make. Perhaps the nicest description of the text mess is “It sports wildly inconsistent text attributes.”

The Sportsplex

Submitter’s comments: I went to this site to find out about an MP3 recorder that has a line-in jack. I was faced with MMN, slow loading Flash pages with Mystery Meat Navigation, which might have something about their products. I’m not sure because I haven’t been able to figure it out yet.

Vincent Flanders’ comments: Well, you did better than I did or BrowserCam did. We both got empty pages. I guess they really meant what they said in the TITLE tag — the next simplicity.

iriver

Submitter’s comments: With the goal of signing up for a continuing education class, I browsed the local community college’s, GTCC, web site where I spent entirely way too much time trying to figure out what classes are offered, when they’re offered (Winter Term or Spring Semester?) and whether they’re offered in-classroom or online.

The site is difficult to navigate. Several of the main navigation links lead to PDFs instead of web pages. Other contextual links lead to pages that instruct the user to choose the main navigation link with the same heading instead.

Eventually, I found a section for Continuing Education. As I had hoped to take an in-classroom class, I did not select the Ed2Go link under the Continuing Ed header. I instead selected the link that appeared to be the main link for Continuing Education classes, which led to a page explaining that Continuing Ed class schedules and enrollment can be found on WebAdvisor. I found the class I wanted on WebAdvisor, though the time and location was listed as “TBD.” (The submitter goes on to describe horrendous problems trying to find out where the class was to be held. Problems that I’m sure occurred, but since I can’t verify I’ll have to exclude. I think you get the point — vf.)

Vincent Flanders’ comments: One of the biggest mistakes educational sites make is linking to PDF files without telling the visitor that they’re going to have to wait for the document to load. The site is simply awash with links. In fact, it’s drowning in them and there’s no leading between topics so it’s difficult to tell where one begins and ends.

Personally, I’m not fond of the order of the categories. I don’t think “Press Releases” should be on the first line. I’d rather see “Professional and Career Development” in its place. Of course, universities are fraught with internal political pressures. I suspect the placement of PR was a political decision.

Guilford Technical Community College

Yahoo! makes this mistake all the time. The text states “Shirtless Obama causes stir,” but the picture is of a fully shirted Obama. (Here’s a full-size screen shot.)

It’s a subtle mistake, but you need to make sure your picture matches the text.

Submitter’s comments: We’re visiting Philadelphia and we would like to try the most famous coffee in Philadelphia — La Colombe — but we cannot find it. So we go to their website and we still cannot find it — like we cannot find ANYTHING on this website. Mystery Meat Navigation in an overdesigned, super-snooty, and totally useless website. I guess we’ll just have to go to Spruce Street Espresso instead.

Vincent Flanders’ comments: I hate sites like this. I’m not coming to your site to be amused and play guessing games, I come to get coffee. Well, in my case, I’d go for the rolls since I don’t drink coffee. (I know, I know, it’s hard to believe. I have no minor vices.)

When I get to the site I have to choose between “For Business” and “For Pleasure.” Obviously, I’m a person and so is the lady/gentleman who submitted this site so I choose “For Pleasure.” Even when I find the Mystery Meat cafe button it doesn’t do my any good. I get pictures of a Moby-wannabe and businessmen. Everything I try doesn’t work. No information.

Out of desperation, I choose “Business.” Guess what? That’s what I should have clicked to begin with!!!! I’m not a mind reader. If I were a mind reader, I’d be playing poker for a living and winning every tournament and cash game; I wouldn’t be going to websites looking for addresses and directions. I’d have one of my personal assistants do that for me.

Clicking “Contact” gives you the address and phone number. What a waste of time. Your web site is supposed to solve my problems, not cause me problems.

La Colombe

Submitter’s comments: Vincent: I was doing some cursory research into the fun world of Red-Green 3D images (stereoscopic anaglyphs), fully expecting to find a lot of images mainly of white on black with horribly contrasting colours. Wasn’t expecting the same from the web pages however.

Other than the horrific contrast, it seems to scroll on for eternity and comes up with a few hundred errors in the HTML validator. I think this qualifies for a sucker, if it hasn’t already been nominated already.

Vincent Flanders’ comments: To start things off on the wrong foot, the home page is 14.37Mb and this may be a new record. This page is a classic example of Mistake #5 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it.“ Just because it’s called a web page doesn’t mean you have to put everything on one page.

We have almost every text problem in the universe. Here’s a list I’m compiling of text mistakes. How many does this site make?

1. Small text, which is difficult to read and comprehend.
2. LARGE text, which is difficult to read and comprehend.
3. LOTS OF WORDS IN ALL-CAPS.
4. Scrolling, blinking, fading, or moving text.
5. Underlined text. (Only links should be underlined.)
6. Centered text (some headlines can be centered)
7. Justified text.
8. Sideways text.
9. Uncommon fonts.
10. <FONT> tag.
11. Inappropriate font faces — like Comic Sans on a senior citizen site.
12. Multiple text sizes on a page. There should be two sizes — one for headlines and one for text.
13. Multiple text colors on a page.

As bad as the text may be, it’s “only” taking up 330Kb. The rest of the 14Mb is allocated to graphics. Obviously, dividing the home page up into multiple pages will help. Still, the images need to be optimized. There are lots of web sites where you can go and optimize your images. A couple of them are Web Resizer and SmushIt. An online program that reduces the physical dimensions is Quick Thumbnail, another is resizr, and you can search Google for both online and standalone image resizing programs. Two free Windows programs are Image Resizer from VSO Software and Easy Thumbnails

The site is dealing with an interesting topic. Unfortunately, the information is presented in a totally useless format.

Anachrome Advanced Plastic Anaglyph 3D Glasses and Anachrome
3D Technology

Submitter’s comments: Love my beer, except when I get a bad one. (Tasted like oily something. Ewww.)  And a really bad website when I went to complain. The Age Verification page that won’t let me past.

Vincent Flanders’ comments: I’m so very confused by this site I can’t see straight. Over the weekend, there were times when I would get error messages. When I went to millercoors.com, the presumptive home-home page, I got a “coming soon” message. On Sunday night, I get the site, but I can’t find an Age Verification page from the Miller-Coors home page. Technically, any 10-year old can learn about beer. Huh?

About 60% of the time I tried to go to the Age Verification page3, I got an ASP error message saying the page couldn’t be displayed. The other 40% of the time I got the Age Verification as described above — and the page did not work. I made a video of the money to verify the claim. On Sunday night, the page works.

The moral of this story — make sure you test everything before you go live and check with your lawyers if you’re a beer site and find out whether COPPA applies to your web site.

Miller-Coors Age Verification — the site
Hi-def quality video of my problems using the site
Mid-def quality video of my problems using the site
 iPod/DVD quality video of my problems using the site

Submitter’s comments: None

Vincent Flanders’ comments: I visit ghacks.net quite often because I find it a valuable resource. While it’s a great site, there are two usability problems that I find really annoying because they violate commonly accepted website conventions:

1. When you click a logo on a subpage, it should take you to the home page. At ghacks.net, the logo is not a link while over at another site I visit, DownloadSquad, the logo links to the home page. Millions of other sites follow this convention.

Click on image below to view larger example. (Click the large image to close.)

2. The Next Page link is the last element of the group. At ghacks.net, the Go-to-Last-Page link is at the end of the group instead of the Next Page Link.

Click on image below to view larger example. (Click the large image to close.)

Yes, there are no web design rules — but there are conventions.

ghacks.net

Submitter’s comments: You probably hand pick all the sites that make it on the “Worst of” lists, but perhaps this one could be considered?

It’s the ugliest, most poorly designed, written and organized site I’ve ever seen. 

Vincent Flanders’ comments: Wow! We’ve got a sure-fire contender for Worst Web Site of 2009 and we’re barely into January. The most troubling aspect of the site is on the Policy page. The text is cut off at the edge of the screen. You can’t scroll and read the text, as this screen capture demonstrates.

A lot of Bed and Breakfast sites suck. I suspect the reason is simple. With a B&B, many owners do everything themselves — fix, repair, clean, manage the advertising, etc., so it’s only “logical” they would build their own web sites. As Oedipus discovered, expertise in one area (solving riddles) doesn’t translate into expertise in other areas (solving the riddle of his birth).

The home page is too long, we have underscored text which isn’t a link, multicolored text, text in different sizes, centered text, flush-left text, text you can’t read because of contrast issues, animated images (yes, I have them, but mouse over one and read the ALT attribute), etc., etc.

Vancouver Bed & Breakfast

Submitter’s comments: What else but a car wreck on the information highway? :)

Tickers galore!
Stretched logo image!
Flapping Canadian Flag!
American Flag (static)!
Horizontal scroll for no apparent reason!
Firefox, in either despair or bafflement, thinks it requires an unknown plug in!

Much more could be listed!

Vincent Flanders’ comments: Wow! It’s the first Daily Sucker for 2009 and we’ve got a sure-fire contender for Worst Web Site of 2009. The driving school industry is YAITS — Yet Another Industry That Sucks. The Worst of 2008 was so well-represented by the industry that I almost made them a separate category. This company is providing a really important service, but their site looks really stupid. It’s a classic example of Mistake #5 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it. Nuke it and hire someone to start over.

Control Driving Skills

Yes, I know it’s really Redbook who created the page, but it was a link on Yahoo!’s home page. The article is “Everything you know about affairs is wrong” and it talks about how relationships can be repaired. That’s fine except there’s a big display ad “Meet Someone New” (Dating, butterflies, romance…it all happens here) at the top of the page and a text link “Search for Singles Near You” at the bottom.

Here’s the screen shot

2008 was a good year for bad web design. Here are the worst of the worst:

1. Worst Web Sites of 2008
2. Worst Web Sites of 2008: Navigation
3. Worst Web Sites of 2008: Old School Design
4. Worst Web Sites of 2008: Cops and Chiropractors