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

Vincent Flanders’ comments: There has been a lot of positive press around the Internet Archive’s Wayback Machine’s (IAWM) grabbing of its 4 billionth web page. Well, it should be negative press. The Wayback Machine does a crappy job of grabbing pages. It’s a freaking joke. I know you don’t believe it, but I’m restraining my condemnation of this sh*t-hole website.

Here’s The New Jersey State Policemen’s Benevolent Association’s home page back in May 2012 per the Wayback Machine. What a sucky job. There are graphics that didn’t get captured. Oh. Here’s the Wayback Machine’s first capture of the website from June 1, 1997. Sucks. IAWM claims the problem is with the site’s using robots.txt file to exclude graphics. I don’t know if this is true. If it is, then why are you grabbing the pages? They’re worthless without images.

Actually, I hate to hesitate to call these people liars, but I went to a recent Daily Sucker (MGBD Parts and Services) and looked for their robots.txt file and didn’t find one. It could be hidden (and it’s also a WordPress-based site) so maybe they’re telling the truth. However, Google doesn’t like graphics and text to be hidden by robots.txt and I can’t imagine any website would hide pictures on purpose (I can’t see anybody hotlinking because they want the images on their website). If you go to the IAWM 2014 MGBD capture page, you’ll see some pictures came through and others didn’t.

I don’t know what is causing the problems, but whatever is going really makes the site useless.

Here’s a helpful hint. If you don’t want your site archived by IAWM, there’s a page that explains what to do.

Internet Archive’s Wayback Machine

Submitter’s comments: I was checking out KickStarter when I ran across this gem.

Vincent Flanders’ comments: Ah. If you wanted to create a website that looks like what (almost) everyone says a website should look like in 2014, this site is it. The reason it’s here is because they make a mistake that’s wayyyyy to frequent: the didn’t check their site on an iPad (or You-Name-It device). If you don’t have a mobile device, here’s what Vessyl looks like. I’m sure it’s a simple CSS mistake—a text box was floated instead of sunk—and it may even be patched by the time you take a look. BTW, the problem doesn’t exist on an iPhone.

Vessyl

Submitter’s comments: I just stumbled on http://www.laeuft.de.  Nice site, if it was a printed leaflet for a fashion label. Unfortunately, on the first glance it looks to be in Flash (which it isn’t, the truth is much more scary than that), and what looks first like Mystery Meat Navigation turns out not to be a usable navigation system at all. No, you do not get to the next page, as there are no real pages, just this images animation, and navigating with these “things”, you only see a part of the site, because some “content” is in between those stopping points.

Fortunately, they tell you on the first “page” how to see their entire site: You should just scroll down to see more and to get the images go forward. This could be a challenge when using a notebook or an mouse without a scroll wheel, for keyboard scrolling seems to be disabled, and there are neither scrollbars or other  navigational elements. So I really had to plug in a scrollwheel mouse to get through. This nearly beats random mystery meat navigation, don’t you think?

When taking a look into the code, I was a little shocked to see this is not Flash, not a single bit of it. All these breathtaking animations really are made by plain HTML and  jQuery image sliders. And the main reason why there is no working navigation is: there are no different pages. It is just one single page, with JavaScript, CSS and  jQuery singling out what content you actually see. Which is technically kind of brilliant if you have search engines in mind (everything here is clearly indexable. Maybe that could even compensate the complete lack of relevant metadata like description or keywords). They really are using the latest cutting edge web technology.

Vincent Flanders’ comments: I agree. It’s pretty impressive. It’s a bit easier to use on a mobile device. You just swipe left or right. I can’t seem to find any internal links on the mobile or desktop. Is this a brochure?

Laeuft

Submitter’s comments: For a site belonging to actual exorcists, the demons need to be driven out from their design!

1. Gratuitous usage of Flash.

2. Sound effects.

3. Bad layout, colors, and fonts.

4. Objects moving for no reason.

5. The “Demonic Investigation Kit” does not include your book!

Vincent Flanders’ comments: What’s really, really amusing is the mobile version of the website is, at least, usable. You can see a representation of the mobile website here. I would like to know the algorithm Wix used to turn the home page into the mobile version. It left out a lot of “content.” And by content I mean wildly colored text.

Order of Exorcists

Submitter’s comments: I was watching the Colbert Report tonight and he had a segment on a two-time loser GOP candidate in Arizona who changed his name from Scott Fistler to Cesar Chavez. Oh. He also changed his party affiliation to Democrat in a heavily Hispanic district. Colbert made fun of him for the usual reasons, one of which was the wannabe Congressman had pictures on his website of all these pro-Chavez marchers carrying signs saying things like “Viva Chavez,” which implies some kind of endorsement for Fistler-Chavez. Turns out the signs weren’t for him—or the real Cesar Chavez—but HUGO Chavez, the late socialist president of Venezuela.

You’ve said you hate all politicians, but this is just too much.

Vincent Flanders’ comments: Too much for a politician? Hmm. That will be the day. For my foreign readers who may not be aware of the real Cesar Chavez, here’s a Wikipedia link.

Because he was found out, the Fistler-Chavez home page has changed. Luckily, The Arizona Capital Times website has a background story, a screen shot of the old Fistler-Chavez home page in question and a video I couldn’t get YouTube to load.

A website is supposed to be truthful. If it isn’t…well, you know the answer to that. This site wasn’t truthful. It isn’t even informative. His Google+ “About” page doesn’t really say anything. To say there’s too much white space is an understatement (something I’m not known for) and he’s got a damn globe for the background image.

Mr. Fistler-Chavez wants to have it both ways, but we have a saying here in America, “You can’t have your cake and eat it (too).” Or should I say, “Usted no puede tener su pastel y comérselo también” (according to Google Translate <grin>).

Here’s the newspaper’s screenshot of the old site

Here’s the current site for Cesar Chavez for Congress 2014