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

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

Vincent Flanders’ comments: What in the name of God is wrong with the Wall Street Journal (WSJ)? I’m on my iPad reading a Facebook post by Jason Isbell where he mentions that the WSJ has his new video Super 8 Motel. Cool. I click the link and scroll down. There’s no freaking video. Why? Because the WSJ is using Flash, which Steve Jobs killed off. You can’t view Flash on iPhones or iPads. EVERYBODY but the WSJ knows this. You can search Google to find a billion (slight exaggeration) articles on how to serve both Flash and Apple video formats.

This is the type of error that could be quickly fixed, so check soon.

I can’t believe how effing stupid the folks are at The WSJ.

Wall Street Journal