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

Submitter’s comments: My friend sent this to me when she was looking into the college. You would think with all the money they get from tuition they would be able to afford a web page that wasn’t made by an 11-year old boy.

Vincent Flanders’ comments: I could excuse the page if it were designed by an 11-year old. I should excuse it because it’s for an art school but, because some irresponsible dickhead doesn’t understand that flashing colors could cause seizures, I have to make it a Daily Sucker. Oh. The word “irresponsible” in the phrase “irresponsible dickhead” is an unnecessary modifier.

What in the hell was s/he thinking? Hopefully, outing them might cause the page to be changed.

Yale School of Art (WARNING. Could cause seizures)

Vincent Flanders’ comments: Vook “blends a well-written book, high-quality video and the power of the Internet into a single, complete story.” I like to think of it as a multimedia book. Vooks come in web-based and mobile-based (like for my iPad) versions. Unfortunately, you can’t buy one book and read it on two different platforms. You have to buy two different books. Duh.

What caught my interest was a blurb I read while on my iPad about a new “Vook” titled, Reckless Road: Guns N’ Roses And The Making Of Appetite For Destruction. The link took me to the iTunes store and here’s a screen shot from my iPad.

I decided to click the “Developer Web Site” button and was taken to Vook’s web page about the Guns and Roses vook. Notice where the arrows I inserted are pointing. I click the “View Trailer” button and here’s what I get. A message telling me that I need to upgrade my Flash player. Uh…where have you guys been? Don’t you know Steve Jobs won’t let Flash on the iPad? You folks need to detect the User Agent String and make sure the iPad gets an HTML 5 video. Since you were too lazy/stupid to figure this out, you probably won’t figure out the User Agent String, so I’ll just give it to you:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

Restless Road – Vook

Vincent Flanders’ comments: I finally succumbed to the Borg. I bought an iPad. My initial reaction can be summed up in 3 words — “iPod Touch Plus.”

I used my PC to go out and look for iPad apps at iTunes (that statement should tell you something about the iPad). I found an interesting app called “reader” by dBelement. I was stunned to discover the home page is hard to read. Uh. IT’S HARD TO READ THE HOME PAGE OF A SITE PROMOTING A BOOK READER???????

That’s what AccessColor reported. Here’s a screen shot of the report. Over 93% of the text fails the W3C guidelines.

In case they change the home page, here’s a screen capture. My watermarks are so much brighter than the text that it’s difficult to find the text on the home page. I think there’s a point here.

The good news is the dBelement page looks great on the iPad because they created a special mobile version.

dBelement

Submitter’s comments: Unfortunately, I’m registered for this conference and have had to visit this sucky page several times.

It’s a nightmare.

Vincent Flanders’ comments: When you’re “The World’s Only Conference for Voice Actors,” I guess you feel that you don’t have to try. What isn’t wrong with this site? I mean, how hard is it to find a decent looking conference web site to inspire you. I mean, I spent all of 30 seconds coming up with this nice looking example.

Gee. What’s missing from the Velocity conference home page? Multiple text sizes and colors, beveled text graphics, animated GIFs, ugly, metal-colored menus, tacky graphics, etc.

The most important item missing from the Velocity conference home page is the message that appears on Voice 2010 – “Please allow a few seconds for pages to load after clicking on the menu buttons or links.” If you have to explain why your site sucks on the home page, then your site really, really, really sucks.

Voice 2010

My Dreamweaver CS5 trial software only worked for 3 days instead of 30. Thanks for wasting my time.

Submitter’s comments: You can actually figure out what the first site (Rod C. Davis) is about, but it does seem to be part of the over-the-top design cabal. However, I don’t think the designer is yet up to speed on the full charter for the group. Naturally, pages share no common navigation or color scheme.

But wait, there’s more! You also get a link to The Jerry Pippin Show. This one actually has a sort of consistent color and navigation scheme, so they must not be in the secret design cabal.

Vincent Flanders’ comments: For those of you who are new to the Daily Sucker, you need to know that in the past I’ve lumped certain types of web sites into a category I call Over-The-Top Web Sites.

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

There’s a certain similarity in the design techniques used. If you haven’t taken your meds recently, they’ll look “normal,” but to everyone else, they…well…they look like Burlington UFO and Paranormal Research and Education Center, or Accept Jesus, Forever Forgiven! (Warning! Could cause seizures), or Surviving Niburu, or Jesus Christ is the ONLY way, or ABBC Breeders.

There’s a certain “style” to these sites. Pippin’s site is on the high end of the suck spectrum and just looks amateurish. The Rod C. Davis site is a definite addition to the Over-The-Top web sites list. Interestingly, the background music surprised me. It’s classical music. I was expecting to hear Golden Earing’s Twilight Zone.

Rod C. Davis

The Jerry Pippin Show

Submitter’s comments: This is unusually bad.

Vincent Flanders’ comments: Actually, the unusually bad is what’s usually here at WPTS <grin>.

The home page commits Mistake #2 from Biggest Mistakes in Web Design 1995-2015 – A man from Mars can’t figure out what your web site is about in less than four seconds.

When I first went to the home page and started reading the text, I couldn’t tell if I was at the web site for a funeral home (“…when the need arises for the type of services we offer, Cottage to Kastle is there TO HELP YOU!”), a hospice, or a something very strange (the link at the top that reads “Up-Coming Sales). Up-Coming sales?

If you want to see syrupy crap (“Vincent! Thanks! The image is burned in my brain!”), read the text.

As far as performance goes, the home page for Cottage to Kastle scored 67 (D) on Yslow and scored an 73 on Page Speed. Page Speed discovered that the site was resizing the images using HTML:

• http://www.cottagetokastle.com/000802_c656_0002_cslpp.jpg is resized in HTML or CSS from 738×485 to 185×122. Serving a scaled image could save 166.3KiB (93% reduction).
• http://www.cottagetokastle.com/000802_c129_0096_cslpp.jpg is resized in HTML or CSS from 600×396 to 188×124. Serving a scaled image could save 33.8KiB (90% reduction).
• http://www.cottagetokastle.com/files/QuickSiteImages/Cottage_to_Kastle_Logo.jpg is resized in HTML or CSS from 640×720 to 107×120. Serving a scaled image could save 29.9KiB (97% reduction).
• http://www.cottagetokastle.com/files/QuickSiteImages/Inn.jpg is resized in HTML or CSS from 311×276 to 279×247. Serving a scaled image could save 19.2KiB (19% reduction).
• http://www.homestead.com/~media/elements/LayoutClipart/TopImages/Victorian_Cupid.gif is resized in HTML or CSS from 154×214 to 151×216. Serving a scaled image could save 306B (1% reduction).
• http://www.homestead.com/~site/Scripts_Shapes/shapes.dll?CMD=GetCornerGif&w=3&h=3&r2=187&g2=164&b2=2… is resized in HTML or CSS from 10×10 to 3×3. Serving a scaled image could save 47B (92% reduction).
• http://www.homestead.com/~site/Scripts_Shapes/shapes.dll?CMD=GetCornerGif&w=3&h=3&r=187&g=164&b=204&… is resized in HTML or CSS from 10×10 to 3×3. Serving a scaled image could save 47B (92% reduction).

You have to love the file names — they’re definitely not SEO friendly. Oh, the TITLE tag is “Home” and that certainly isn’t search engine friendly.

A couple of other charming pages are the Upcoming Sales (which eats up lots of bandwidth) and the Testimonials pages. The Testimonials page is confusing because the page is called attractions.html — What?

Cottaqe to Kastle

Submitter’s comments: Oyy.  This is what happens when you use Frontpage to create a site in 2004 and then forget it exists…

Vincent Flanders’ comments: You know, that’s a really good explanation and I suspect you’re right.

On a positive note: Flowbee scored 78 (C) on Yslow and scored an 88 on Page Speed.

Flowbee

Vincent Flanders’ comments: For some reason, I decided to look at the White House’s home page. The top part of the page looks fine but, as I went down the page, the old bugaboo about contrast popped up. It’s especially problematic because the White House has a link at the bottom of the page that discusses accessibility . Ironically, the link is hard to read because of the lack of contrast.

I ran the page through AccessColor and was told:

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

Either color difference or color brightness does not meet the recommended standard for 20.77% of the total the text.

Text on background with images is for 47.93% of the total text. (Which makes it impossible for them to figure out the contrast levels.)

Here’s a screen capture of the results for those who don’t want to rerun the test.

As far as how well the site performs, I ran the home page through Zoompf and here were the results:

Here’s a screenshot of Zoompf’s analysis.

On a more positive note: Whitehouse.gov scored 72 (C) on Yslow and scored an 81 on Page Speed.

Whitehouse.gov

Submitter’s comments: I was doing research on various different light-bars and found these gems of utter design failure.

The Nu-Tronics site struck me as early nineties gone wrong (granted, I can’t remember much about the early nineties that was right), with its abundance of animated GIFs and the lack of decent structure.

The Pickup Specialties site has a slightly better start with the organization but, again the lack of structure (among other issues) gives it a strange, rather deformed appearance (particularly when scrolling to the bottom of the page).

Vincent Flanders’ comments: Nu-Tronics is especially interesting. It starts with a TITLE tag of “index,” which is so helpful in getting your site found by search engines.

There are a lot of text mistakes on the Nu-tronics site. How many of the following 15 did they make on the home page?

1. Small text, which is difficult to read and comprehend.
2. LARGE text, which is difficult to read and comprehend.
3. LOTS OF WORDS IN ALL-CAPS.
4. Scrolling, blinking, fading, or moving text.
5. Too much / too little text on a page.
6. Multiple text styles (centered, flush-left, flush right) on the same page
7. Underlined text. (Only links should be underlined.)
8. Centered text (some headlines can be centered)
9. Justified text.
10. Sideways text or links.
11. Uncommon fonts.
12. <FONT> tag.
13. Inappropriate font faces — like Comic Sans on a senior citizen site.
14. Multiple text sizes on a page. There should be two sizes — one for headlines and one for text.
15. Multiple text colors on a page..

The subpages remind me of a very page bad acid trip (It’s been 40 years this month since I ingested any substances that weren’t food). Each page seems to have a different mind-numbing color scheme.

On a positive note: Nu-Tronics only took 725ms to load, scored an 87 on Page Speed and scored 91 (A) on Yslow.

Pickup Specialties is just plain bad. The tiny blue links on a red background on the left-hand menu are horrifyingly ugly. The site is much more consistent than Nu-Tronics, but it’s a boringly ugly consistency. The top link menu is amateurish. Still, their home page scored 89 on Page Speed and scored 91 (A) on Yslow.

Nu-Tronics
Pickup Specialties

Submitter’s comments: Got one for you. My eyes have just about bled out.

Vincent Flanders’ comments: At least the ugly red text on blue background is large enough to read (in IE7), but the repeating background image is a bit much. Even if it didn’t repeat, it would still be a poor choice, as is the large logo in the middle.

Another company whose products look totally professional with a website that isn’t.

Innovative Custom Exhibits

Submitter’s comments: None.

Vincent Flanders’ comments: For reasons known but to God, I ended up on this site. I thought there was an ironic contrast problem, but AccessColor said everything was fine so I looked at the source code. As you’ve figured out, it was a mess. Next, I ran the page through Yslow and it looks like I’ve found the most convoluted web page in the world.

There are 66 Javascripts and 11 stylesheets!

This is unfreakingbelievable! Oh, there are 25 IFrames, too. Jeez Louise!

Eye Tracking Update