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

Submitter’s comments: This web page sucks.

Vincent Flanders’ comments: Of course it sucks. I love this site because it belongs to an architectural / engineering company. We all know how much architectural websites suck.

This website is a classic. Scroll over the brown boxes and you’ll get the Carousel From Hell. Jakob Nielsen has an article about carousels that Mimarch should have read. Here are the details:

Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors

Carousels allow multiple pieces of content to occupy a single, coveted space. This may placate corporate infighting, but on large- or small-view ports, people often scroll past carousels. A static hero or integrating content in the UI may be better solutions. But if a carousel is your hero, good navigation and content can help make it effective

As I said earlier, in the world of carousels, Mimarch has the Carousel from Hell. In fact, it might even be seizure inducing.

The home page also has scrolling Mystery Meat Navigation, but clicking the graphics is a waste of time because nothing happens. Why? The home page has around 225 files and eats up 25Mb of bandwidth 25 megabytes!

The sub-pages have text that’s very difficult to read. I could go on but I’ve got to get up early and my tolerance for crappy web design can only take so much.

Mimarch

Submitter’s comments: Not only is the writer a (two pejorative modifiers and one pejorative noun deleted ), but the website uses frames and is borderline unusable on my laptop’s 1366×768 display. That and this website was made EARLIER THIS YEAR! What over-the-top crap.

Vincent Flanders’ comments: It’s nice to see that KidsToday appreciate the past. The 1996 past. I think this website makes more text-related mistakes than any I’ve seen recently. It’s definitely an Over-the-top Website.

There’s a section about “Text and Links” in my soon-to-be-revised article Checklist 1 – 65 Mortal Sins That Will Send Your Site to Web Design Hell. How many text mistakes does today’s sucker make?

• Our site mixes and matches text sizes on the page. (Video)
• Our site mixes text colors on the page. (Also see the video above.)
• Our site’s text requires people to have special (unusual) fonts on their computers to correctly view our text.
• Visitors can’t read our text because it’s too small or it’s difficult to read and comprehend because it’s too large.
• Leading (spacing) is too big / too small.
• There is not enough leading between paragraphs, menu links, and/or lists.
• Our SITE USES LOTS OF WORDS IN ALL-CAPS.
• Our site uses scrolling, blinking, fading, or moving text.
• We use multiple text styles on the same page for no logical reason. We mix and match (choose your combination) flush left, center, flush right and/or justified text.
• The color contrast analyzer (here’s a video showing the color contrast analyzer in action) says there isn’t enough contrast between text/links and background. Here’s a video that discusses contrast.
• There isn’t enough contrast between our page’s text and background.
• Our site uses centered text on more than just headlines.
• We use justified text. Why it’s bad #1 and why it’s bad #2.
• We use browser-specific text tags like <MARQUEE>.
• We use font faces that are not appropriate for our audience — like Comic Sans on a senior citizen site.
• Our site has text in the status bar — moving JavaScript text.
• We have too much / too little text on a page.
• We haven’t checked to see if Google Translate (somewhat) accurately translates our text to other languages.
• Our site uses underlined text. (Only links should be underlined.)
• Our site has sideways text/links.
• Visited links don’t change color.
• Our links are not clearly labeled. “Click here” is not enough (NSFW, perhaps)
• Our site has too many links in one area.
• Our site has too many links. (Video)
• Our site has lots of dead links.
• Our site has lots of dead links and/or no 404 pages.
• Our site has lots of complex URLs.
• Our site has links consisting of 10-20 words.
• Our links are not informative.

Bombshell 201X

Submitter’s comments: While on vacation two weeks ago headed down to Pigeon Forge / Gatlinburg, TN, we spent the night in Lexington, KY.  We were driving around near the UK campus and saw a place called Hugh Jass Burgers and, I have to confess, I couldn’t help but bust out laughing at the name.

During an idle moment at work, and just out of curiosity, I looked ’em up online…and saw that their website sucks in more ways than one.  For starters, why open the rest of the site in a new window?  Makes no sense to me…

Vincent Flanders’ comments: What makes even less sense is the site is Flash-based and there’s no mobile version. A restaurant without a mobile website? What the heck? Here’s what you see on an iPhone when you go to their site:

Another design mistake is how tacky the site looks on a large, portrait monitor. I almost forgot to mention the website has a splash page and there is music that automatically plays when you enter the real site. (Actually, I kind of like the music, but “kind of” isn’t good enough. As someone who is well-known in the heterosexual community, I wouldn’t want to go out with someone who was kind of like a woman <grin>.)

Hugh Jass Burgers

Vincent Flanders’ comments: School is back in session and lots of colleges, universities, and high schools are teaching web design. Lots of sites are teaching techniques to help you make your site current. Unfortunately, not everyone is teaching good web design techniques.

Today’s example fails Navigation Rule #1: If you have to explain your navigation, your navigation sucks. It also violates Navigation Rule #2 (Don’t force your visitors to scroll horizontally) and Navigation Rule #3 (Make sure your navigation works on the web and on mobile).

Yes, I know this horizontal parallax effect is clever. If the limitations of this technique were explained and a warning that “It’s not for everyone” were issued, I wouldn’t have a problem.

Jinvertscroll

Vincent Flanders’ comments: The United States is coming up on the anniversary of the 9/11 attacks. I figured there would be at least one website on this topic that would be over-the-top. I chose this site because it’s not horribly egregious.

Obviously, the page is too long. The problems are mostly text based. You have a mixture of text sizes and most of the text is difficult to read. Each page has its own color, which isn’t helpful. The site hasn’t been updated in a few years. I guess there are no more conspiracy theories . On the other hand, American TV something-or-other Glenn Beck has an amusing page about US currency and 9/11.

Interestingly, I ran Google’s online Page Speed Insights (because it gives scores – unlike the Chrome extension) – about how well . The mobile version only scored 47 and the desktop version only scored 53. Structurally, the website is unsound and wouldn’t take much to make it come crashing down.

Killtown