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

Steenweg

Submitter’s comments: I would like to bring a site to your attention as a web page that sucks. Steenweg is a very cheap consumer electronics store in Utrecht, the Netherlands, and the site very much reflects their cheap character. There are about a hundred more things that I could say about the web site, but a picture speaks a thousand words, so I’ll just let you visit this horrible monster of a web site and see for yourself.

Vincent Flanders’ comments: There’s nothing wrong with being cheap as long as the products aren’t. The problem with a cheap looking site is it doesn’t inspire confidence. The glaring red background, the animated images…wait. Let’s just take a look at a video.

My YouTube video about Steenweg

Steenweg

Yahoo! Developer Network

Submitter’s comments: None.

Vincent Flanders’ comments: These folks are so totally unfreaking clear on the concept that they really need to be slapped.

If I remember correctly, “Best Practices for Speeding Up Your Web Site” was one of the first articles on the topic that normals could almost understand. What’s really disturbing about this long, long article is that they’re using #666 for the text color and we all know that #666 is Satan’s CSS.

With #666 there’s not enough contrast between the text and the white background to easily read the article. This is especially bad because the article is so long. Oh, and lack of contrast is a problem because the W3C recommends a standard of 500 or greater for the color difference and a standard of 125 or greater for color brightness and #666 doesn’t cut it.

As I said in the Daily Sucker for 9-9-9, “The harder it is to read a web page the easier it becomes for your visitors to hit the BACK button and go to a site they can read. In order to read a web page, you need enough contrast between the text color and the background color.

“This isn’t rocket science. I’ll even  give you a simple guide that shows which shades of black to use for text on a white background.”

This horrible text color is EXTREMELY popular because it’s what the CoolKid designers use. I know that KidsToday don’t read, but there are still lots of people who do and this article on speeding up your web site can’t be put into pretty pictures and putting some of the concepts into an 8-minute video isn’t terribly helpful. Here are a lot more performance-related videos. Right now, Google is one of the main sources for information on the topic. Gosh. Even though the text is small, you can read it. What a concept!

Yahoo! Developer Network

mxyplyzyk

Submitter’s comments: I think it’s pronounced ‘suck.’

Vincent Flanders’ comments: You’ve got Mystery Meat Navigation where the meat changes — fortunately, the links stay the same — and a needless use of Flash plus, for some reason, they’re using the https protocol. I don’t understand.

What really sucks is that you have itty-bitty little thumbnails of the products. The problem is that you’re not sure what they represent until you click them. On the “Kids and Pets” page I clicked on a picture of a dog. Turns out it’s a pillow. How is it possible for me to know that? You just wasted my time. Actually, the whole site is a giant waste of time.

mxyplyzyk

The good news? Saved $700, Yslow likes me and Page Speed likes me too.

Bad news? I had to wade through dozens hundreds thousands of poorly written explanations of caching and compressing files. Oh, and creating a cookieless domain? I still haven’t found an adequate explanation for normals.

Hopefully, I’ll get a story out this.

What I got out of my weekend:

ExpiresActive On
ExpiresByType image/jpg “access plus 2 months”
ExpiresByType image/jpeg “access plus 2 months”
ExpiresByType image/x-icon “access plus 2 months”
ExpiresByType image/gif “access plus 2 months”
ExpiresByType text/html “access plus 2 days”
ExpiresByType text/css “access plus 2 days”
ExpiresByType application/javascript “access plus 2 days”
ExpiresByType application/x-javascript “access plus 2 days”

AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Goode Wraps

Submitter’s comments: This site has most of the usual problems. REALLY long pages. REALLY big letters in a couple of places. Links that look like they lead somewhere else (University Pain Research Briefs on the Research page. Most lead to another Goode Wraps site instead of, say, University research sites. A fair number lead to 404s.)

However, what I really love about this page: Click on the Secure ordering button. THE BLOODY THING APPEARS IN A FRAME! It is actually a https: site but there is NO way to confirm this. Since it APPEARS IN A BLOODY FRAME!! The url in the address bar still reads http://www.200.com/ not the actual secure ordering site of https://secure.accutek.com/200/ . No visible https; no lock symbol. Credit card is returned to the wallet…

Vincent Flanders’ comments: Amen. I’m not always happy even when I see the lock symbol and the https. There’s no way I’d buy anything here because it’s too scary and the site looks totally unprofessional. “If you don’t look like a pro, the people will go,” is a phrase I’ve used for years.

If you have your browser window open (at least on a large monitor), you can see a whole lot of extra navigation buttons in the left menu. Why are they there? Why is so much information on the home page? Why is there air? (My homage to Bill Cosby.)

Why isn’t the logo at the top-left or at least the top center of the page? Why are there different type sizes? Why is everything so much bigger in Firefox? Why are there such cheap graphics? Why? That reminds me. “Why?” is one of my favorite songs by The Byrds. Here’s a guy who does a great version of the song. Maybe it will take your mind off this crappy Daily Sucker.

Goode Wraps

YouTube now has a cleaner, streamlined look. Here’s a video from one of my favorite artists Jon Dee Graham http://bit.ly/8GbDkK

Free Online Books About Web Design – http://bit.ly/51P1nx

“How eHarmony Kills the Romance With A/B Testing” http://bit.ly/5n7N37

The New England Fan Experience

Submitter’s comments: I’d like to select the Professional-Looking Web Site That Fits On My Screen Experience, but I couldn’t find it.

Vincent Flanders’ comments: I can basically repeat what I said about last Friday’s Daily Sucker:

It looks like Captain Saam The New England Fan Experience got their inspiration from:

Ugliest / Worst Web Pages of the Decade
Worst Web Page in the World
Ugliest / Worst Business Web Sites of 2009
Ugliest / Worst Over The Top Web Sites of 2009
Worst Web Sites of 2008
Worst Web Sites of 2007
Worst Web Sites of 2006
Worst Web Sites of 2005
Over-the-top Web Sites

Captain Saam The Fan Site makes Mistake #5 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it.“ I call this type of design the “I haven’t taken my antipsychotics in a while school of web design.”

If they’re looking for inspiration, I’d pick the Gerard Butler Fan Convention. Man, there’s a lot wrong with this site, but it’s so much better than today’s sucker. Oh, I picked it at random from a Google search on the term [fan conventions]. Hey folks, try it.

The New England Fan Experience

Captain Saam’s Scuba School

Submitter’s comments: I’m a scuba diver and you gotta love this one. I want to submit to you a web site that I believe meets your criteria of a truly sucky web site.

Vincent Flanders’ comments: I have a great deal of respect for scuba divers. Michael Willis, the co-author of my first book, is a serious scuba diver — wait, that doesn’t make sense. You’re either a serious scuba diver or you’re a dead scuba diver, which is why I respect them. Unfortunately, I can’t respect today’s sucker because it looks like Captain Saam got his inspiration from:

Ugliest / Worst Web Pages of the Decade
Worst Web Page in the World
Ugliest / Worst Business Web Sites of 2009
Ugliest / Worst Over The Top Web Sites of 2009
Worst Web Sites of 2008
Worst Web Sites of 2007
Worst Web Sites of 2006
Worst Web Sites of 2005
Over-the-top Web Sites

The Captain makes Mistake #5 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it.“ I call this type of design the “I haven’t taken my antipsychotics in a while school of web design.”

If he’s looking for inspiration, I’d try Scuba.com. It’s too busy, among other problems, but it’s a much better influence

The only way to keep Captain Saam from drowning is to redesign the site.

Captain Saam’s Scuba School

RoadTrucker

Submitter’s comments: I found a sucker.

Vincent Flanders’ comments: Yes, you have and it pleases me no end when people show they understand what bad web design looks like. The obvious mistake — Where’s the Focus? There’s so much going on that I’m not sure a) where I should go b) what this company has that can solve my problems.

The menu on the left doesn’t help. The selections are:

Home
About Us
Free Games
Customer Feedback
Product Catalog
Search
Security Policy

Being a rational sort, I’m assuming these items are in the order the company thinks is important. I’m probably assuming incorrectly. The menu on the top is also confusing. It “appears” the blue menu items may be in order of importance, but “Products” is the last button. This doesn’t make sense.

Cut the clutter. Organize. As the great author A. A. Milne said, “Organizing is what you do before you do something, so that when you do it, it is not all mixed up.” The home page is all mixed up.

RoadTrucker