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

Submitter’s comments: Here’s a great example of a low-contrast page.

Vincent Flanders’ comments: So true. The contrast on some of the sub-pages is so bad (“The Shop” is an example), you can’t believe anyone looked at the pages. I thought that the site was designed for one particular browser. If so, it’s not Chrome, Firefox, Safari, or Internet Explorer.

I thought the “Colors” page has no navigation back to the home page, but it does. Unfortunately, the navigation is a hard-to-read button. Oh, yeah. We have beveled graphics used as text for the logo. This died in 1996. Speaking of dead, Adobe Flash is used in different parts of the site.

Spectrum Powderworks

Submitter’s comments: This is the website of a Ceramics Workshop in Holland. It is JavaScript, with bizarre links and sub-menus that overlap the main links. It is Mystery Meat in the sense that “Here”, “Others”, “Now” and “Seek”, for instance, do not adequately explain the content within. Since there is a “Seek” box at the top, I don’t really see the need for a separate link.

The links also move, which doesn’t scream accessibility to me.

Vincent Flanders’ comments: The arrows on the illustration above show the menu items on the “job opportunities” page (located under “us”). If your window isn’t wide enough, the links disappear and you can’t access them. The sub-links are hard to read under normal conditions because they’re light blue.

Some of the JavaScript code is pretty wild and is based on Fortune’s algorithm. Yeah. Me too.

Did anybody look at this site before it went live?

Sunday Morning

Submitter’s comments: The web page has a sound file that required me to download a plugin, which I promptly ignored. Page is excessively long, font is multi-sized, multi-colored and even scrolls. There is so much text on this page I didn’t even bother reading most of it. Keep scrolling down to see several poorly Photoshopped images and a hit counter at the bottom of the page.

Vincent Flanders’ comments: A typical Over-the-top Website. I love the fact that the site disables the right-click functionality. Like anyone wants to steal any of the images. Of course, anyone with an IQ higher than an ice cube knows how to bypass the JavaScript protection. If your IQ is lower than an ice cube, you still probably figured out to go to Google and search for [how to bypass right click protection] (brackets not needed when searching). Google gave me 1.7 million suggestions.

There are few text issues as annoying as large quantities of centered text. This site annoys me. I’m also annoyed by the probably-unlicensed-hence-copyright-infringing use of the Twisted Sister classic song “We’re Not Gonna Take It.”

Also amusing are the pictures of “2 Anonymous Chicks” (how can they truly be anonymous when I can see their faces?) and the picture below the 2 anonymous chicks, which is just another proof of Godwin’s Law.

Disclaimer: Seems like I used Comcast in the early 2000′s. I don’t remember having issues with them, but their offerings weren’t as complex as they are today. Like everything, your mileage will vary.

Comcast Sucks

Submitter’s comments: Bruce Elkin has a pretty good website, but when I clicked a link entitled “blog” in the upper-right corner, it sent me to his blog which has an awesomely sucky design. In fact, it’s the ultimate in animated mystery meat that hides and obscures any good content Bruce might have posted!

And it gets worse! Click one of the graphic boxes on the page and, instead of taking you to a content page, it animates the content into a white page floating on top of the page of graphics. Sure, it’s readable and looks great, once it finally loads, but it’s slow, buggy, and annoying.

Bloggers and web designers have invested untold millions of hours in figuring out how to present blog content so people can tell what a blog is about the moment they land on the home page, figure out if they like it, and search and navigate even vast amounts of content.

This design throws all that out the window so it can look cool. Bruce, I am on your site to read your posts. Not to wrestle with some web designer’s graphic nightmares.

At least on the home page the black pop-up thingy is where it belongs, on the page instead of obscuring the scroll bar or trying to take over the universe.

Vincent Flanders’ comments: Back on March 11, I discussed a page on the British Film Industry’s website. My comments, only slightly modified, apply to today’s site:

Pinterest + Mystery Meat Navigation = Supremely Bad Web Design. The Pinterest website made #6 on my Worst Websites of 2012: They Should Know Better list. I know Pinterest is popular, but popularity doesn’t excuse bad web design. The article Why Pinterest-style infinite-scroll layouts are worthless for everyone except Pinterest explains the problems quite well. The bottom line? “The layout works for Pinterest purely because no one goes there looking for something particular, and because it’s not crucial to Pinterest’s success that the user see any one photo. ”

Unfortunately, visitors Create What Matters Most are looking for information. They need a semblance of navigation to aim them in the right direction. There’s no logic to the order and no way to know where they’ll end up unless they mouse over a picture.

Stop using jQuery and Masonry to create this crap.

Create What Matters Most

Submitter’s comments: It doesn’t make any difference if you can read German, the site will burn your eyes.

Vincent Flanders’ comments: Because I’m an American, I only speak one language. At least I can speak English. Google wants to translate the pages on this site, but I don’t think their translation is up to snuff. Have Google translate the “Inhalt” page to see what I mean.

At least I can see the text, which is more than I can say for many sites. Unfortunately, I see text with many different colors in what resembles a website from 1996-97.

There’s a phrase on the front page that I find interesting:

diese Seite “kann” süchtig machen…..

I’m not sure, but I think the English translation is “this site can suck much.” Yes, it does.

Smokeville.de

Submitter’s comments: I look at a LOT of restaurant websites for my area. They have improved over the years. Most of them eventually realized that Flash animation and splash pages don’t work for them. But then I found Pulcinella.

It makes me weep because this website was launched a couple of months ago, but still features Mystery Meat Navigation in the form of the chevrons at the edge of the screen. To find the map showing their location, you need to select “Explore” and then “Location” because “Map” would be too obvious.

But they like it that way. In the News tab (also under “Explore”), I found this statement: “Our new site exemplifies the modern nature of our establishment with simple, but powerful designs. Customers can explore our delicious menu, make a reservation and view news and details about Pulcinella’s upcoming events. We’re the same great restaurant, with a fresh new online experience. We hope you love it as much as we do.”

I am especially in love with the way that you can’t read the word “Menu” if you should happen to mouse over the left side chevron. It just says “Me”. Kind of sums it up.

I know that there are websites that suck worse, but really, a restaurant website isn’t that complicated. You’d think it would be easy to get it right.

Vincent Flanders’ comments: Personally, I hate the navigation. The last link I would ever click is “Explore” because I just know it’s going to be something silly. A page will load with a treasure map or something else equally stupid. Surprise. It brings out the menu bar that should be at the top of the page. Navigation is like listening to a joke. If you have to think about it to make it work, then it’s failed.

Pulcinella Restaurant

Submitter’s comments: Apparently, the Catholic Church has become heretical since Vatican II—UFOs, and . . . oh, what’s the use? Just pick a subject and they have something about how it has meant to ruin the Church. Not surprisingly, it is not run by the Congregation for the Doctrine of the Faith (more fondly remembered as the Inquisition). Here’s another for the OTT file, but they really need to try harder if they want to get in the top ten.

Vincent Flanders’ comments: Just when I thought it was safe to go back to church, this site comes along. On the other hand, it’s nice to see some small part of the Catholic Church has a loon website—I mean Over-the-top Website. Maybe it’s because I’m a lapsed, Jesuit-educated Catholic, but I don’t know WTF this site is talking about. Not a clue. That doesn’t really matter. What matters is the site’s design sucks.

The links on the home page go on and on. There’s no organization. My favorite page is “The Invalid New Mass,” which weighs in at over 7Mb because large images are scaled down by HTML rather than being physically scaled down (a 1389×938-pixel image [612K] is forced to fit in a 175×150 container). There are lots of other problems, but why bother? Crap is crap.

If the people who spent the time to build this “website” had focused their efforts on curing breast cancer, the Susan G. Komen foundation would be shuttered by now.

Holy Family Monastery

Submitter’s comments: <meta name=”GENERATOR” content=”Microsoft FrontPage 6.0″>

Do I have to say anything else?

Vincent Flanders’ comments: It would make my job easier if you said a little more<grin>.

Part of me wants to give it a pass because it’s for kids and kids like shiny things. On the other hand, I don’t want to encourage bad taste. After all, our school system rarely teaches art and certainly doesn’t teach aesthetics.

For some strange reason, the box at the top left side of the page is not a link to the home page (on the subpages).

Coolmath.com

Submitter’s comments: This one’s a doozy and it comes from the British Film Institute (BFI), of all people:

In an extraordinary take on Mystery Meat Navigation (MMN), the BFI has managed to create a unique variant that I have given the provisional taxonomy of “Everlasting Mystery Meat Navigation.” Not only must the user mouse over the images to find out what’s underneath (touchscreen devices need not apply), but the page scrolls forever redrawing the same set of images over and over again and frequently in different places on the screen.

The effect is both mesmerising and infuriating, in a ratio of approximately 30-70%. Whilst probably not the most egregious example of the oeuvre extant, I put it to you that the sui generis nature of this specimen is worthy of mention on the august pages of your site, lest other people are inspired by this to create their own version. The prospect of the proliferation of similar sites is too horrible to contemplate.

Vincent Flanders’ comments: Pinterest + Mystery Meat Navigation = Supremely Bad Web Design. The Pinterest website made #6 on my Worst Websites of 2012: They Should Know Better list. I know Pinterest is popular, but popularity doesn’t excuse bad web design. The article Why Pinterest-style infinite-scroll layouts are worthless for everyone except Pinterest explains the problems quite well. The bottom line? “The layout works for Pinterest purely because no one goes there looking for something particular, and because it’s not crucial to Pinterest’s success that the user see any one photo. ”

Unfortunately, visitors to this page are looking for information. While they want to explore film, they need a semblance of navigation to aim them in the right direction. There’s no logic to the order and no way to know where they’ll end up unless they mouse over a picture.

British Film Industry’s (BFI) Explore Film Page

Submitter’s comments: Please take a look at this site for an example of how not to market a restaurant. You have to go through two pages before you get to Enter the website proper, but on the way you see that it was voted Nightclub of the Year, then go to the Welcome page before getting to the Home page. The gallery of food pictures isn’t boosting Tito’s gastronomic reputation either.

Vincent Flanders’ comments: The fact the website has two different Splash pages before you get to the real home page is bad design. Obviously, they want to get you to vote for their restaurant in the Latin UK awards. This is a great example of Mistake #1 from Biggest Mistakes in Web Design 1995-2015 — “Believing people care about you and your website.“ Your website is about meeting your visitors’ needs. Your visitors don’t give a left-handed flying farkle that you want to win awards. Your visitors are looking for food. You’re keeping food from them.

I found it difficult to figure out how to get to the next page. The itty-bitty “Home” link is not intuitive. The next Splash page at least has the hours of operation, but that’s it. Clicking the “Enter” button actually takes you to the “Info” page, which is the real home page. We have navigation at the top. Clicking the links takes you to the appropriate pages.

Tito’s mobile version of this site is much easier to use, to wit (I’ve always wanted to use that phrase):

• A screen shot of the mobile home page.
• A screen shot of the mobile menu page.
• A screen shot of the web version’s menu page.

It’s all about your visitors. It’s not about you.

Tito’s Peruvian Restaurant