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

Submitter’s comments: None. I was reading an article about beautiful and inspirational websites. In these lists you can often find several sites that I like to call “Crap on China.” They’re beautiful, but have crappy usability.

Vincent Flanders’ comments: I don’t know what it is about certain websites. They look nice, but they’re crap. They often make a big deal of following web standards which, according to Wikipedia is defined as:

“When a web site or web page is described as complying with web standards, it usually means that the site or page has valid HTML, CSS and JavaScript. The HTML should also meet accessibility and semantic guidelines.”

I’m not a total stickler for web standards. The are reasons why invalid HTML isn’t the end of the world (target=”_blank” in XHTML and even HTML5 is one that comes to mind). The same holds true for CSS and JavaScript. On the other hand, I have one simple, elementary web standard that must be followed:

I NEED TO BE ABLE TO READ WHAT’S ON THE F**KING PAGE.

Or to put it in web standards terminology, “The W3C recommends a standard of 500 or greater for the color difference and a standard of 125 or greater for color brightness.” These recommendations are in the Web Content Accessibility Guidelines 1.0.

I ran adlucent’s home page through AccessKeys’ AccessColor tool and it generated the following:

Based on these considerations, the results for this page are:

1. Both color difference and color brightness do not meet the recommended standard for 13.94% of the total text.
2. Either color difference or color brightness does not meet the recommended standard for 85.22% of the total the text.

Text on background with images is for 0.68% of the total text.

Here’s a screen shot just in case they fix the page.

adlucent

If you’ve been to WPTS and read the articles, you’ll know that lack of contrast between the text and the background color upsets me for one simple reason:

I NEED TO BE ABLE TO READ WHAT’S ON THE F**KING PAGE.

You would think any designer whose IQ is higher than an ice cube understands this concept. Nope. Today’s Daily Sucker, adlucent, is unclear on the concept.

On the other hand, there are actually times when it’s permissible—even mandatory—for text to be unreadable. Scroll down and take a look at the footer of Wachovia Bank’s home page. The text color is #8B8B8B on a background of #FFFFFF, which fails the Web Content Accessibility Guidelines 1.0. This is just one line of text from their footer that’s hard to read.

Important new FDIC insurance rules in effect from December 31, 2010 through
December 31, 2012. Learn More

Why would they want their customers to read and understand the new rules?

My current privacy page fails big time. My original privacy page is very readable.

Privacy pages, footers and important information that’s considered “the fine print” can be made hard to read. If you don’t want people reading your text, make the text small and lower the contrast.

Submitter’s comments: (I lost the original email. Fortunately, I had scribbled the URL. Many thanks to the person who suggested the site.)

Vincent Flanders’ comments: When I was six years old, somebody knocked a huge pile of baseball cards out of this kid’s hands and everybody jumped down and tried to grab them. While I was grabbing at them, somebody kicked me right where “the sun don’t shine.” I immediately jumped up in agonizing pain—the kind of pain Marcellus Wallace felt in Pulp Fiction. I hadn’t felt this kind of pain until I went to today’s site.

I can almost guarantee this site will end being recognized as the Worst Website of 2010. Hell, it could easily end up the worst website of 2011.

What’s fascinating is that somebody looked at the home page (and the subpages) and said, “Yep. That’s exactly what I want.”

Catch Me If You Can(?)

Submitter’s comments: These people are designed the office layout (not that you can tell what they do from their home page) for a company where a couple of my good friends work.

If they design offices like they design websites, we wouldn’t know where anything was – we would have to wander aimlessly around until we found what we were looking for. Can you have Mystery Meat Navigation in the real world?

Maybe all the plus symbols on the lower level pages are really crosses – to mark the death of the spirit of web designers everywhere?

Vincent Flanders’ comments: It’s the Christmas season so I’d like to say, “If Jesus’ website looked like this, Christianity would be a fart in the wind of history.”

Obviously, the site belongs in my article Architecture — An Industry With Sucky Websites. My lead-off paragraph states:

I don’t know what the deal is with architects. For an industry that depends on accuracy and stability, they seem wildly inaccurate and unstable. They love, love, love, love Mystery Meat Navigation, which doesn’t make sense because they wouldn’t use this technique on their buildings. When it comes to their web sites, architects seem to be one floor short of a complete building.

The Mystery Mean Navigation on subpages like Landscape Design are just morally wrong. Move your mouse around the top of the page to see what I mean.

As my friend Dizzy would say, “Man, they smokin’ crazy sh*t.”

Speaking of crazy things, it’s pretty crazy that somebody in charge doesn’t understand DNS. If you leave off the “www.” and just type http://hboemtb.com/, you can’t get to the site—which may not be a bad thing.

HMB+EMTB

These turds of web design were selected from sites appearing on The Daily Sucker from September 2010 to December 15, 2010.

The fact I could easily find another 12 sites that suck enough to be considered along with the sites in The Worst Websites of 2010 doesn’t bode well for the future of web design. Gee. I can’t wait for sites to start using HTML5 and CSS3.

Submitter’s comments: I went to this site to find out how the roads are before going to work this morning. What I found was more of a disaster than the storm! I want to go down there and tell them to pick a font, pick a color, pick a size, do something!

Vincent Flanders’ comments: Personally, I’d like them to pick a focal point. Yes, a Man From Mars can figure out what the site is about, he may not be able to figure out what’s most important. We need a little triage here.

Speaking of text mistakes, here’s a list of text mistakes from Biggest Mistakes in Web Design 1995-2015 — “Forgetting the purpose of text.” Which mistakes did this page make?

Our site mixes and matches text sizes on the page. (Same video as above.)

Our site mixes text colors on the page. (Also see the video above.)

Small text, which is difficult to read and comprehend.

LARGE text, which is difficult to read and comprehend.

LOTS OF TEXT IN ALL-CAPS.

Scrolling, blinking, fading, or moving text.

Too much / too little text on a page. (This takes FOREVER to load.)

Multiple text styles (centered, flush-left, flush right) on the same page

Underlined text. (Only links should be underlined.)

Centered text (some headlines can be centered.)

Justified text.

Sideways text or links.

Text requires people to have special (unusual) fonts on their computers to correctly view the text.

<FONT> tag.

Inappropriate font faces — like Comic Sans on a senior citizen site.

Multiple text sizes on a page. There should be two sizes — one for headlines and one for text.

Multiple text colors on a page.

Large quantities of bold text instead of limiting bold to important text.

Large quantities of italicized text instead of limiting italics to important text.

If I missed any possible mistakes, let me know and I’ll add them to my list.

City of Frankfort Office of Emergency Management and Homeland Security

The article How Fast is Fast Enough to Keep Customers’ Attention Online? says pages should load in 2 seconds. I agree wholeheartedly. The problem is the article takes 7.58 seconds to load. Unclear on the concept.

Most of the bloat is caused by web widgets. When it comes to web page speed, widgets are the black hole of f**king death. Especially comment systems.

Submitter’s comments: Long time listener, first time caller. Had to submit SoulWax 2007. Ack. my spleen hurts. I found this via The Horizontal Way, which may be an award-winning gateway for worse offenders.

Vincent Flanders’ comments: First, NSFW because it’s a music site, so take note. Second, it demonstrates the worst type of ego masturbation—trying to be cool when you aren’t. You’re just a band and you’re not that talented. These jerkoffs need to read Bands and Artists Websites – Showcase and Best Practices and find out what real bands are doing with their websites. Even U2, who had one of the most pretentious and stupid Flash sites a few years back, now has a real web site.

Soulwax’s home page is even worse (TOTALLY NSFW). It takes forever to load and it just loops and loops and not even the moderately attractive girls shaking their T&A make me want to wait until the next clip is available.

The Horizontal Way is to definitely to blame. Oh. And as far as awards go, Death to Design Awards is spot on as is this Open Letter. The only web awards worth winning are located here, here and here. Grab your own award just like the one on the left.

Soulwax 2007

If you’re into making your site load faster and are technically inclined, Performance Calendar has so much Heroin Content I feel dopey when I read it. Like most people, I dream of being this smart. Oh, Google wants you to speed up your websites.

Submitter’s comments: This is an AP Economics and general economics theory reference site. It’s required reading for my Economics class and every day I find myself questioning the quality of the material.

Notes:

• “Untitled Document”
• Odd JPG slideshow on the front page.
• They have to have a color key on the left of the microeconomics and macroeconomics pages.
• Strange little Flash video on the front page.
• I’m pretty sure that the “Economics University” bit on the front page is a screenshot of some Microsoft Word art.

I’m sure you’ll find a lot more to hate.

Vincent Flanders’ comments: There are plenty of royalty free image stock sites out there. There are even inexpensive sites like iStockPhoto that will provide you with higher quality graphics than the ones on this site. Seriously, the graphics and clipart on this site are stereotypically bad.

The pictures don’t make sense. Why are we seeing these men? Who are they? Why do we care? We don’t care. One of the problems with using graphics is people assume they’re clickable. You have to think to find the links. As Steve Krug says, “Don’t Make Me Think.”

The colored navigation is oxymoronic—or maybe it’s just moronic. A note to the left says “Yellow-boxed links indicate interactive lessons.” The problem is, every yellow-boxed link says “Interactive.” At the least, it’s redundant. Same story for the purple links.

Another problem is the centered, red headings are underscored. This makes them look like links. Never underscore text.

REFFONOMICS.com

Submitter’s comments: One of the largest newspapers in Norway. Man, this sucks so bad. It’s amazing that a newspaper can look like this in 2010 and beyond.

Vincent Flanders’ comments: Ah, newspapers. I don’t think there’s anything more difficult to design—as VG Nett has discovered. What I like about the site is that I can read the text. In fact, I think I can read the headlines from across the room.

Newspapers need all the ads they can get and this site seems to have plenty of them. Also, the page goes on and on. Since I can’t read Norwegian because I’m an American and I’m lucky to be able to speak English, I can’t tell if their menus are as effective as those of my paper, The Seattle Times. The Times also has a long, long home page but it’s elegant. The VG Nett is garish and looks like a tabloid newspaper—which it could be because I’m an American and only speak English.

If you scroll down the page toward the bottom, you can see Dilbert in Norwegian. What a trip.

VG Nett

Submitter’s comments: It’s a crappy looking pizzeria website. Thought this might be worthy (or unworthy?).

Vincent Flanders’ comments: I’m willing to bet a lot of money that these folks make really good pizza. If you’re in San Francisco, you have to be good to survive. If you look at their website…well, nobody would stay on it long enough to find out if their pizza was any good.

I gave up waiting for the whole site to load after 75.78 seconds (I used the Charles Proxy to time it) and 16.46Mb of videos, images, and the kitchen sink, which are all crammed into one page. For a business that deals with menus, you’d think they’d understand the concept and put a navigational menu on their home page.

I love the note, “Please refresh your browser if slideshow fails to load.” Obviously, they know there’s a problem, but they think that people want to reload their browser just to see a slide show. Sorry. The only slideshow people will go through that kind of effort features naked and/or dead bodies.

On the plus side, it’s easy to find their phone number <grin>. Well, it isn’t easy if you have an iPad—you can’t read the number.

It’s important to look professional.

Pizzeria San Francisco

Every musician (and web designer) should learn web marketing from the Drive By Truckers’ current site. Brilliant. Great site.

Submitter’s comments: I’m trying to learn how to make music, and I have recently been looking for good communities to get involved in to get feedback and better develop my skills. So, naturally, I go to Google. This was one of the first results.

Vincent Flanders’ comments: What’s the difference between Adobe Flash and my mother? Flash is dead, but it just doesn’t know it. I’m proud to have been among the first to shoot Flash—long before the Web Standardistas started piling on—but it took Steve Jobs to nuke it. The Flash menus here need to go. Get some contrast in the menus, get rid of your fixed-width layout. And get rid of that Flash carousel in the middle.

On the other hand, typing in [music community] into Google brings up today’s sucker as result #1. On the other, other hand, if anyone clicked on the magnifying glass and used Google Preview to look at the home page, they would never click to go to the site.

Music Learning Community

Vincent Flanders’ comments: I click on this Twitter link that sounds interesting. It’s about protecting your iPhone’s information and since I’m thinking of getting one, I go to the site. The site’s well done and it doesn’t bother me that I have to scroll down the page for what seems like forever because it’s telling a clever story.

The problem is quite simple. THE FREAKING PRODUCT ISN’T OUT YET!!! YOU’RE WASTING MY TIME!

This isn’t high school. Don’t product-tease me. I really don’t like it. I’m willing to bet that this site gets a lot of positive press because of its cleverness. I love clever—but only when there’s a punch line. There’s no reward here.

Added this before posting: There’s a button on the site that says it’s been “Liked” 6K times and bit.ly says it’s shortened the URL 22,538 times. Well, we know there are at least 6,000 usability idiots out there.

Ben the Bodyguard

Submitter’s comments: I’ve been a long time follower of your website, which I just LOVE, but this is the first time I’ve found something that I think might be sucky enough for someone who concentrates on sucky websites. So here it is.

Vincent Flanders’ comments: You’re so lucky that New Town Primary School is your first. Like most first times, it will seem better in retrospect. Since my first book was translated into Japanese, I think I’d like to see how a famous Japanese blind anma and bakuto who is skilled in iaido would handle New Town.

New Town Primary School is today’s Daily Sucker. The question is, What Would Zatoichi—The Blind Swordsman—Do About Bad Web Design? Especially, New Town’s.