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

Catch the video. May be NSFW.

httpv://www.youtube.com/watch?v=UW6DjmYGAaM

Submitter’s comments: I thought you might like this site. It might be Latin or it’s just a template with lorem-ipsum generated text. I’m not sure, because the font is too small and I can’t read it. My personal favorite: the menu runs away when you try moving your mouse over it.

Vincent Flanders’ comments: WTF! This is Mystery Meat Navigation (MMN) at its worst. Well, it may not be the worst, because the worst is something I made up—Random Mystery Meat (see below)

Yes, I know there is regular text navigation at the bottom, but that doesn’t excuse the use of MMN.

This is so horrible, I’m putting it in at the “end” of 2010 and the beginning of 2011 so I can use it as an example of Worst Site of the Year.

nomec

If you’ve been to WPTS and read the articles, you’ll know that lack of contrast between the text and the background color upsets me for one simple reason:

I NEED TO BE ABLE TO READ WHAT’S ON THE F**KING PAGE.

You would think any designer whose IQ is higher than an ice cube understands this concept. Nope. Today’s Daily Sucker, adlucent, is unclear on the concept.

On the other hand, there are actually times when it’s permissible—even mandatory—for text to be unreadable. Scroll down and take a look at the footer of Wachovia Bank’s home page. The text color is #8B8B8B on a background of #FFFFFF, which fails the Web Content Accessibility Guidelines 1.0. This is just one line of text from their footer that’s hard to read.

Important new FDIC insurance rules in effect from December 31, 2010 through
December 31, 2012. Learn More

Why would they want their customers to read and understand the new rules?

My current privacy page fails big time. My original privacy page is very readable.

Privacy pages, footers and important information that’s considered “the fine print” can be made hard to read. If you don’t want people reading your text, make the text small and lower the contrast.

Submitter’s comments: My friend sent this to me when she was looking into the college. You would think with all the money they get from tuition they would be able to afford a web page that wasn’t made by an 11-year old boy.

Vincent Flanders’ comments: I could excuse the page if it were designed by an 11-year old. I should excuse it because it’s for an art school but, because some irresponsible dickhead doesn’t understand that flashing colors could cause seizures, I have to make it a Daily Sucker. Oh. The word “irresponsible” in the phrase “irresponsible dickhead” is an unnecessary modifier.

What in the hell was s/he thinking? Hopefully, outing them might cause the page to be changed.

Yale School of Art (WARNING. Could cause seizures)

Vincent Flanders’ comments: For some reason, I decided to look at the White House’s home page. The top part of the page looks fine but, as I went down the page, the old bugaboo about contrast popped up. It’s especially problematic because the White House has a link at the bottom of the page that discusses accessibility . Ironically, the link is hard to read because of the lack of contrast.

I ran the page through AccessColor and was told:

Both color difference and color brightness do not meet the recommended standard for 2.88% of the total text.

Either color difference or color brightness does not meet the recommended standard for 20.77% of the total the text.

Text on background with images is for 47.93% of the total text. (Which makes it impossible for them to figure out the contrast levels.)

Here’s a screen capture of the results for those who don’t want to rerun the test.

As far as how well the site performs, I ran the home page through Zoompf and here were the results:

Here’s a screenshot of Zoompf’s analysis.

On a more positive note: Whitehouse.gov scored 72 (C) on Yslow and scored an 81 on Page Speed.

Whitehouse.gov