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

If I remember correctly, the glory days of Sears are long past. Their web site isn’t helping. In fact it’s hurting them. It’s one thing if your web site looks like a car wreck on the information highway, but when you keep people from spending large sums of money on your web site you need to be slapped silly.

Like John Mellencamp, I live in a small town. When we have a power outage, it lasts for days so I need a portable generator. Sunday night (12-28) I go to Sears.com, find what I’m looking for, and try to order the generator. Since it’s a big item, they need to deliver it directly to my residence. No problem — I give them my home address. Since I live in a small town, mail — including credit card bills — gets delivered to a post office box. Since I don’t click the checkbox that says “Billing address is same as shipping address,” Sears lets me key in my billing address. I type “PO Box 123456″ and hit submit, but the form doesn’t accept it — but there’s no error message. I try to go to the next step, but Sears gives me an error message that it needs a billing address and kindly provides me a link to create one.

You guessed it — I’m in loop hell. I think, “Maybe it’s my browser. Maybe there’s some stupid pop-up blocker running.” I use another browser that doesn’t have any add-ins. I try to order again. Same problem. I try a third browser. Nothing. As a normal, red-blooded American male, I’m massively pissed.

Monday morning (12-29) I call up Sears.com’s web support and mention my problem. The woman on the other end automatically knows what’s wrong as soon as I say, “It won’t accept my PO Box.” She says, “You have to spell PO Box out — ‘Post Office Box.’” You’ve got to be freaking kidding me.

Yes, they’re aware of the problem, but I suspect the problem has been around a long, long time. If they haven’t fixed such an obvious mistake by now, it must mean the site has other problems that are far, far worse. If this happened to Jakob Nielsen, he’d politely tear them a new one.

Sears should die. Wait. I think it is.

Submitter’s comments: This is one of the very few web sites that actually should have a black background.

It used to just suck as Archive.org’s last captured version of October 19, 2007, demonstrates.

Vincent Flanders’ comments: There are 50 billion reasons why this should be the Worst Web Site of 2008. Correct me if I’m wrong, but isn’t the favicon on the Archive.org version an American flag? Remove your flags from your web site. Now.

Bernard L. Madoff Investment Securities LLC
The last version from Archive.org

Submitter’s comments: This maker of (expensive) fashion sunglasses has some really fine products — unfortunately I can’t figure out what they are or how to get to them on the site. The site appears to be all Adobe Flash — but the problem is that even if you have the latest version of the plugin, it’s still impossible to find anything on their site. Mystery Meat Navigation is redefined on these guys — they have 3 completely useless links at the top and everything else is pictures — which are horrifically tiny on a laptop screen.

Vincent Flanders’ comments: They make sunglasses? Are you sure? Only about 10% of the pictures have anyone wearing sunglasses. You’re supposed to be able to look at a web page and figure out what product/service the company provides. Nope. Even the URL — killerloop.com — doesn’t help because the URL gives the impression they’re selling sound loops to musicians and DJs. I can just hearing someone at the branding meeting say, “We’re too cool to let anyone know who we are.”

KILLER LOOP SS08

Submitter’s comments: My suggestion is “The amazing web site of Shakespeare’s Sonnets”:

Shall I compare this to a train wreck now?
Its whole design all logic doth defy,
The text and background colors I avow,
Make train wrecks easier upon the eye,
Sometimes the text is centered on the page,
While images are upon the left arrive,
Though such design was one time all the rage,
That time, we know, was nineteen-ninety-five,
The page provides advice on how to view,
(For those who do scroll down enough to see’t),
And those, I fear, shall number very few,
Who will for long enough abide such shee’t,
But long as tools like PageMill do exist,
Web sites that suck like this will still persist.

Vincent Flanders’ comments: We have a winner for best commentary of 2008. Entries are closed. I bow before your genius.

The amazing web site of Shakespeare’s Sonnets

Submitter’s comments: I needed some information on the Sheriffs office and came across this gem. After waiting for the “click to enter” message to finally appear, I just clicked the sheriff’s badge. I entered the site and realized you lose the navigation with each page. Not to mention the bad graphics and blinking. Ugh, I left the site.  Maybe I can find the info elsewhere.

Vincent Flanders’ comments: I swear I’ve used this site before, but I can’t find it in any records that I have. This site reminds me of the old Byrd’s song, “You All Look Alike.” Most police web site look alike —”They look (a)like they suck.”

We don’t need the FlashSplash page, but we need the “real” home page to look much better. God, I hate gold-colored table borders on a black background. The site also uses a weird font — Engravers MT — which I miraculously have on my system so the text comes out looking the way the designer wanted. Of course, not everyone has this font on their computer.

The Narcotics Task Force page is too wide for my browser window, so I have to scroll horizontally — another mistake — and even though the text is large, the dark green text is hard to read on the black background. Like the submitter said, there’s no navigation except the back button.

Franklin County Sheriff’s Office

Submitter’s comments: I nominate Jefferson Millwork for a place of “honor” on the Daily Sucker.

Let’s see how many problems I found on this “winner” of a site.

• The TITLE tag for each page is “Untitled Document”
• When using Firefox, the top of most pages shows <%
  @LANGUAGE=”JAVASCRIPT” CODEPAGE=”1252″%>.
• Just about all text is centered — and rather crude looking.
• Contrast for links on pages with black background (just about all the pages) is horrible.
• Their motto from the main page is “There are Times When Only the Best Will Do.” Couldn’t this be one of those times, please?

Vincent Flanders’ comments: This screen capture shows the Javascript code at the top left and rest of the page with its wonderful, centered text.

The home page logo sucks in Internet explorer and I’d like to mention the stereotypical American flag found on almost all industrial web sites.

The biggest mistake of all is that the link marked “Employment Brochure and Application” isn’t. I went through all 65 pages and all I saw was the fantastic work they produce. At 6,776,152 bytes, this unmarked PDF file (another mistake) isn’t an employment application. I realize times are tough, but at least put up a real job application form or relabel the document. I’d be pretty upset if I wanted a job and downloaded this file.

Once again, another company whose work is beautiful has a web site that’s uglier than a monkey’s armpit.

Jefferson Millwork and Design

I know, I know I use Javascript. You have to if you want detailed analytics (or any kind of advanced features) but there are lots of reasons not to use JS. Almost every time there’s a security alert about an unpatched Internet Explorer vulnerability — and there’s a big one out now (with a patch due Wednesday) — Microsoft suggests you turn Javascript off.

Here’s a screen shot and I’ve highlighted the applicable parts.

Microsoft isn’t the only browser that has ever had JS problems and it isn’t the only problem with JS. Until recently, JS has been a drag on web site performance. It’s still a drag unless you place your JS correctly on the page or delay its delivery.

Submitter’s comments: I think the large “Ghostweb Navigation Menu” near the bottom of the long front/cover page is such a wonderful afterthought.

Vincent Flanders’ comments: I think we have a new champion in the category “Main Navigation That’s So Far Away It’s In The Next County.” It’s almost 13,000 pixels from the top of the page.

There are a lot of other things wrong — flush left and centered text, multiple font sizes, ugly, blue divider bars, ugly background, animations, tables with borders, clickable images with borders, images with white background that looks ugly against the regular background, and so on, and so on.

Here’s a full-length screen capture
Here’s a screen capture that gives a feeling for the length of the home page

There is some centered text that says, “Telephone the Dead Today.” I’d change it to “Telephone a Web Design Firm Today.”

International Ghost Hunters Society

Submitter’s comments: Here’s a possible candidate for websites that suck.

Vincent Flanders’ comments: Possible? There are many disturbing features, but the fact that you have to scroll horizontally in the left frame to read the text may be the most disturbing. The second most disturbing feature is the left frame automatic scrolls in Internet Explorer, but not Firefox. Then, we have the color scheme. Hold on. The most disturbing aspect of the page is the source code — OMG it’s a Microsoft Word document saved as HTML. FUBAR

Zaddock Pratt Museum

Submitter’s comments: Vincent, I love what these people are doing. Namely, pushing for a return to a more Constitutional form of government. Their website really sucks, though. For starters, their homepage goes on FOREVER.

Oh, and the link at the top of that homepage goes to a page in which, when you roll your mouse over the top navigational links, you’ll find that the mouseover images aren’t showing up. Someone fell asleep at the switch there…

Vincent Flanders’ comments: It looks like every article they’ve ever written is on the home page, which weighs in at 972.91Kb. They’re wasting their visitors’ time and, more importantly, they’re wasting serious money on bandwidth. I suspect if they just kept the last 3 or 6 months-worth of material on the front page and put the rest on subpages labeled 2007, 2006, 2005, and 2004, they could get the page down to a reasonable size and save lots of money on web hosting fees.

The graphic below shows the mouseover the submitter was talking about. It’s on the page about Soon-To-Be-President Obama’s birth certificate controversy page:

We The People Foundation

Submitter’s comments: This site is 10 pounds of crap in a 5 pound sack. This is what passes for the Main/Biggest area music site… scroll down till ya get tired.

Vincent Flanders’ comments: I love clever and my readers are soooo clever — “10 pounds of crap in a 5 pound sack” — that’s just brilliant. It sounds like an old Southern saying but, even if it is, I’m going to use it and make it mine. I love it because that’s a perfect description for this “site.”

I don’t have to tell you there are contrast problems between the link color and the background color. We’re mixing flush-left text with centered text. Heck we even have a portion of the page that has black text on a WHITE background. Actually, it looks nice but we’re mixing background colors.

Yes, it’s called a home page but you don’t have to put everything on this one page.

Shenandoah Valley Online

Submitter’s comments: You should check this French site out. Awful.

Vincent Flanders’ comments: Like most Americans, I only speak English. On the other hand, I don’t think you need to translate the text on today’s site to know it sucks. GlobeGuy will “like” the incredibly cheesy globes — especially the animated, pulsating globe at the bottom of the page. When I clicked on the images that said “IMAGE A METTRE” I received a 404 error message or worse.

To say today’s sucker is really, really bad is really, really obvious to everyone but the designer and the site owner.

NEGOCE MULTI SERVICES

Submitter’s comments: Check this one out.

Vincent Flanders’ comments: Five succinct words: Check it out on BrowserCam.

STH Conference

Submitter’s comments: Irony of ironies: A disabilities web site that is spectacularly ill-suited for people with vision problems like color blindness. (Warning: If you are not blind now, you will be after viewing the site. Wear welding goggles.)

Vincent Flanders’ comments: Well, actually, it isn’t “spectacularly ill-suited for people with vision problems like color blindness,” it’s just butt-ugly. I ran the home page against Visicheck’s color blindness simulator for both deuteronope and protanope color blindness and then checked the results against AccessColor for contrast issues and discovered:

4.68% failure for both color difference and color brightness for deuteronopic color blindness

3.28% failure for both color difference and color brightness for protanopic color blindness

0.00% for the regular web site.

On the other hand either color difference or color brightness does not meet the recommended standard for 6.56% of the total the text for the regular site. The deuteronope version’s failure rate was 3.51% and the protanope version was 0.47%.

The text is also tiny, but you can resize it by typing CTRL+ but the colors are soooo horrid.

DRM Guide to Disability Resources on the Internet

Deuteronope screenshot

Protanope screenshot

Submitter’s comments: The city of Clarksville has redone their website. It is disorganized and confusing. Have a look and see for yourself. Maybe you can use it as a bad example.

Vincent Flanders’ comments: Well, I jumped from the city’s page to the police department’s page because you usually can’t go wrong with police sites. The fugly splash page weighs in at 1.47 megabytes. OK. What’s causing this page to bloat like a puffer fish? It’s those poisonous images on the left and right. One is 523,675 bytes and the other is 741,098 bytes. Just to show you what a nice guy I am, reduced the size of the images to fit in your HEIGHT=”413″ image attribute. Here is image #1 (25Kb) and here’s image #2 (48Kb) — and I didn’t really try to optimize them. Feel free to use them and cut out 1,189,578 bytes of fat from your web page.

The copyright page says “2006,” but it’s more like 1996. On the other hand, the unnecessary splash page looks better than the real home page with its centered gold and silver text. Is it possible to have a bigger logo? Yes, but I don’t want to see it.

Clarksville Police Department

Submitter’s comments: Here is a site for you.  I can’t figure out what is the purpose of the site.

Vincent Flanders’ comments: I can’t figure it out either. I’m guessing that it’s an art site, which means it shouldn’t qualify as a Daily Sucker, but it’s so egregiously horrible I have to use it.

It’s made with Flash, of course, and it’s called “The Oculus.” The first five times I went there, I couldn’t get past the first screen. Then I clicked “something” and the ball opened up. It seems that what opens up varies. When the squares are big, I never was able to go further. One time, it just seemed to go on its own and I ended up at Miss Vix’s Tattoo Parlor.

This isn’t art. It’s the web equivalent of what happens to the Mike Douglas character in Mr. Mike on Halloween. (MAY BE NSFW. Turn speakers down. You’ve been warned.)

The Oculus

Submitter’s comments: Here is a website that was brought to my attention through a co-worker. The first words out of my mouth were “They really need to avoid working on their website after engaging in a round of ‘product quality testing.’”

Then as we clicked on the various links, I couldn’t help but recall your hilarious YouTube video review of Marijuana.org.

So I submit to you, under the category ‘coding under the influence,’ the website for the Aviator Brewing Company.

Vincent Flanders’ comments: The different colored, centered text reminds me of the old Marijuana.org site, which is no longer operational. I think they’re trying for the “drinking buddy” informal writing style like you see on the Brewing page and the other pages. Unfortunately, it doesn’t come off as clever but it reminds me of Dean Wormer’s comment in the movie classic Animal House: “Fat, drunk and stupid is no way to go through life, son.”

Aviator Brewing

Submitter’s comments: This is a disaster cleanup company (top listing under “disaster cleanup companies” at Google) that is surely in need of its own services.

Vincent Flanders’ comments: Hmm. A top ranking at Google is nothing to sneeze at. On the other hand, the site is just begging for a redesign. We have a lack of contrast on the menu buttons at the top of the page and the in the sub-menus the “&” is run together — “Fire&Smoke Restoration” — with the text. The Flash is annoying, but inconsequential since there are no links. There are contrast issues with the black text on the the dark silver background on the left menu and the page scrolls horizontally.

This site reminds me of my favorite cleanup company’s web site, and a past Daily Sucker, Scene-Clean. Makes today’s Daily Sucker look like CSS Zen Garden, doesn’t it?

The home page has an interesting problem. Search engines look at the HTML code in sequence and place a higher priority on material near the top. When you linearize the home page, the first couple of screens are not what you’d expect. Poor layout.

Disaster Cleanup

Submitter’s comments: Vincent: I thought you’d love this one — the home page is one single image with no real text and an image map for navigation.

Vincent Flanders’ comments: Looks like somebody had a brochure lying around. C’mon. This is soooo 1997. On the other hand, it’s PageRank is 2, with is double what Heritage Development achieved with their much fancier site. They use image maps throughout the site. Surprisingly, the code-to text ratio on this site is 10.02%.

Holthaus Signs

Submitter’s comments: It’s a simple sucker. A general lack of focus on this web page is not a crime, so I ended up just staring at the news scroll … of real headlines, not company news. The last thing a developer’s website should be doing is reminding people how bad the economy is.

Vincent Flanders’ comments: It is interesting how your eye is drawn toward the scrolling news. When I first looked at the site, the news was financial — now it’s general, with one of the headlines talking about Brad Pitt and another about O. J. Simpson.

There’s only 422 bytes of actual content on this site (3.04%). No wonder it only has a PageRank of 1. I also don’t understand why the home page can also be accessed with https.

Heritage Development or the “secure” version.

Submitter’s comments: Here is an example why academics should not be allowed to build Web sites unsupervised.

Vincent Flanders’ comments: I agree. There’s some weird floating box that talks about 1,3-diradicals. Why is this here? Why do we have a page that’s 853Kb? The “Open Window” button doesn’t perform as you’d expect. It’s very strange. The message “This is your first visit” should be changed to “This is your last visit, isn’t it?”

Guy Bertrand Research Group

Submitter’s comments: Enjoy.

Vincent Flanders’ comments: There’s not much to enjoy. It’s a waste of a good URL — dear.com.

Dear Laserworks