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

Submitter’s comments: Supposedly the largest piano retailer on the East Coast.

Vincent Flanders’ comments: It’s comments like the above that confuse me. Why? The site sucks. Is the company successful because nobody sees their website, but the company has great word-of-mouth? Is the company successful because the website is so poorly designed, but it matches the expectations of their customers? Do they have great TV and other media campaigns? Would they be the biggest piano retailer in the world if they had a better looking website?

The tables, the borders, the centered text, the long home page, and images are resized in HTML or CSS (PageSpeed says that “Serving scaled images could save 3.1Mb [98% reduction] on the Testimonial Page).

It’s 1995-ugly.

Rick Jones Pianos

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