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

1. A JavaScript Content Switcher That Works Without JavaScript – Impressive Webs
2. Five Reasons Why Landing Pages & Forms are More Valuable than Homepages – Performable
3. How To Use Google’s Free Online Hard Drive – BusinessInsider
4. Breaking Up Large Documents for the Web – Part 1
5. Breaking Up Large Documents for the Web – Part 2
6. Breaking Up Large Documents for the Web – Part 3
7. Customers Increasingly Intolerant With Slow Web Sites – PC World

Submitter’s comments: The gracious host starts his high pressure sales talk as soon as you get to his site. He even wants to “point out a few valuable areas for you to take advantage of.” Given his first impression, I was too scared to look any further. I’ll leave that to the professionals. Does this qualify for a new category of what not to do?

Vincent Flanders’ comments: It’s a variation of those talking people you see on Mr. Bottles or Connecting Point (video).

I was afraid that this site was going to degenerate into Guns Guns Guns (video). Thankfully, it didn’t. What gives with the large, black space in the middle of the page. Allegedly, it’s something called “Hacker Safe.”

It would be nice if the site used cookies so that you’d only hear the message once — on each page. Visited links don’t change color (hard to do on this blood-red background) so you don’t know what you’ve already looked at.

I love the “2 Day Shotgun Skill Builder” page. First, as soon as you go to the page, a video starts. Wrong. You’re never supposed to do that. Let people click if they want to see the video. Trust me. I’ve gone through the site and the videos and sound files really get on your nerves — especially when you return to a page you’ve visited. Second, the video shows a guy shooting a handgun instead of a shotgun.

Like so many sites, there’s so much information that’s poorly categorized. Oh, there’s too much text that’s too little.

Frontsight.com

Submitter’s comments: When I first saw this site and noted the dreaded “schemas-microsoft-com:office:office,” I figured it simply didn’t work well with Firefox. Not the case. It looks the same in I.E.

I am not certain there are any lessons to be learned here. This is simply stupid. On many pages the content simply starts half-way down the page due to a doubling of the side menu. Even if you are part of the slap-it-together-and-post-that-puppy crowd, it is hard to believe that no one noticed this on the damn homepage at least.

There are a couple of other problem (home page is named “Index”), but who cares?

Vincent Flanders’ comments: I always admire people’s inability to see the obvious. This isn’t one of the dreaded IE6 bugs that screw your site up but you won’t notice cause you don’t have IE6 on your machine situations. You can see it in about any browser you try.

Hobo.com

Submitter’s comments: ColoradoPols.com recently ran an article entitled The Worst Campaign Website We’ve Ever Seen.

Vincent Flanders’ comments: As readers of this site know all too well, just when you think you’ve seen the worst the Internet has to offer, you discover something else. Yes, their suggested site is bad (actually, it’s been improved — you should see the screenshot in the article). However, the worst campaign site for this year (so far) is George Hutchins for U.S. Congress. It ended up as #2 on my “Ugliest / Worst Over The Top Web Sites of 2009.”

Kennedy for Colorado

Submitter’s comments: Stumbled on this site.  Gave up trying to figure out the Mystery Meat navigation (good luck clicking some of the links…) and stumbled on out of there.

I respectfully submit it for your ah… consideration.

Vincent Flanders’ comments: Yeah, yeah, yeah. I know. It’s an art site, but we need to stop promoting these techniques. The good news is the “bubbles” don’t make bubble sounds (I remember hearing them on some site from the past).

Stop it already.

Studio Jan Melis

Vincent Flanders’ comments: When you’re young, you talk about the drugs you take. When you’re old, you talk about the medicine you’re taking. Once of the problems with taking medicine when you’re older is that you forget whether you’ve taken your pills or not — especially when you take several different medicines.

King 5 TV ran a news story about a new type of medicine cap that tells you how long it’s been since you’ve opened that particular medicine. They mentioned that local drug store chain (Bartell Drugs) would have the product available and that it was available from the manufacturer.

I looked at a lot of pages at Bartell’s site , but couldn’t find a search engine. Using the Google Toolbar, I searched the site, but only found one link and the link wasn’t helpful.

When I went to RX Timer Cap’s web site (the manufacturer of the product) and clicked the Buy button, I was greeted with the message “Page Under Development.”

Holy Mother of God. Do these morons realize how frustrating this is? I want your product but you won’t let me order it.

Obviously, there will come the day when they solve this problem (I hope). Here’s a video to memorialize the fact they’re Unclear on the Concept.

RX Timer Cap

Submitter’s comments: This site is guaranteed to give you a headache. The home page has a Javascript slideshow of different sized pictures that cause the footer to bounce up and down uncontrollably. You’ll notice the menu on the right has an orange border while the links are red. To top it off we have an awful bee cursor.

Vincent Flanders’ comments: I know how easy it is to screw up a Javascript slideshow. I screwed up the one on the home page (here’s what the adjustable slideshow looked like on my home page). Some bright person complained and I fixed it by setting the box height to a fixed value — 300px (here’s what the revised slideshow looked like). Today’s sucker bounces more than my box did because there is more size discrepancy in their pictures.

I’ve never bee fond of right-side navigation, but that’s a personal preference.

the bees knees

I ran into two articles about problems in using a CSS file for printing:

1. Browser Performance Problem with CSS “print” Media Type (December 2009)
2. 5c media=print stylesheets (February 2010)

It turns out that if you’re using a print stylesheet (shows up in the format <link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />), every other file has to wait to load until print.css finishes loading.

To get the full effect of the delay, I created a 583Kb print.css file — which may be the world’s largest print.css file — and placed it in the head of this HTML file. Notice how long the page takes to display (I’ve turned off caching and file compression.).

The following picture shows what happens (click graph for larger example):

The page took 7.42 seconds to load. Page Speed gave the page a score of 81. Yslow gave it a “B,” with a score of 84. These two tools are extremely important and should be in your arsenal.

Optimizing the page. I removed the CSS from the <HEAD> of the document and inserted the Javascript code from Article 1 just before the </BODY> statement.

<script>
window.onload = function() {
var cssNode = document.createElement(‘link’);
cssNode.type = ‘text/css’;
cssNode.rel = ‘stylesheet’;
cssNode.href = ‘print.css’;
cssNode.media = ‘print’;
document.getElementsByTagName(“head”)[0].appendChild(cssNode);
}
</script>

</body>
</html>

As you can see in the graph below, the document loads much faster (click on the graph for larger example). All files load in 5.97 seconds, but the whole page (everything but the print stylesheet) loads in 2.11 seconds — the visitor quickly sees the page and doesn’t care that the print stylesheet loads last because s/he may never want to print the page and if s/he wants to print the page, it won’t happen immediately.

Page Speed gave this version of the page a score of 85. Yslow gave it a “B,” with a score of 83. Page Speed liked the page 4 points more, but Yslow liked the page 1 point less.

Since nobody on Planet Earth is going to print a document immediately after it loads, it’s safe to use Javascript to load the print stylesheet. What if they don’t have Javascript enabled? See Article 1 for the answer.

Yes, it’s true that nobody is going to have a print stylesheet that’s this large (it’s composed mostly of comments) and the improvements aren’t as important as caching and compressing your site’s files, but it’s good to be aware of what causes roadblocks in displaying your web pages.

Customers Increasingly Intolerant With Slow Web Sites

Submitter’s comments: Here’s one for your pages

Vincent Flanders’ comments: It’s sad because Coos Bay is one of the prettier sections of Oregon. Bandon, my favorite town in Oregon, is near Coos Bay, but the only picture this site has of the Bandon Beaches makes it look like a dump.

The main page is no charmer. It’s functional, but a lot of material isn’t there although placeholder text exists.

Coos County and Oregon History: Voices From Beaver Hill

Submitter’s comments: Check it out. I think it’s way too busy.

Vincent Flanders’ comments: Well, a lot of the problems are caused by the number and position of the ads. There is nothing wrong with ads, God love ‘em, but when there are so many and you can’t differentiate them from the rest of the page, you have a problem. Where’s the focal point of the page?

Pretty much everything on the site was created in Flash and that will be a problem for Firefox users with the NoScripts plugin or who have Javascript turned off. This is all you’ll see. It’s pretty scary and it makes the site pretty useless.

As this screenshot demonstrates, the site’s use of Flash, coupled with a lack of actual text, hurts this site in the area of Search Engine Optimization. There are only 43 words on the home page. I’ve got over 2,000 on mine.

Confusingly, the Pause button on the first Flash animation, doesn’t pause the video. It pauses the music, which is counterintuitive.

Sticks and Stones Outdoor Adventures Magazine

Google’s Super Bowl ad was nice, but this “Google ad” is much, much better - http://bit.ly/cZI6Ds

Got Milk?

Submitter’s comments: Here you go:

Long Loading Page? Check.
Stupid Music? Check.
World’s Most Annoying Navigation? Check.
Flash Overdose? Triple Check.

This web site sucks!

Vincent Flanders’ comments: Check.

Another problem: the text is hard to read. Checkmate.

Got Milk?

Sidney D. Torres IV

Submitter’s comments: This web site for New Orleans businessman Sidney Torres, who is about to star in a new reality show on TLC, is really hideous.  What’s really strange is he’s actively promoting it – his last few newsletters have linked it.

Vincent Flanders’ comments: Interestingly, there’s a unique problem when viewing the home page in Google Chrome. The page scrolls and there’s an extra huge white space. It seems like the page was eating up CPU cycles in IE 7, but then IE 7 on my machine is a piece of junk.

I guess Mr. Torres doesn’t want a home page, but a widget page. He’s put up a Myspace page, but not on Myspace. On the other hand, he is a trashman so the page may be perfect.

Sidney D. Torres IV

Fall Creek Sutlery

Submitter’s comments: This makes my head hurt. And the navigation? Where am I? Maybe this web site was new-looking during the Civil War.

Vincent Flanders’ comments: It’s sad because I know there’s a market for these products. I realize we just had Groundhog Day, so why is the first thing I see on the site a “Merry Christmas” graphic? We have centered text, multicolored text, “Click Here” messages and a page that goes on forever. The only good thing about the site is that Norton thinks it’s safe.

Fall Creek Sutlery

The Tory Party

Submitter’s comments: So I’m a Yale student and I was wondering around looking for information on groups here. Then I found this site: I’m sooo freaking confused. What the heck is going on? Anyway, figured that as a long-time reader of your site, you’d enjoy this little debacle.

Vincent Flanders’ comments: It’s soo interesting that Yale has one of the best free resources on web design — The Yale Web Style Guide, but it looks like The Tory Party section of Yale has never heard of it. It’s Metaphoric navigation courtesy of the terminally ill Flash (hell, even Zeldman’s jumping on the corpse that I started kicking when it was still alive). It’s site’s like these that are helping to kill Flash.

The Tory Party

Dave’s Bargain.com

Submitter’s comments: This is yet another business that reared its head upside down in terms of their web site. There are a lots of (useless) links. Screen resolution is a issue so you have to do some horizontal scrolling. I wonder why it has a lot of external links to other sites if the owner is not directly selling their products to the consumer? Other than that, the web site. just looks plain ugly at the best, but I will let you be a judge of that.

Vincent Flanders’ comments: As someone who has struggled and continues to struggle with menus and navigation, I appreciate this site’s problems as does Dack Ragus whose brilliant mockup of Amazon.com going tab-happy is a classic example of menus gone crazy. This site has crammed itty-bitty text onto 51 hard-to-read buttons.

The clothing page shows a couple of problems mentioned by our submitter — external links with broken images. I’d like to mention we have links with two different colors (blue and red, both without underlines). One thing our submitter failed to grasp is that the links to other sites are basically associate links where the site gets money for referring customers. At least that’s what it looks like.

In fact, this site may be just one very big referral site. Does this site actually sell anything. I can’t tell and if I can’t tell, that’s not good.

Dave’s Bargain.com