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

Submitter’s comments: My hometown (Syracuse) manages to generate impressive suckiness. It’s kind of embarrassing, but pretty funny.

You had kindly published my previous Syracuse nomination some years ago. Here’s another one. I happen to love diners, but this one puts me off my feed.

We know that Flash splash pages are nearly always bad, but this one is singularly impressive. Sure, you get the usual, very slow loading, with the percentage indicator moving at snail speed. But that’s not all! After waiting a decade for it to load, your reward is an animated woman talking so choppily that she could easily win the world stuttering championship. It was so slow and so bad that I actually recorded it into an audio file so I can listen and laugh later. And I’m on a broadband connection, too! I’d be interested in knowing if you actually get reasonable sounding audio. They must have saved the movie in the least inefficient Flash format possible.

Admittedly, this is a college project, and we know how academia is. They clearly tested this only in the lab, without having it be in the real world on real hosting. I wouldn’t have nominated it, except that there’s just a touch of callow collegiate smugness here and there.

Vincent Flanders’ comments: According to WebPageTest it took 5.562 seconds to start rendering the page. This is for a website on a computer—not some smartphone. I didn’t get any kind of percentage indicator (using Google Chrome), but the lady started talking when the page finally loaded. I didn’t get any stuttering on Google Chrome, but I did get some with Firefox 5. The page loaded much faster in Firefox 5 than Chrome. However, in the history of the internet there has never been a page that automatically plays a video or has some kind of talking avatar that was worth listening to. Ever. It’s a stupid concept and, fortunately, the videos on the subpages don’t automatically run. You have to click to make them run.

I couldn’t figure out how to make the waitress stop speaking until I saw a note that told me to click on her body. Of course, if you go to a subpage and come back to the home page, she starts speaking all over again. It’s a nice looking site so I can’t imagine these people don’t know about cookies and how to use them to shut her up.

According to AccessColor there are contrast problems with the light blue links.

I will give them immense props for making the top menu easy to read. Too many sites (Google for one) have hard-to-read, white-on-black menus.

Syracuse Diners

Vincent Flanders’ comments: I click a link that goes to SeoMoz’s MozCon SEO seminar. Here’s what I see along with some notes about how I felt. Granted, I could have scrolled down and found the information. As Steve Krug brilliantly pointed out, “Don’t Make Me Think.” Or as I like to say, “Don’t Make Me Freaking Think.” James Robert Johnson has better examples—not to mention a better explanation of the problem—in his article “Please print the day of the week along with the date.”

BTW, don’t put any kind of dates on your articles. Jakob Nielsen’s brilliant article F-Shaped Pattern For Reading Web Content loses a lot of its luster—incorrectly—when you see it was written on April 17, 2006 (it was a Monday but it serves no purpose putting that in the article). Still, you automatically think, “This is old research and I’ll discount it.”

Submitter’s comments: This site was done “professionally. It was designed to be maintained by a volunteer; not clear how that happens.

It has the most cumbersome navigation of any site I’ve ever come across (scrolling within a scrollable page? WTF!).

The organization’s logo looks like a knock-off from the Burger King breakfast menu. It takes a ridiculously long time to load, and for what? A crappy image map that isn’t clear at all.

If you can find useful information in less than five clicks, congratulations!

Vincent Flanders’ comments: The 1,489,362-byte image map takes a long time to load and the focal point is a cock rooster. That’s not the kind of cock rooster people want to wait to see load. If people have to wait that long, they want to see naked and/or dead bodies.

The subpage navigation is very strange. It consists of “scrollbars,” but they’re on the left side. I don’t think I’ve seen that before. The home link is the Rooster on the bottom right of the page. The bottom right? I don’t think I’ve ever seen that before, either. If you go to the Sponsors page and click on the Rooster, you’re not taken back to the home page, but you are taken to a weird looking error page. They’ll fix it, so here it is in all its glory.

New Jersey State Fair

Submitter’s comments: This one is absolutely FOUL.

Vincent Flanders’ comments: Incredibly foul. Does it look like the Indianapolis Museum of Art’s website? (This is my baseline website) No. Then it should.

Note: I’m not saying every site should copy IMA’s design. I’m saying, it’s a clean, effective design and you should strive for that type of design.

Burbage Carnival

Vincent Flanders’ comments: Once again, “Where’s the focus?” Dan has so many ads and self-promotional things going on that it’s difficult to see where to go. It doesn’t help that the contrast sucks on the top horizontal navigation menu so you can’t read the links.

I love ads. My old man was in television broadcasting from 1948-1990, so advertising makes me happy. Hell, I even appeared naked on a full-size billboard to promote an ISP where I was employed. But there are limits to advertising and self-promotion. Basically, when your advertising gets in the way of your content, then you’ve gone too far. Dan’s gone too far. If you don’t want to visit the site, here’s a screen capture.

Sport Fishing With Dan Hernandez

Submitter’s comments: Small museums should probably get special dispensation like artists because their websites are probably done by little old ladies. But I thought this one was particularly notable. First you click to “Enter.” Then you click to “Come on In.” (Is entering twice a sign of quality?) Then click yet again to see the exhibits

Vincent Flanders’ comments: Entering twice is a sign of bad web design. I haven’t seen a double Splash page in a while. The last one I remember is Florida Agricultural and Mechanical University. Personally, I prefer Gwinn’s two splash pages, but I’d prefer they didn’t use any at all.

There isn’t anything right about this site. Seriously, take a look at almost any other museum page. Take my home town museum’s website. Gee, does Gwinn’s look like this? Heck no. Actually, I don’t think I’ve ever been to the Indy website, but I like it a lot. It’s simple and you can read it.

Gwinn’s Island Museum

Submitter’s comments: So you want to contact the Village of Lake Zurich (IL). There’s an “Email Page” link up in the top right of every page. That’s good. Then you click on it.

You are required to know the Email address of your recipient or the form doesn’t work. I have six different Email clients on this box. I could have just used ANY of them if I knew the address I wanted to send to.

Someone’s tax dollars were spent on a buttload of Javascript and zero common sense.

Vincent Flanders’ comments: This story reminds me of a conversation I had with my phone provider yesterday. My credit card had expired and a new one was issued. The only difference was the expiration date. Since I pay my phone bill (and Dish Network and my internet connection) with the credit card, the amount due was approaching a ridiculous figure. The big print on the bill had the monthly total, which was in the usual range. The small print, which I hadn’t noticed until yesterday had the huge total and a notice that my credit card expired.

I called up the billing department and said I wanted to pay. I asked Scott, the guy in the billing department, “You guys knew my credit card expired and you know my phone number because you provide me telephone service. Why didn’t you call me up and tell me about the problem? Or couldn’t you send me an e-mail since you provide my internet service?” His response. “I don’t know. It kinda makes sense that we have ways to contact you.”

If I know the email address of the person I wish to contact, I don’t need your stupid email form. This is really stupid.

The navigation, starting with the home page, is problematic. Under “Quick Links” on the left, are black text links on a darkish blue background. That’s a definite contrast problem. Oh, their home page has lots of contrast problems. According to AccessColor:

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

Here’s a screen capture of the report. Hope the citizens of Lake Zurich don’t have vision issues.

City of Lake Zurich – Email Page

Submitter’s comments: No words needed to describe this one.

Vincent Flanders’ comments: I can think of a couple of words: big, Microsoft Office, white space, and eight TABLES. According to the Charles Proxy, the home page eats up 3.25Mb of bandwidth and WebPageTest says it takes over 20 seconds to load. It’s ugly in a harmless way. On the plus side, the facilities look very, very professional. It’s a shame the site doesn’t.

If your company is totally PC, then this site might be sorta-kinda not suitable for work because of photos of female gymnasts. Hell, how would I know what’s politically correct? I’ve spent my whole life embracing the incorrect <grin>.

Oshkosh Gymnastics Center

Submitter’s comments: I didn’t know these sites still existed…

Vincent Flanders’ comments: You can always find sites like this at the sucky end of the street. Small text, lack of contrast, an image that’s over 100K that’s crammed down into a 95 x 86 JPG, a home page entitled “Untitled Document,” animated GIFs whose use make no sense, and plenty of other mistakes.

I dare you to click “Click Here.” It’s not as bad as WebPagesThatSuck’s Click Here, but it leads to boxed text where somebody has forgotten the meaning of the word “paragraph.”

Recovery Pals

Gee, you would think that companies who specialize in making other websites better would be paragons of good web design techniques. You would think they would follow their own guidelines. Some do and some don’t.

Shouldn’t Web Optimization Companies Own Sites Be Optimized?

Gee. That’s pretty logical, right? Being the clever little boy that I am, I just had to run three popular optimization-type tests on some companies that provide page/site optimization services. What do the results mean? Heck if I know. I just gather information, I leave interpretations up to others.

Shouldn’t Web Optimization Companies Own Sites Be Optimized?

Submitter’s comments: A bad website.

Vincent Flanders’ comments: Succinct.

Just another poorly constructed restaurant site. I’m especially fond of the fact that the first menu item on the left is blocked. Not all the graphics are links. Some are and some aren’t, which is very confusing.

Marvelous Muggs

Submitter’s comments: A website belonging to a company that has an unfortunate name. Oh, the site sucks, too.

Vincent Flanders’ comments: Yeah, it’s a bad name. If it were my company, I’d change the name to Assman Equipment, Inc. I know it’s a cliche, but here I go anyway, “Hey, 1995 called and they want their website back.”

I guess what’s confusing is the URL is missioncaseih.com.

Assman Implement, Inc.

Submitter’s comments: I love the repeated green ‘leaf’ pattern in the navigation area. The two links deemed to deserve the little red ball decoration are ‘Home’ and, of course, ‘Unmatched Stability’. Also, what more does a customer need to know about the ‘Tree Waterer’ besides what the packaging looks like?

Vincent Flanders’ comments: What I love most is the tree stand graphic to the right. They’ve taken a 1.34Mb graphic that’s 2550 x 3300 pixels and scaled it down to 530 x 712 pixels. I don’t know if they think that changing their height= and width= attributes of the IMG tag would also change the physical size of the file but, as we all know, it doesn’t. I ran it through Adobe Fireworks and got the file down to around 63Kb. They make the same mistake on other pages.

The rest of the site is as the submitter commented. It would be nice to read the links on something other than a laptop.<grin> Oh, for some reason the links don’t work on my iPhone.

Cinco Plastics

Submitter’s comments: OMG

Vincent Flanders’ comments: I’m headed out to see Jason Isbell and the 400 Unit at the Tractor Tavern, so I’m putting this up a little early.

We either have a radio station with a religious bent or a church with a radio bent. That’s part of the problem—focus—as in “Where’s the focus?” There are multiple churches listed and some businesses that seem to be secular. Because of the URL, I’m going to guess it’s a radio station, but even that’s confusing. The URL says VERN1530, but the logo says KVDW 1530. Huh?

VERN1530AM

Vincent Flanders’ comments: Periodically, I’ll take a look at an old Daily Sucker to see if it’s been fixed. Often, they’re fixed. Often, bad elements are just shuffled around like deck chairs on the Titanic. I originally featured Virginia Stucco almost 10 years ago when it had 17, 159 visitors. Ten years later there have been 29,451 visitors. If you just saw 29,451, you wouldn’t know if that number were good or bad. It’s bad because it means a little over 3.5 people per day visited the site. On the other hand, if they all bought something, it might not be bad. As I often say, “It depends.”

Here’s a side-by-side comparison of the 2001 and 2011 versions of the site. You can see that, for the most part, they rearranged deck chairs.

Virginia Stucco

Vincent Flanders’ comments: The State of Utah’s new HackTML5-based web site is interesting. It’s a marginal Daily Sucker, but it provides an opportunity for us to learn from websites that cost lots of money and are cutting edge. I call it HackTML5 instead of HTML5 because you have to use all sorts of hacks to make HTML5 work. Then again, almost any HTML is hacked to some extent (thank you, Microsoft Internet Exploder).

If I scroll down the home page In Google Chrome, I can’t get the bottom menu to stay in place like I can with Firefox 4.

There are a lot of behind-the-scenes issues. Yslow gives it an F (40) while Page Speed gives it a 74. (Page Speed always grades on the curve. Earlier versions were tougher than Yslow, but now they’re pussycats. BTW, 40 is the lowest score I’ve ever seen. Even the ridiculously crazed format of TechCrunch gets a 48.) The site isn’t using the asynchronous version of Google Analytics, tsk tsk. There are 15 separate Javascript files and 4 external stylesheets. Here’s a screenshot of the Yslow report.

The material on the “Highlights” page scrolls too quickly. I read at a reasonable speed (I yam a kollege gradiate), but I can’t keep up.

Clicking on “Highlights” or “in Utah” or “News” brings up a scrolling DIV. It’s a nice concept, but it doesn’t work that well on my iPad. Why does that matter, because they have a file called ipad.js that’s supposed to make the site work on an iPad. It doesn’t quite get it right. Here’s what they say their site looks like on an iPad and here’s what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen.

THE REAL PROBLEM WITH THE iPAD VERSION is the iPad must be in landscape mode. Putting the iPad in portrait mode causes major problems because the site prevents scrolling (user-scalable=0). Here’s what you get for the home page when in portrait mode.

When you click on “in Utah”or “News” and you have a large portrait monitor, you get a repeating background. That sucks. It sucks because when you click “Search” or “Highlights” you don’t have the problem.

They’ll fix this—probably by the time you read this—but the Education page blows up in Chrome and Firefox, but not IE9. Hmm.

On the plus side, what they’ve done with content is pretty amazing.

State of Utah

Submitter’s comments: Netflix released a new design of their site. You need to be a subscriber to see the monstrosity that they have unleashed but I think you might have a candidate for next year’s awards. The overall usability has fallen off the charts.

But don’t take my word for it – read some of the 1400+ comments on the blog that have been posted since yesterday morning about this thing.

Vincent Flanders’ comments: Wow. I was thinking about joining. My son-in-law has it so I’ll have to check it out.

Netflix explains their new navigation. When you have to explain your navigation, your navigation sucks. I’ve never seen an example to disprove this theory. Sounds like they’ve added Mystery Meat Navigation.

Here’s the Netflix blog discussing the redesign along with 1,500+ comments

Submitter’s comments: This site sucks, because it only works in IE….except it doesn’t even work in IE9 – it just hangs.

Vincent Flanders’ comments: Wow. You don’t often see a website where it demands you have a certain browser. It didn’t work in Google Chrome, but it also didn’t work in IE8. Hmm. I guess it basically doesn’t work.

Premier Fishing

If you have clients, you need to watch the FYPM video. Historical note: the phrase comes from Goodfellas.

It’s a great video that most of us can identify with. A friend of mine has the distinction of having many of the excuses clients use to not pay thrown at him in one afternoon.

Email from Cool Graphic Artist to Vincent Flanders

Thanks for sending the Fuck You! Pay Me! video. Love it. It got me so fired up that I used it on a recalcitrant customer. Here’s the email exchange that took place today.

Email from Cool Graphic Artist to Connie Conniving-Customer

Could you please get a check going for this invoice? (See attachment). It seems to have slipped through the cracks.

Email from Connie Conniving-Customer to Cool Graphic Artist

The production of the flyer was not approved by the Association prior to John Doe giving you the approval and as such, the Association is not responsible for payment of the invoice.

Email from Cool Graphic Artist to Connie Conniving-Customer

John Doe has acted as a representative for this organization from the beginning. Hell, he commissioned the logo, which was paid for by the organization. So the issue of payment for my services is between you and him. And I suggest that you take it up with John Doe and pay me. The amount of ill will generated by not paying me is not worth $165.

Email from Connie Conniving-Customer to Cool Graphic Artist

I have spoken with John Doe about this matter previously.  By the way, I need our logo as I have never received it from you. As the President of the Association, I need to be provided with a camera ready copy of the logo.  Please forward it to me immediately.

John Doe may act as a representative but he does not have unlimited authority to spend the Association’s money without prior approval.  It may have been in your best interest to verify approval.  The Association has officers in place and there have been many changes in the Association since the time the logo was purchased from you.

As I previously advised you, the Association did not approve the project for the golf tournament and we are not in a position to pay for an invoice that was not approved.

Email from Cool Graphic Artist to Connie Conniving-Customer

Nah. I’m not sending the logo until you pay me my $165. Or you can get John Doe to pay me. I don’t care.

Email from Connie Conniving-Customer to Cool Graphic Artist

I’ll tell you what, you send me the logo, I will send you the $165 and we will take our business elsewhere.  I am NOT sending the check until I have the logo in my possession.

It escalates:

Email from Cool Graphic Artist to Connie Conniving-Customer

Nope. It doesn’t work that way. I’ve been doing graphic design 30 years. I’ve always been fair. Send me a check. I’ll send you the vector art, JPGs for in-house use, color and black & white versions. I’ll also send you PDFs of all of the ads for the directory that still hasn’t been produced. You’re welcome to take your business elsewhere.

I’m not trying to be obstinate, but I was hired to do your Association’s business. If you want to be mad at someone and go after your money,  talk to John. I don’t think I should be put in the middle of some internal politics. I was requested to crank a flyer out in a hurry. It was presented as an Association fund raiser. No one called me and said- “John Doe is working on his own. He doesn’t represent the Association.

I do all of the advertising and collateral for your (name deleted) Non-Profit Organization. Every time someone from marketing or elsewhere in your Non-Profit Organization requests some work, I’m not going to call the VP of Marketing to get an OK because the precedent has been set. If someone were to step outside of their authority and order something, the Non-Profit Organization would pay it and deal with the person that made the request. That’s how it works from an ethical standpoint—and legal one as well. It’s not much money, but in this day and age I’ve got to go after what’s owed me.

Hope you can understand where I’m coming from.

Email from Connie Conniving-Customer to Cool Graphic Artist

Well, okay I will have the logo reproduced elsewhere.  Please return the camera-ready ads to the people who paid you for their work as those items do not belong to Association.  I will work with them directly. I do need to make it clear that you were NOT hired by the Association, you were hired by John Doe. Neither the Association nor myself are going to be forced into paying something that was not authorized.

Email from Cool Graphic Artist to Connie Conniving-Customer

Well, if that’s the way you want to play it. Just so you know, you don’t own the copyright to the logo. I own the copyright. This article explains it very well.

If you decide to have a logo done, it better not look like mine or you will be in violation of copyright law. Oh, yeah. Good luck getting someone to do a logo for $165.

Email from Cool Graphic Artist to Vincent Flanders

Vincent: This is where things stand Friday afternoon. I should have just said “Fuck you pay me.”

Submitter’s comments: I thought you might be interested in this site I have recently come across. I don’t necessarily know how it ranks compared to all the rest of the internet, but I have a feeling it’s pretty bad on just about any scale. Just be prepared for the visual assault before clicking on the link.

Vincent Flanders’ comments: When I saw the URL – rushbiddies.com- I thought it had something to do with Rush Limbaugh, a bunch of annoying old ladies (biddies), a bunch of annoying old ladies being annoyed by Rush, or a bunch of old ladies annoying Rush. Nope. It’s about recruiting high school girls to go Greek. Hmm. That has an unpleasant sound to it. I should change it to “Girls Gone Greek.”

Lots of text problems—contrast, size, centered and flush-left on same page, plus the use of frames.

RushBiddies

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