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

White Gold

Submitter’s comments: I’m sending you a Flash site with really great graphics, but the navigation is horrible. They use icons at the top (medallions, they call them), that you might think are the navigation (Mystery Meat Navigation at that), but if you click on them, they don’t take you anywhere. You have to click on a “background” graphic (to the left or right of the main image) in order to go through the different areas of the site. You only get a couple navigational choices at a time and it cycles you through the areas. {you can’t just jump to the specific area you want to go to}.

Maybe you won’t find it as annoying as I do.

Vincent Flanders’ comments: Actually, I probably find it more annoying than you do. It starts off with a volume control that goes to “11.” Holy Spinal Tap — let’s start off with a cliche. Then we get an incredibly pretentious introduction that makes me think we’re watching Spinal Tap 2010. I ignore the following text which, as it turns out, actually gives me a clue as to who/what is behind this crap sandwich.

I click and get an old-style camera, floating lady and some Liberace-looking guy at a piano. We’re starting our descent into the black hole of f**cking death.

Eventually, I figure out this site is some kind of promo for — milk. I like milk. Well, I used to like milk but this site has turned me off to the white stuff. God, what a piece of crap. It reminds me of

White Gold

“Microsoft confirms free security software ships Tuesday” — http://bit.ly/HZM94

Reading “How to Fix a Website with a High Bounce Rate” http://bit.ly/1aIBbk

Lee’s Limo Service

Submitter’s comments: Worst/funniest limo web site ever. PLEASE  Pay attention to TV Commercial #1. It’s now my favorite new song. “His name is Lee! Leeeeeeee”

Vincent Flanders’ comments: I’ve had bronchitis for the last few days, which explains why the Daily Sucker hasn’t been so daily.

Hopefully, we can all look at the site and figure out what’s wrong. All I need to say is that it doesn’t look like limos.com. Oh, Limos.com sucks mightily because of the small text and lack of contrast between the text and the background. They’re a Daily Sucker, too. On the other hand, their site looks INFINTELY better than Lee’s.

Lee’s Limo Service
limos.com

Haiti News Network

Submitter’s comments: It’s Christmas in Haiti! A Haitian News Network site. O….M….G.

Vincent Flanders’ comments: Mother Mary save us!!!!

There are only two possible reasons this site won’t make the list of the worst sites of 2009:

1. They fix the site.
2. My clever, clever readers discover and send in a whole bunch of sites that are worse than today’s sucker. Frankly, this possibility scares me more than a proctologist with Obsessive Compulsive Disorder.

At least today’s site doesn’t use sound files. Actually, I’m not sure because I was too scared to click any links. If the home page sucks this much, what hope is there for any of the subpages? This site doesn’t just suck, it’s the black hole of f**cking death.

If you’re one of those folks who thinks the glass is half-full, you’ll be comforted by the thought that web design in Haiti has nowhere to go but up. I’m not sure which of the following two statements from the great movie reviewer Mr. Cranky applies to the Haiti News Network:

1. “This is so godawful that it ruptures the very fabric of space and time with the sheer overpowering force of its mediocrity.”
2. “Proof that Jesus died in vain.”

Wait. I know which one is the right phrase — It’s the black hole of f**cking death.

Haiti News Network

University of Notre Dame

Vincent Flanders’ comments: Like the recently late, great Jim Carroll I also am a “Catholic boy. Redeemed through pain and not through joy.” I don’t have positive or negative feelings about the university and I’m not sure if I know anyone who attended the University of Notre Dame. I’m a native Hoosier and I graduated from Wabash College and my school had zero connection to ND. I also don’t really pay attention to college (or professional) football.

I mention all this to make sure I don’t get some jerkwad saying I’ve got it in for ND. The truth is, I’ve got it in for bad web design and the ND home page has plenty of bad design. The best way to explain, is through a video.

University of Notre Dame

Kingman and Heritage Islands Park

Submitter’s comments: The site for this park in Washington, DC, actually isn’t too bad – as long as you don’t care about actually reading the text. The colors sure are pretty, but the contrast is negligible.

Vincent Flanders’ comments: We have a winner in the category “Web Site That Looks Nice, But There’s No F***king Contrast.” AccessColor said:

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

Perfectly stupid.

Kingman and Heritage Islands Park

The Light of God Ministry

Submitter’s comments: It’s bad and it’s bonkers. Two of your favourites. I actually struggled to find a ‘How to tell if your web site sucks’ rule it doesn’t break. I guess there isn’t a FlashSplash page. Oh, and no Mystery Meat Navigation (although it is fairly unreadable), but other than that, it’s a pretty full house.

My favourite quote from the site is from ‘the real truth about god’ page, ‘God is coming – and he is mad;’ probably mostly about this piss-poor web site.

Vincent Flanders’ comments: God, how I love people who know how to turn a phrase — “It’s bad and it’s bonkers. Two of your favourites.”

I like over-the-top web sites and I’m sure today’s sucker will join them. My favorite part of this sucker? The left and right columns of text are centered, while the center column text is flush left. For some reason, it just seems funny in an ironic way.

BTW, the site says the 7 years of tribulation starts December 14, 2012. I hate to break the news, but according to the History Channel’s shows (about Nostradamus and the Mayans), the world is going to end on December 21, 2012. I guess if you have accrued vacation time, you might want to plan to use it up before then <grin>.

The Light of God Ministry

Powchem Powder Coating Company

Submitter’s comments: This is something of a stealth suck. Nothing really notably bad about it at first glance. At second glance the menu bar at the top catches your eye.

It looks like it was made with an old typewriter with serifs missing from a number of the letters.

It is also Flash. While one wonders why anyone would go to the effort to do this in Flash, one of the benefits of Flash is that you do not have to count on the user’s computer to have the correct font. Apparently, this is part of their look which seems odd considering what they do for a living.

The rest of the page text is in images for the most part. At the bottom of the page is a list of products with a “font size=”1″ tag.

Click on anything. On that page you will find the ever popular light gray text on a white background. The menu on the side is a bit more reasonable but does nothing for their SEO. The images have names like “sub02_01_01_o.gif” rather then Google (and maintainer) friendly names like HB8000_Series_Powder.gif. On these sub-pages the small list of products at the bottom might as well not exist. Very small font, light gray and italicized. Yikes.

Ok, all of this was based on viewing it in I.E. Now use Firefox for a real treat. In my version (3.5.3) all the sub pages blink! No clues how they managed that.

Vincent Flanders’ comments: Very strange. For those of you who aren’t running Firefox and/or IE, here’s a video showing you the blinking problem.

Powchem Powder Coating Company

Acerotek

Submitter’s comments: I was dumbfounded! This site is all Flash! You’d never know by looking at it, but it is. Why would people do this?

Vincent Flanders’ comments: They do it because they can. I agree it doesn’t make sense. It makes even less sense if you have the Google toolbar installed. When I went to the site the Google Toolbar asked if I wanted the page translated into English. I clicked the Translate button and here’s the translation. Uh…Where’s the English. This screenshot shows you all that got translated.

Google can’t translate if there’s nothing to see and there’s nothing to see because the text is embedded. It’s even worse on one of the Company pages.

Acerotek

FOTV

Submitter’s comments: It took me about 2-3 minutes to figure out what type of business it is.

Vincent Flanders’ 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 gaybars have more sense than to used 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.

FOTV

Reading “Top 10 Apps for Scheduling a Meeting Online” http://bit.ly/2gEzFY I’ve used Doodle and like it.

TickleMePlant.com

Submitter’s comments: I once again come to you with a nightmare of a Web site.  Thanks to my raising carnivorous plants, I see a lot of really good and really bad Web sites related to horticulture, but I had no idea of what to expect when I came across this site.

It’s bad enough that it looks like 1997 all over again with the painful colors.  Just wait for about thirty seconds, though, for the cute rep to appear on video and tell you why mimosa seedlings are so important.  This isn’t just a case where your man from Mars couldn’t figure out this site.  This one would cause Daleks and Vorlons to shake their heads in horror and in shame.  In fact, I think I can hear the plants in question trying to inchworm their way away from anyone involved with okaying this Web site.

Vincent Flanders’ comments: I just haven’t kept my knowledge of extraterrestrial life forms up to date. I don’t doubt they would shake their heads in horror because they’re smarter than we are. On the plus side, they’ve set up the home page using cookies so that the woman only talks to you once. I tried to do the same thing with my home page so the purposely annoying drop-down banner only shows once, but I’m not a programmer. If anybody has fully working code so that the drop-down ad only shows once, I’ll be eternally grateful (has to be Javascript and not PHP). I’ve searched all over the web and I’ve spent hours trying to kludge something together. This is the page and here’s the relevant code:

<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js’></script>
<script type=’text/javascript’ src=’http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js’></script>
<script type=”text/javascript”>
function showSlide() {
var t=setTimeout(“Effect.BlindDown(‘slideBanner’)”,5000);
}
</script>
</head>

<body>
<div id=”wrap”>
<div id=”slideBanner” style=”width:100%; display:none; color:#666; text-align:center;margin:0;padding:0;”>

<div id=”cb-container” style=”height:300px; width:100%;text-align:center;background:#fff;margin:auto” onclick=”javascript:Effect.BlindUp(‘slideBanner’); return true;”>

<div style=”margin: 0px 0px 0px 0px; padding: 0px”>

<img src=”http://www.webpagesthatsuck.com/images/drop-down-ad-version2.jpg” width=”1000″ height=”300″ style=”border: 0px; vertical-align: middle” alt=”Click Here To Close!” />

<!– </a> –>

</div> </div></div>

<script type=”text/javascript”>showSlide();</script>

TickleMePlant.com

Xerox

Submitter’s comments: There are too many web sites I can’t really read because the text isn’t dark enough. I’m older (63) with some eye problems, but I spend large sums of money on products for my company that I research on the web. I’d at least like to be able to read about what I’m buying. I find Xerox’s home page difficult to read. If you mouse over the “Document Outsourcing” link at the top, you get black text on a dark purple background.

Vincent Flanders’ comments: The harder it is to read a web page the easier it becomes for your visitors to hit the BACK button and go to a site they can read. In order to read a web page, you need enough contrast between the text color and the background color. This isn’t rocket science. I’ll even  give you a simple guide that shows which shades of black to use for text on a white background.

Why do designers do that voodoo that they do so well? In an article entitled, Has Your Web Designer Ever Heard of Contrast? a plausible explanation is given:

The reason is… gray text looks better and more coherentwhen seen from a distance or as an element of the overall design, but, and this is a big but, it is not meant to be read in these cases…

…Unfortunately, some visual designers sacrifice readability for a slight increase in visual appeal because they do not really read the text on screen; they treat it as a large block of horizontal lines, and the darker those lines are the uglier they look. So, decreasing the contrast a little makes the overall design look nicer but less readable. Poor readability is not the designer’s problem. After all, he will probably never try to use the site he designed.

I noted that a recent Daily Sucker, TechSoup, was using #666 for some of their text, which made it difficult to read. I noticed that today’s sucker, Xerox, also uses #666 for sections of their text. As the submitter mentioned, mousing over the “Document Outsourcing” link is not pleasant. It gets worse. The Xerox for Small and Medium Businesses page adds hard-to-read link colors.

It seemed to me like important web sites were all conspiring at the same time. Perhaps I felt this way because A&E and the History Channel have been running shows about the end of the world with predictions from Nostradamus, the Aztecs, and everybody and his brother and watched too many of them (I’m not watching anything political.)

Then it hit me. The number 666 is the Number of the Beast. This is all coming to me as a revelation on…9-9-9, which is “666″ inverted. Yes, Nostraflanders has uncovered a plot on this special day to ruin web sites. #666 is Satan’s CSS! If you don’t believe me, look at the photo above. This is proof!

In the movie The Usual Suspects, the character Verbal Kint says, “The greatest trick the Devil ever pulled was convincing the world he didn’t exist.”

At Web Pages That Suck, Nostraflanders says, “The second greatest trick the Devil ever pulled was convincing web designers the people could read text colored #666.”

Update: Xerox changed their site. I’ll try to post a video soon (vf 10-17-11)

Xerox

Walker & Partners Ltd.

Submitter’s comments:I particularly liked the ‘Red Brochure’ ‘Green Brochure’ links. Is the colour coding meant to indicate product categories? Well no, actually, so that’s all right.

Vincent Flanders’ comments: Why do they play such stupid games with the links? I had to read the text before I knew where to click and that’s just wrong.

Walker & Partners Ltd.

Cafe Intl

Submitter’s comments: This is the most annoying web site ever! Try to check out their menu. You have to chase everything around and then try to position it so that you can read it, section by section. If you want to find their hours, try the “About” page which displays the tiniest type ever!

Vincent Flanders’ comments: Whenever someone sends me an email with the words “the most annoying web site ever!” or “the worst web site in the world!” my initial reaction is not to believe them. After all, I’ve seen tens of thousands, if not hundreds of thousands, of horrible web sites. My second reaction is to say to myself, “Hey. They might be right.”

Well, s/he is right. Today’s Daily Sucker may be one of the most annoying web sites ever. Somebody got Flash happy and wanted to show off all the little tricks they learned. To appreciate the madness, you have to choose one of the moving items — Breakfast, Lunch, Catering, or Specials. Then it gets interesting. Using IE 8, every spot on the floating billboard filled up with shimmering information (you have to see it to understand). Using IE 7, I only got a couple of menu items if I clicked the billboard. With Firefox 3.5, I couldn’t get the page to load and with Safari, it loaded correctly. That’s the problem. When it loads correctly, you get a case of the dry heaves because the shimmering text gives you vertigo.

What amazes me most is that somebody — or a group of people — signed off on the site. Maybe they all took that new brain pill from Greece — Blakeia.

Cafe Intl

Kiwanis Wyoming County Fair

Submitter’s comments: This site is badly designed and ugly even by amateur standards. All I wanted was a schedule for the day.

Vincent Flanders’ comments: Is there a tackier logo on the Internet? If you exclude animated logos, then I kinda doubt it. My monitor is 1200 pixels wide and the menu at the top is still half cut off. The text is different sizes, but I’m a bit amazed that the site isn’t worse. I was expecting multiple text colors, underscored text that isn’t a link, and all the usual text mistakes. Oh. I stopped using that background image in 1995.

Wow. I thought this fair was located in the state of Wyoming. It’s located in Pennsylvania.

Kiwanis Wyoming County Fair

Everson Museum of Art

Submitter’s comments: As always, you are the best. LOVE the new giant image blast at the top of your site! Here’s my latest nomination. I’m stuck in existential hell!! :)

Sure, the Everson Museum is SO pretty, with the requisite Flash that right-brainers get so excited about. The sucking part is very simple — No Menu Visible unless you happen to mouse over the top of the screen, giving you Mystery Meat Navigation. Grade: F+. You can almost hear them saying:

Vincent Flanders’ comments: Like I’ve recently said:

Of course, with artsy sites we’re bound to have contrast issues. I checked out the contrast of the home page using AccessColor, and I received the following report:

The W3C recommends a standard of 500 or greater for the color difference and a standard of 125 or greater for color brightness.

Based on these considerations, the results for this page are:

1. Both color difference and color brightness do not meet the recommended standard for 0% of the total text.
2. Either color difference or color brightness does not meet the recommended standard for 20.74% of the total the text. A Warning message is displayed next to the HTML source line.

Text on background with images is for 51.63% of the total text.

Yes, I know it’s an art site, but hiding the navigation for a museum is inexcusable.

Everson Museum of Art

Nepresso

Submitter’s comments: This web site has many different layouts. It seems like they were all designed separately and then put together to make one web site held together with string and gum. Click on their site map and poke around to see what I’m talking about.

Also, you’ve got to love (hate) a largely flash-based web site And links with vertical text. And auto-playing music.

Vincent Flanders’ comments: Yeah. I hate those things, too, and I also hate coffee. (My only addiction was the caffeine pill Vivarin. When I wrote my first book, I put the empty Vivarin containers on my door. These were the large Vivarin boxes and you can see what it takes to write a book.)

What I really disliked about the home page is that it looks like you have to register to use the site (you don’t). It also talks about “capsules,” which made me think they sold vitamins (I guess it has something to do with coffee, but how would I know?)

At least you can turn off the music and it seems to stay off (unlike some other sites where it starts playing when you go to a new page). Sideways navigation is annoying and it’s wrong. I’m not sure about the site map. I found a drop-down menu, which is annoying and shouldn’t be used.

The major problem occurs when you go to the Nepresso System page. Logically, I sat there waiting for something to happen. WTF? Nothing happens!

Nepresso

TechSoup

Vincent Flanders’ comments: TechSoup is the technology site for non-profits and it’s hugely important. I trust that if you work for a 501(c)3 organization, you’re getting your technology products from TechSoup. I hope you’re getting a lot of your information from them, too. If you’re not, you’re either stealing software, using outdated software, or somebody’s paying too much.

Their previous site’s design was…functional. It certainly didn’t have “a real pretty mouth.” What it did have, for the most part, was readability. You could easily read the text (well, 97.86% of the text). The problem occurred when you put white text on that puke-gold (#cc9900) background.

Well, TechSoup decides its time for a redesign (here’s the new home page) and, while they managed not to succumb to a lot of temptations to suck up their site, they had to get artsy with their text color. I don’t know why designers are in love with grayish text (#666666) on a white background. Maybe they’re on Macs and the color looks great. PC laptop screens also can give a distorted view of text color.

On the day I checked out the contrast on the new TechSoup home page using AccessColor, I received the following report:

The W3C recommends a standard of 500 or greater for the color difference and a standard of 125 or greater for color brightness.

Based on these considerations, the results for this page are:

1. Both color difference and color brightness do not meet the recommended standard for 0% of the total text.
2. Either color difference or color brightness does not meet the recommended standard for 69.32% of the total the text.A Warning message is displayed next to the HTML source line.

Text on background with images is for 20.31% of the total text.

Like the good, pre-Vatican II Catholic I’m not, I ran a test to see what color I could make the text before it became a mortal sin (bad contrast). TechSoup uses #666666 for its text so, logically, I tried #555555. I’m a genius. It worked.

Personally, I don’t think #555555 is dark enough to make text really legible. “Legally,” it works, but this is 2009. Black is beautiful. Let’s make black text the new black text. Let’s make our text #000000.

TechSoup