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

Submitter’s comments: Not a spinning Earth, just a spinning moon with a rising sun.

A reminder of how that term “Flashturbation” got its start. At least they knew they needed to enable us to skip that nonsense.

Vincent Flanders’ comments: Well, actually they have a Skip Intro button, but it’s at the bottom of my laptop screen and doesn’t show up. There are a lot of serious mistakes made here that were documented in Biggest Mistakes in Web Design 1995-2015.

1. Believing people care about you and your website. Some of the worst writing on the web is on this website.

Breakout Results, LLC is a highly qualified, proven, game-changing leadership team with an unrelenting passion for leading its client companies to a brighter future with higher standards of excellence, robust top-line growth–and superior bottom line performance.

This is crappy, cliche-filled writing and everybody except the authors of this site know it. Visitors to your site want their problems solved. This text is made for the company–not its customers. People don’t give a left-handed flying farkle about you, your business, or your mother. They want their problems solved now.

This mission statement crap can be summarized as, “All babies must eat.”

2. A man from Mars can’t figure out what your website is about in less than four seconds. I read a lot of the first page. I don’t have a clue what these people do and how they can solve my problems.

4. Using design elements that get in the way the sale. Flash fits the bill.

9. Site lacks Heroin Content. There is nothing on this website that will make me want to come a second time.

13. Misusing Flash. You should read the article, but the bottom line is there’s nothing here that couldn’t be done better with HTML and CSS.

Breakout Results

Vincent Flanders’ comments: My personal experience with one of the RightNow services was extremely positive. They offer clients a chat feature where you can ask questions and I needed to get a form from a medical company faxed to me. The system worked like a champ. Out of curiosity, I went to RightNow’s home page and an insanely glaring error was right there on the front page…

…the text on the bottom third of the page couldn’t be read because IT WAS TOO SMALL. My first reaction was, “When they signed off on this project, did anybody look at the home page? Didn’t they see they couldn’t see and read the text?

There are times when it’s acceptable to use small text and there are times when a lack of contrast is acceptable—on the botttom of the page where you have legal statements like on the Wachovia bank site. The WebPagesThatSuck legal and privacy statement also uses little contrast and small text, which you can see when you look at the original version.

I keep screaming about the idiots who make the text hard/impossible to read because of the lack of contrast. At least they can make the bogus claim, “It’s artistic.” Small text is small text and artistic expression doesn’t apply.

RightNow

Submitter’s comments: One look at this website says it all.

Vincent Flanders’ comments: One look at this website says “1996.” The music may be inspirational to some, but the website isn’t. I’m pretty amused by one element—the site is full of big clicks.

KMTL 760 AM

While I love my friends, I hate how @#$!ing stupid they can be. Two of them wanted my input on their website and I had given them—I don’t know—20 or 30 different tips—which overwhelmed them. One of them then asked me to give them just one tip to help their website rank higher in Google’s search results (yeah). I refrained from saying “Nuke your site” and said, “Have your designer rename your image files to something logical and make your ALT attributes descriptive. Why? They were using Adobe GoLive (which is now Adobe GoneDead) and it messes up image tags.

Take a look at the recent wonderful 1:44 a.m. photo of me showing off one of the few T-shirts my wife thinks is funny.

Below is the code Adobe GoLive would have “produced.” I modeled the code after code found on their website.( I didn’t want to use one of their examples because I don’t want to embarrass them.)

<img src=”http://cdn-webpagesthatsuck.com/Images/WPTS_vf_12.jpg” height=”389″ width=”300″ alt=”” name=”WPTS_vf_12″ border=”0″>

WTF?

Here are the problems:

1. If you’re going to use a subdirectory for images, call it “images” not “Images” (minor issue).
2. The name= attribute is replaced in HTML5 (very minor issue, these guys are so far from HTML5—wait, so are most of us).
3. The border=”0″ attribute is not necessary (OK, should not be necessary and this is a minor issue).
4. The alt= attribute is blank. For many images, this is OK. For an image like the one above, no. If you look at #5 below, I just know that if the program filled in the attribute it would put something unintelligible. In fact, on many of their images the code reads [alt name=”WPTS_vf_12″] As we all know, the alt attribute may help Google when it indexes your site—there’s a lot of discussion on the web about this. The alt= attribute could be something like alt=”Vincent Flanders is a very funny guy” or anything that would be meaningful to your visitors and Google. (Major issue).
5. BIGGEST MISTAKE: GoLive (and there are other programs like it) automatically creates file names for images that are meaningless. In this case, the above picture is called WPTS_vf_12. That’s not going to help Google index your site. It needs to be called something like Vincent-Flanders-self-portrait or, more accurately, Vincent-Flanders-defies-the-laws-of-physics-or-he-rotated-the-image-so-you-could-read-the-text.

It’s been months and they haven’t changed it (or anything else as far as I can tell). Maybe now that this issue was mentioned in my interview in Chicago Business my friends might take it a little more seriously.

Submitter’s comments: Although my background is more in graphic arts than UI design, I’m a big fan of your work.

My most recent encounter with crazy web layout/navigation comes courtesy of my health insurance plan.

After about my fourth login, I finally realized that the main navigation structure is composed of three columns (colors: puke green, blue, red) on the right side. The real beauty of this design is that the navigation columns leap from the right side of the screen to the left when clicked. And then they leap back when another column is clicked. I’ve never seen anything like this before. All the sliding columns are causing eye/mouse strain!

I believe this is one of the biggest health insurance companies in the country. How can the navigation of its web site be so convoluted?! Thanks again for promoting good web design. Your site has helped me a lot.

Vincent Flanders’ comments: Anthem Health is making me very sick. In addition to the bronchitis I’ve had for the last month, this site’s navigation is making me puke my guts out. If Christopher Columbus used navigation this bad, we’d still be living in Europe. This company isn’t like yesterday’s sucker, Unexplained Research, this is a big, supposedly serious company.

This site typifies a new plague on web design which I’m calling, for the moment, jQrap. jQrap is the crappy misuse of the jQuery Javascript library’s effects just for the sake of using the effects. Just like Flash gets misused by Flashturbators, jQuery is starting to be misused by clowns like me who aren’t programmers. Oh, yeah, there are a lot ob bad programmers writing a lot of jQrappy plugins.

There are also a whole host of contrast issues, but they pale to the navigation.

Initially, I’m calling this phenomenon “jQrap.” I might change it to jQueryCrap or jCrap or whatever great name you come up with in the comments or email.

Anthem Health