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

Submitter’s comments: I teach Creative Advertising Strategy and Direct Response Advertising at a university. In class, we look at webpagesthatsuck.com to learn what not to do, just as you suggest and it is quite helpful. However, my students never fail to point to web sites that are highly regarded, such as Leo Burnett, that utilize Mystery Meat and flying navigation.

In fact, this Web site REALLY DRIVES ME NUTS! When you click on “skip intro,” for example, it seems that that is not an option. What are those flying apples all about anyway? Please take a look at this site. I would really like your opinion, as my students are telling me that Burnett’s site is avant garde when I think it is ill-conceived.

Vincent Flanders’ comments: Since your students are enamored with graphics, let me give them two graphics that describe Leo Burnett’s web sites:

I rated Leo Burnett (Canada) the 6th Worst Web Site Navigation for 2007. I know I’ve also used the USA version of Leo Burnett as a Daily Sucker, but I can’t find the original reference.

Web sites are about solving your visitor’s problems. Have your students read Biggest Mistakes in Web Design 1995-2015 — especially #1, 2, 3, 7, and 8.

Leo Burnett
Leo Burnett Canada

Submitter’s comments: Old school and still using frames.

Vincent Flanders’ comments: Old school and still using frames poorly.

Police sites like the Cape Giradeau County Sheriff’s Department are always amusing. In fact, there are enough poorly designed cop sites that they had their own category: Worst Web Sites of 2008: Cops and Chiropractors.

The frames are not sized properly (one of the problems with using frames for navigation) and there’s no leading between the links, making them hard to read. I spent a few minutes “fixing” the leading and the menu on the left shows the original site and the menu on the right has my changes. Guess which one is more readable? Leading is important.

While the site won’t make the Worst of 2009 Cops and Chiropractors, it’s still Daily Sucker material. We’ve got the flashlight mouse when you move your cursor over the navigation links, beveled text, highlighted text, centered text, cheesy graphics, and mixing centered with flush-left text and all the usual suspects.

The one good thing about the site is the address, phone number, and fax number are prominently located at the top of the page.

Cape Giradeau County Sheriff’s Department

Submitter’s comments: Hey. I’m a high school student in a web design class and we look at and discuss the Daily Sucker at the beginning of each class period. I found this web site while looking for examples…

Vincent Flanders’ comments: I’m so glad to see that high school kids are learning about bad web design. The person submitting today’s sucker obviously learned his/her lessons well. I’ll give you an A+ for recognizing bad design.

Where do I start? The whole site is a mess starting with the 2.3Mb home page. Basically, anything that moves should be removed, the background image needs to go, and…who am I kidding?…just nuke the site and start over. I was going to suggest using Google (search for ‘carpet store”) to look up other carpet web sites as examples of what a carpet web site should look like, but the search results all pretty much suck. Carpetone, looks the best, but it has a lot of contrast issues. The Carpet Store could also be a Daily Sucker.

Online Carpet Store

Submitter’s comments: Apparently they’re only trying to make people who use non-Microsoft browsers feel even *more* depressed by trapping them in an existentialist nightmare with only one useless outgoing link.

Vincent Flanders’ comments: I want to change their trademarked tagline from “A Crisis Has No Schedule™” to “A Web Site Has No Links.” This web site really upset me until I realized it was for a company selling services and not a site people in distress went to when they needed help.

Here are the BrowserCam screen shots and here is one I made (with notes) that’s 1.2Mb.

Behavioral Health Link

Submitter’s comments: Take a look at the McDonald’s Australia ‘Broadband Version’ Flash site I just stumbled across.  You can shake around the sandwiches! Also note the ‘what goes into our food’ icons are hidden behind the giant ‘deli choices wraps’ logo…it all seems a bit suss to me.

Vincent Flanders’ comments: At least there’s an HTML version.

I have a reasonably OK broadband connection so it was difficult for me to read the directions on how to navigate the site. Of course, if you have to explain your navigation, your site’s screwed. The site also has popups and my browser wanted to block them.

McDonald’s Australia (Flash version)

Submitter’s comments: I love this place but their website sucks. They’re a family-run business, but is that really an excuse for such a bad web site?

Vincent Flanders’ comments: I thought, “Why is a drive-in movie theater open in February?” Oh, that’s right. It’s summer in Australia. Damn. Well, I suspect most people who go to the drive-in don’t check the web to see what movie is playing. Well, the young people don’t. Sigh.

I don’t understand why the blue image is at the top of each page. I’m not sure we need the film icons either. After all, it says it’s a theater. The two navigation buttons are ugly and, like the first Daily Sucker, the biggest mistake is the site’s navigation. I’ll try to be subtle:

It looks like the only way to navigate from a subpage is to hit the back button.

Galaxy Drive In Theatre

Submitter’s comments: I was shocked to see my alma mater’s web site.

Vincent Flanders’ comments: Aren’t we all?

Unfortunately, the site’s color scheme is dictated by the school’s colors which are so ugly even a blind decorator would run away screaming in horror. I’m not sure why it’s necessary to have the two flags. Hopefully, the students know they live in Ohio which is in the United States. On the other hand, maybe they don’t know. It would be really, really nice if the TITLE tag said something other than “newhome.” Something like “Lexington High School” would be nice. It would also be a good idea to have the background of the soldier match the background of the page. There are centering text issues and scrolling text issues.

The biggest mistake is the site’s navigation. I’ll try to be subtle:

It looks like the only way to navigate from a subpage is to hit the back button. Go straight to detention. (For those of you who attend or have attended Jesuit high schools, “Go to jug.”)

Lexington High School

Believe it or not, I used to be a fairly good equestrian. For various reasons, I haven’t been on a horse since…well, since before most of you were born. I still have a fond place in my heart for horses.

I recently discovered Fugly Horse of the Day that’s about “Snarky commentary about the breeding of poor quality horses, silly or abusive training techniques, and pretty much anything else that annoys me!” You have to love a tagline like that. The author discusses a poorly designed horse web site and it reminded me that there are a lot of poorly designed horse web sites. Ten years ago one horse site was the Daily Sucker with the following commentary:

Horse sites don’t need music. First of all, it’s illegal to use someone else’s song on your site. Repeat. It’s illegal. Against the law. You could be sued. Just because it isn’t the original performance doesn’t make it legal. It’s wrong. Did I mention it was illegal?

Even if it were legal, you’d still want something appropriate. A Natalie Merchant song on a horse site makes no sense. Or a song by Jewell. “My Old Kentucky Home” makes a lot more sense — it might even be in the public domain, but I’m no expert. Music sites can have music.

There are some other problems. The site was designed on an 800 x 600 pixel monitor. If you view the front page on a higher resolution monitor, text and graphics run into the repeating border.

We’ve got needless GIF animations, multiple size and colored text, and the “Welcome To” message. Finally, the greatest sin of all the top doesn’t pop —the important information and links aren’t in the first screen.

As today’s first Daily Sucker demonstrates, people are still using music on their web sites.

At some point in the last ten years they’ve fixed the site, but it’s hard to escape your past. Here’s a screen shot of how it used to look. If you click on the picture of the link below, you’ll see a video about the past and present versions of the site.

The Old and New HorseClassified.com

Submitter’s comments: A website about gates that overdid it on the pictures.

Vincent Flanders’ comments: Actually, everything is overdone.

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 were a welding web site. My eyes are then drawn toward the garish red navigation buttons. 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.

While not impossible to read, it’s difficult to read the text on the page. On one of the pages, we have a floating across the page “Buy Now” button that’s incredibly cheesy. 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).

It always amazes me that people think they have the legal right to put music files on their web sites. You can’t 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.

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.

There’s a lot more wrong, which I’m sure will be discussed in the comments.

Gates and Fences

Submitter’s comments: Hey, check this one out.

Vincent Flanders’ comments: I cry every time one of Pedigree’s dog adoption commercials airs (they sponsored the Westminster Dog Show, so I cried a lot). While Pedigree’s ads make me cry in sadness, this dog site makes me cry in desperation. What is it with dog breeders (well, animal breeders in general).

Originally, I thought I would put a link to a dog-related site that looked good so that today’s sucker would see a good looking dog site and use it as a model for their own site. Since the American Kennel Club is the most prestigious dog organization in the country, I figured their site would qualify. Yes, it looks infinitely better than today’s sucker, but they’ve got serious contrast issues as this small screen capture demonstrates (if you want to see the full report, this 1Mb screen capture will give you the information.)

Basically, according to AccessColor, 24.46% of the AKC’s text fails to meet the W3C’s recommendation for color brightness and color difference. Gosh. If a dog doesn’t meet the AKC’s color standard, it can’t be entered in an approved dog show. If anybody should know the importance of color and meeting the standards, it’s these folks. Bad doggie.

ABBC Breeders and The American Kennel Club

Submitter’s comments: Hey, check this one out.

Vincent Flanders’ comments: There’s a type of industry I call “Over The Top” and as I’ve described it:

…an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream.

If you look at my examples of Over The Top sites, you’ll notice that today’s sucker is much better looking than the sites on that page. That’s right. It’s one of the better looking Over The Top sites.

There’s a lot of consistency — blue headlines are centered, red links are flush left, text is generally white. OK, OK, I’m stretching a bit here. I looked at the source code and there’s no CSS, just FONT tags. It would be difficult, but not impossible to fix this site. It isn’t as easy as the site I “fixed” the other day by changing a few tags. There also seems to be a gaping hole at the top. Wonder what is supposed to be there.

John Titor Time Traveler

Submitter’s comments: I found this site when I used Google to find the brand of vintage trailer that I just bought. Could not believe it is for real, but the sad thing is, it is.

Vincent Flanders’ comments: If there’s one web design tool that’s worse than the old Microsoft (Af)FrontPage, it’s Yahoo! SiteBuilder. It’s almost as bad as converting a Microsoft Office document to HTML. SiteBuilder offers templates for hobbyists that are pretty scary, but they’re not as bad as this site.

I’m a very pale, boring, white guy and I love color, but this site takes the concept of multiple colors to a new level. Here’s a screen capture of the site that shows off my new HP w2408h monitor that I’m in love with. The good news is this is what I see with the window open; the bad news is this is what I see with the window open. Could we stick with one color, two type sizes, and flush-left text? It would be nice to have something in your TITLE tag besides “Index,” and it would be great if you could mark your newsletters as PDF files.

Serro Scotty Camper Enthusiasts

Submitter’s comments: I have no idea what I’m supposed to do on this site.

And the ouija and monopoly links? What is that? I know he’s Sean Penn’s brother and all, but I just don’t get it. Maybe the Penn boys are out of my league in more ways than one.

Vincent Flanders’ comments: Normally, I wouldn’t even use the site because it’s for a musician, artist, actor, etc., but this site sucks (insert your favorite description here). It took a bit for me to find the well-hidden help button which tried to explain the navigation. If you have to explain the navigation, your site sucks. BTW, brother Sean doesn’t have a web site. Hmm.

Michael Penn

Submitter’s comments: I am a web design instructor and I use the examples on your site to teach my students what not to do in web design. I have a site that I think is bad. The actual graphics are pretty cool but the functionality I think is terrible.

First of all this Flash Site opens a splash page that asks if you are ready to begin. If I wasn’t ready to begin I wouldn’t have come to the site in the first place, doh. When you click to begin, it takes you to another Flash page with this bar, with words that you can’t read scrolling across the page. When you move your cursor around, say the top of the page that bar grows and speeds up. When you try to put your cursor over it goes back and forth. By the time, I tried to do that I already had a headache.

Below the window where the bar is, there is mystery meat navigation that when you click a link that is available takes you to a page that is just as baffling.

Vincent Flanders’ comments: I call this type of design “WTF?” — What The Heck? I don’t have a clue what this site’s about. It could be an artist’s site, but I can’t tell. Somehow I clicked something and a message went by saying this was a “Macromedia Site of the Day.” Oh. I get it. It’s FlashTrash.

MONO*Crafts

Submitter’s comments: Do I have a treat for you!

Vincent Flanders’ comments: Unfortunately, your idea of a treat and my idea of a treat differ.

I’ve been talking about web sites belonging to “Over The Top” industries. As I’ve described it:

…an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream.

If you look at my examples of Over The Top sites, you’ll notice that today’s sucker is right at home. It’s not mainstream, has multi-colored text on a dark background (which is on a space background — see my 1.6Mb screen capture), has insufficient leading between ordered lists, the TITLE tag has a typo (it’s on several pages), and the following lovely typo:

The Sirius Connection — Free Gift Page

Submitter’s comments: After trying to navigate this page, I’ve given up and decided to e-mail you instead.

Not only do we have very pretty Mystery Meat Navigation, but my monitor is obviously too small because I can only access links that are in the middle third of the screen. I can’t find a ‘non-flash’ version (if one exists) because usually that’s a link in the bottom right-hand corner that I can’t see.

Vincent Flanders’ comments: It’s very beautiful MMN, but crap on a China plate is… still crap. I don’t have any problems with the location of the navigation, I have problems with the Mystery Meat. My biggest problems with the site are the small text and the lack of contrast. Oh, if you go to a subpage, it isn’t labeled. For example, I went to the Fine Art Competition page and tried to read it (dark gold text on a black background with a very small font isn’t helpful). After I read some of the material, I forgot which page I was looking at. There is no marker explaining where you’re located.

Pretty, but useless — bordering on pretty useless.

Jacksons of Piccadilly

Submitter’s comments: At first it looks like nothing worse than an unnecessary splash page with bad contrast. I click “ENTER”. Nothing happens. I try again. I notice the URL has changed, though. Maybe they’re using JavaScript? I switch JS on…ugh! Now I kind of wish I hadn’t.

Vincent Flanders’ comments: It started out tacky and then went to tackier. Contrast is an issue, especially the orange links. The frames are disconcerting.

Spacefest San Diego

Submitter’s comments: Not sure if this is supposed to be ironic or what but it gave me a headache…

Vincent Flanders’ comments: It gave me a headache when I first used it on July 9, 2007. Here’s what I said then:

WARNING: Might cause seizures. The site is for a band/musician — not sure because I can’t stand the flickering, which is why the site appears here (among a dozen other reasons). For that reason, it can’t beat the International Glaucoma site.

Mid-def video of Glaucoma site showing its massive suckiness
Current version of web site (still sucks, but not as badly as it once sucked)

As far as I can tell, MIAUK, is still the same site as it was in 2007. How’s that for progress? One step forward and two steps back.

MIAUK

Submitter’s comments: I don’t think I’ve ever seen as many fundamental mistakes committed in such a simple website. I will be using this site as an example for the class I teach at a local college.

Vincent Flanders’ comments: I like it because it’s more subtle than many Daily Suckers. What isn’t subtle is the fact there isn’t a logo. Huh? Yeah, I know. The TITLE tag says “The Urban Vinters Association,” but there isn’t a logo.

There are four links at the top — one of them is for a Microsoft Word document, another is for a PDF, one doesn’t work and the other is to a Member’s login page. If you click the member’s login link, you get a password box that you have to click at least a dozen times before it will close. The PDF and Word links are not marked as such, which is one of my pet peeves. Oh, when I tried to download the PDF, it blew up my browser. The “Quality Control Certification” heading shouldn’t be on two lines. There are four links on the bottom, including one that doesn’t work called 1.778.288.7364. I assume this is a phone number?

Sheesh.

The Urban Vinters Association

Submitter’s comments: This web page is very difficult to read. It has a black background with red lettering. That makes it hard enough to read but add the glowing menu and glowing links, your eyes will start to hurt quickly. There is also underlined text that is not a link.

Vincent Flanders’ comments: Yesterday, I talked about web sites belonging to “Over The Top” industries. As I described it yesterday:

…an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream.

If you look at my examples of Over The Top sites, you’ll notice that today’s sucker is right at home. It’s not mainstream, has TABLE borders on, red text on a centered background, underscored text that isn’t a link, and the most amazing feature: glowing links. I can’t remember the last time I’ve seen links that glow. Really impressive, When I say “impressive” I mean “sucks.”

What drives me crazy is that it doesn’t take much effort to “fix” the home page. I spent a total of three minutes changing fonts and text colors and I made the home page 2000% better — which is pretty good (2.5Mb) considering I’m not a web designer. It’s not beautiful, but at least it wouldn’t be today’s Daily Sucker. Think what a real web designer could do!

Dr. Joye Pugh’s Publications and Writing

Submitter’s comments: Have you ever checked out Coast to Coast AM’s or Titusville, Florida’s web sites?

Vincent Flanders’ comments: Not until just now.

As far as Coast to Coast AM goes, we have to remember that it belongs to an industry I call “Over the Top.” As I’ve described it:

…an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream.

If you look at my examples of Over The Top sites, you’ll notice that Coast to Coast really isn’t outrageous enough to qualify. Yes, it uses garish colors, but the links are all the same color (orange) and there isn’t the alternating text colors on the same line that OTT sites use. This site is quite tasteful — for an OTT site.

However; but; nevertheless: If this site were for any other industry, it would be Daily Sucker material. Remember: Context is everything.

Titusville Florida, on the other hand, is Daily Sucker Material. It starts out looking worse than Coast to Coast AM and then goes downhill from there. About half-way down the page, the listings widen to fill up the screen and it becomes a mess and The Daily Sucker.

Titusville, Florida — North Brevard Business Directory

Submitter’s comments: Look at the menu on the top. How the heck am I supposed to know what they do. Oh.. I need to hold my mouse over and then there’s a small, almost hidden explanatory text to the left. OMG

Vincent Flanders’ comments: Normally, I’d just say “It’s a music site and it’s supposed to suck,” but this kind of sucking is horribly wrong. It’s one thing to have Mystery Meat Navigation on a music site’s splash page, but there’s no reason for this on internal pages.

International DJ Gigolos

I just read the alpha version of Opera 10 has a really fast Javascript engine. As we all know, Javascript code tends to be large and takes a long time to load. I have a Javascript test page that’s simple, but it’s large (424.6Kb) and takes a long time to load (5.92 seconds — and if you mouseover the bottom link, it adds another 2.75 seconds to the total) and I wanted to see if Opera 10 loaded it faster.

Unfortunately, Opera didn’t “work” with the Amazon.com widget that shows a book when you mouse over the link “High Performance Web Sites…” I went to Opera’s Bug Report Wizard page, filled out the information, and then clicked “Submit Report.” The damn thing blew up — twice. WTF?

The concept of a bug report page is that it’s supposed to work. Interestingly, Google Chrome and IE 7 handle the link differently. Hmm. Maybe Amazon’s programmers suck, too.

Here’s the screenshot that shows why Opera sucks

Submitter’s comments: Here’s a Daily Sucker nominee.

Vincent Flanders’ comments: OK, I go to the New Century Sales site and it looks like its borderline Daily Sucker material. Actually, if this was as bad as it got, the web would be a really good looking place to visit — check out the Worst Web Sites of 2008 to see what I mean.

The problem is mostly that the site is “off” You’ve got a very strange tab menu that’s flush-right, a Mission Statement and a tag line (which, translated, comes out “All babies must eat”), a second “What’s New” button at the bottom of the page, the logo on the subpages doesn’t lead back to the home page when it’s clicked, and a blank box for pictures of the team on the NCS Staff page that doesn’t have any pictures (remove the column). These are more subtle errors than what usually appear on the Daily Sucker.

I discovered today’s Daily Sucker when I clicked on Linecard — by the way, what the hell does “Linecard” mean? It’s a poor choice for a label name. Oh, and at least one of the links on the page doesn’t work. But it led me to today’s Daily Sucker, Southwire.

Compared to New Century Sales, Southwire is gorgeous, but it has one fatal problem: lack of contrast. I ran the home page through AccessColor and discovered that 53.64% of the text fails both the color difference and brightness recommendations and 45.91% of the text fails one of the two recommendations (or 99.55% fails one of the two tests). AccessColor can’t test .45% of the text because it’s on a graphic — which means it’s possible 100% of the text has contrast issues. Charming.

You can see the small screen capture of the results or you can look at the 7.1+Mb full page results.

Southwire

I’ve put up the old Janus web site with my commentary.

Janus Hi-Def
Janus Mid-Def (I like this the best)
Janus DVD Quality