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

Submitter’s comments: I just discovered this marvelous example of browser bossiness on totaljobs.com.

Totaljobs.com endeavours to support as many users as possible, but it has become necessary to cease supporting some browser versions. If your browser is not supported, you may still be able to access our site, but you may encounter some display problems.

They don’t support Mozilla, Opera, or Safari browsers and they don’t support Macintosh, Unix, or Linux operating systems.

They advertise UNIX jobs and Mac jobs! Are they expecting UNIX admins and Mac developers to carry around a windows laptop (only 32bit Windows is supported, mind) in order to access their site?

Vincent Flanders’ comments: Obviously, these folks are unclear on the concept. I believe the Brits (BTW what do you liked to be called?) have a marvelous word to describe the people who wrote the browser disclaimer — Wankers.

TotalJobs’ Browser Policy

Submitter’s comments: I was just looking for stuff to entertain my kids and I ran across this site before 8am today, What a way to start the day!

Vincent Flanders’ comments: I think it’s really cool that you’re willing to help your kids find sites worth visiting. The site you found is poorly designed. The main navigation is too far down the page (and it links to sections down the page), there is no navigation other than the back button, the page is way too long, some text is centered and other text is flush left, some text is red and some is black and some is blue, there’s a poor use of white space,

Quaint Corner Children’s Museum

Vincent Flanders’ comments: Jakob Nielsen’s Donation Usability: Increasing Online Giving to Non-Profits and Charities is required reading for any nonprofit organization. His two big points (Mission Statements and accountability) ring true. As I’ve said a hundred times, no web site should have a mission statement — unless you’re a nonprofit and then you need to have the best mission statement possible. As I said in Biggest Mistakes in Web Design 1995-2015 organization names, mission statements, and tag lines shouldn’t say:

Big Hands of Hope

 – It’s all about compassion

They should say something like

Save the African Children

 – We keep them from dying a horrible death

Your mission statement, tagline, and organization name should tell me what you’re going to do.

Anyway, Jakob’s article is brilliant, etc. , except for one little detail. The math is wrong — or something is wrong as the illustration below demonstrates:

(If the above image is too hard to read, you can click the link below and scroll down toward the bottom.)

If you have a $10M budget and it increases 10%, that should be $1M not $100K. I think. I’m not great at math either.

Jakob’s about as good as math as I am, but he’s much cooler

Vincent Flanders’ comments: I was ADDS (Attention Deficit Disorder Surfing) and I ended up at this site. I ran it through AccessColor and they said:

Both color difference and color brightness do not meet the recommended standard for 25.18% of the total text.

Either color difference or color brightness does not meet the recommended standard for 59.12% of the total the text.

Text on background with images is for 2.92% of the total text.

Click on the picture for a bigger image, or see the whole report in all its glory.

Considering what these people do…OOPS!

Keynote Systems

Submitter’s comments: Saginaw Township Community Schools – one of the more respected districts in the area – and look at their site. I’m not a web designer by trade, but I’ve actually seen a web site before.

Vincent Flanders’ comments: Where’s the focus? Why does the text have so many different colors? Why is their mission statement on the front page? Why aren’t the links underlined? Why is it so hard to find the links? (Under the green-colored Miscellaneous Links, we have the phrase “Where to go with Questions or Concerns” but only the words “Question or Concerns” are links. If you move your mouse to the beginning of the line — which is normal — it looks like there’s no link.

Saginaw Townships Community Schools

Submitter’s comments: I get so lost trying to find the damn specs for the laptop they’re selling.

Vincent Flanders’ comments: I get so pissed looking at those snotty, bitchy models. The guy is the worst. It will be a very cold day before I buy another Dell laptop.

Dell Adamo Laptop

Submitter’s comments: The links move around onscreen. If you roll over a link, it blanks out all the other links. Quite unworkable.

Vincent Flanders’ comments: Really, really stupid navigation. But, hey? why else would it be The Daily Sucker?

d/Lux/MediaArts

Submitter’s comments: I have only been here a couple of times, but this has to be one of the worst ever. Enjoy.

Vincent Flanders’ comments: I think we have the winner for the Worst Web Site of 2009. Heck. I think I’ve found the worst web site of all time. Congratulations to the submitter of this site. You’ve just found the bottom of web design.

Bad web design is like pornography — just when you think you’ve seen it all and you think nothing could disgust you, along comes something worse. Today’s Daily Sucker is the 2 Girls 1 Cup of bad web design. No, as far as I can tell there’s no pornography, just a web site that makes the 2008 Worst Web Site — Havenworks — look like CSS Zen Garden.

The home page is HUGE. In fact, I don’t know how large it is because it’s still downloading and it’s 2:00 a.m., and I’d like to go to bed. I’m guesstimating it’s around 503MB. That’s MB as in Megabytes. It’s so big I can’t get the great screen capture program, SnagIt, to capture a complete screen shot.

The page scrolls HORIZONTALLY and VERTICALLY. Holy, mother of God. This is a nightmare.

Because the home page is so huge, I’m not going to provide a direct link. You’ll just have to copy and paste the URL. I wish I drank, because I need a drink after looking at this site. Hell, I think it’s time to start. I’ve got orange juice and I think there’s some old vodka somewhere in the kitchen.

Just in case their system crashes from bandwidth overload, SnagIt was able to give me a partial screen capture — 6000 x 7000 pixels.

Here’s the site: http://www.belladesoto.us/

Here’s a partial screen capture

Here’s a partial screen capture at a larger size

Below is a really reduced screen shot:

Submitter’s comments: I would like to nominate genicap.com. This company is supposed to offer a pretty nice plugin for Adobe Illustrator; however, I have searched their site for 30 minutes and cannot find out how I can buy a copy. There is no search feature. The navigation SUCKS. It is chock full of technobabble. All in all one of the worse sites I have seen for a big company.

Vincent Flanders’ comments: My picture on the left sums up my feelings about the Genicap web site. If you’re not familiar with Gary’s “issues,” check out his appearance on Comedy Central’s Roast of Larry the Cable Guy where he roasts himself (this is so NSFW).

We have a Splash page with Mystery Meat Navigation, which is a bad way to start off your site. The subnavigation at the top is hard to read because the text is small and the contrast isn’t sufficient. The regular text is small and hard to read on a high-resolution monitor. There are also Javascript errors on certain subpages.

The rest of the site doesn’t make sense. Where is the damn plugin? If it’s on another site, where is the friggin link on this site? I thought this site might be an attempt to suck up to investors, but I can’t even be sure of that.

This site commits at least NINE of the Biggest Mistakes in Web Design 1995-2015:

When Gary Busey makes more sense than your web site, we have a contender for the Worst Web Site of 2009.

Genicap

Submitter’s comments: Here’s my first submission to you for a pretty bad site.

On the home page we get a redundant link to the same page, in addition to two options: Site A or Site B. This was perhaps their only attempt to organize their content.

Site A is purely horrendous. Frames-based, multicolored text spanning miles down the screen and left navigation with no particular order are just some of the obvious problems with this site. Scroll all the way down and there’s an ugly bordered table with even more navigation. Click on any of the links or articles and you’ll get a completely different and equally ugly background with centered text in many cases. You could go on and on.

Want to get to Site B without typing the main url or back button? Under the Site A heading you might miss the “Go to home entry” link. Click this link and you’ll get the main screen, only now with the left menu frame.

Site B alone does not appear to be nearly as bad as Site A, aside from the centered text. However click on a link and you’ll get the same inconsistent look and feel. Most of the images used are just awful as well.

Check out the Aura Camera page, the images with the color coordinated text with descriptions are great, especially for yellow..and..is that white at the bottom? A simple list with maybe a tiny square color image is all that would be needed.

Anyway, there are lots of people who are into researching those kinds of topics, and this site is filled
with tons of information. But how could anyone possibly stay on this site long enough to find what
they’re looking for?

Vincent Flanders’ comments: If I remember correctly, if a site has a low- and high-bandwidth version, the high-bandwidth version is the choice on the right. Not here.

This site’s design is similar to other sites that belong in what I call “Over The Top” industries.

The definition of an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream. I don’t get the feeling this is mainstream thinking.

If you are on Site A and click the “Go to home entry” link at the top of the page, it loads the original Splash page in the right-hand frame. If you then click on “Site B,” it keeps the left navigation from Site A and loads Site B into the right-hand frame. Wrong coding.

The Aura page has pretty colorful pictures. I’m pretty sure if you took a picture of my aura when I visit sites like today’s Sucker, the colors would be variations on crap-brown (#330001 in hex). Oh yeah. The pages also take forever to load.

This page is a classic example of Mistake #5 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it.“

2012 Unlimited

Submitter’s comments: This site makes me seasick.

Vincent Flanders’ comments: Here’s another church site that has committed the sin of Flashturbation. We have a needless FlashSplash page — whoops — “needless FlashSplash” is redundant. If you click “Skip Intro,” you get an advertisement. An advertisement on a church web site! You have to click to enter the site to get to the “real” home page, which is a whirling collection of Flashturbation that would make a Sufi dizzy.

If you turned up the sound to hear the advertisement, you’re in real trouble. The volume of the screaming guitar on the home page is louder than the ad. I’m confused by the “Camelot” link. It’s basically an ad for a restaurant. Huh?

Back in 1969 I met and interviewed Kenny Rogers when he was with The First Edition. He was one of the nicest people you would ever hope to meet. When he became hugely successful with his solo career I was happy because nice guys can finish first, but the pictures on this site confuse me. I didn’t know he became a preacher.

Welcome to Evangel Cathedral

Submitter’s comments: The poor music and Flash animation at the beginning with that atrocious scroller is bad enough, but there’s no way to turn off the announcer’s voice on the home page, and he ‘talks’ to you EVERY time you click on the HOME link. Then, if you use an ad block program, the entire site ‘poof’ disappears, as though it’s an ad. The only thing you get is a scroll bar! When you request a sample, the fireworks flashing button and very loud rendition of the Star Spangled Banner is cheesy, if nothing else.

And do we really, really need to see THAT many pictures of the product? I mean, brand recognition is one thing, but wow.

Oh, did I mentioned the entire site is masked so the URL NEVER changes, and it’s actually hosted on a different domain?

Vincent Flanders’ comments: The site is frame-based, which makes it appear as if there’s no content when you view the source. I didn’t get the fireworks and Star Spangled Banner when I clicked to request a sample. Your mileage will vary. However, the navigation is bizarre. All those pictures of the product make it hard to focus and find the links to click. Oh. The only real navigation is the home page icon and the back button and you know how I feel about the back button:

Another problem with the home page (at least in Internet Explorer 7) is that part of the page doesn’t display. The only way the bouncing, stupid pictures display is for me to hit the browser’s Refresh button. The home page (including the refresh) is 2.49Mb and that’s just too big.

The irony is I’m interested in the product and I’ll check it out next time I’m at Whole Foods.

justlikesugarinc.com

Submitter’s comments: This site is really bad.

Vincent Flanders’ comments: Well, yes it is. All the home page text is centered, there are multiple font colors and it’s difficult to figure out the navigation. The Hawaii activities link leads to a 404 error page/

HawaiiTravel.com

Submitter’s comments: This site is just plain ugly.

• Black background with 16 HTML color text (and I think they use all 16 of the colors on one page!)
• Bold colors are not too easy to read on black.
• Really hokey animated GIFs.
• Underlined text that is not a link.
• Scrolling text.

Vincent Flanders’ comments: As Colonel Kurtz would say if he had gone to art school, “The color! The color!” The color is especially “noteworthy” on the subpages like the Wednesday Catfish Fry page.

It’s a bad idea that the main navigation is at the bottom of the page, but it’s even worse if you’re looking at it using my monitor. (Here’s a smaller screen capture.)

It looks like the home page was designed using Dreamweaver, making this one of the uglier Dreamweaver sites.

Big Daddy’s Restaurant

Submitter’s comments: Here’s an example of an exceptionally bad web site for a town here in the northeast of England – a place called Barnard Castle. Nice little market town, but you’d have trouble determining that from the site.

The navigation is appalling, and when you do get to a page, you’ll be lucky if it works at all. Getting back to the home page is hard – back button nav is your only option. Also, it’s a site of a thousand styles. I couldn’t manage to find two pages that looked the same. Keeps you guessing about what’s coming next, though. The black/red combo also isn’t very welcoming.

Vincent Flanders’ comments: Well, there is some navigation on the subpages that leads back to the home page. Unfortunately, it’s intermittent and we all know the perils of intermittent reinforcement — slot machines are a good example.

My main issue is focus. Where’s the real focal point of the home page? It can’t be the scrolling “This Is Barnard Castle Life,” because clicking the message doesn’t lead anywhere. It’s the same with the castle pictures.

If you look at your browser’s status bar as you scroll, you’ll see x-y coordinates

Barnard Castle

Submitter’s comments: The site itself isn’t horrible, but they’ve done something I’ve never seen before. They used a protected iTunes music file (M4P) on the site, which will cause iTunes to pop up a notice asking you if you want to open iTunes and log into your account to check and see if you are authorized to play the file…

Vincent Flanders’ comments: I’ve never seen it before either. Now you know why you shouldn’t view your site from the machine where it was designed. I suspect the designer needs to read my article Why You Can’t Use Music On Your Web Site.

Just in case they fix the site, here’s a screen capture (scroll to bottom)

Franklin Ski Area

Submitter’s comments: We’re looking to get a beagle when we move to California this summer. Oh. My. God. Where can I start? Take your pick from these doozies…

Southern California Beagle Club: All-image navigation, no ALT attributes in the image tags, and an annoying animated GIF. A whopping 258 validation errors. How is this possible on such a simple page?

Julie Wright: Get down and funky in that California-vibe. I particularly like the acknowledgement to the help and advice given for this site. Obviously by someone who secretly hates them.

Mohave Desert Beagles: Oh dear, oh dear, oh dear.

Dyno-Mite Beagles: What’s with the images for navigation? The images are of plain text. Oodles of errors too. And what’s with the scrolling sideways? HOW wide is this site?

Vincent Flanders’ comments: I like Beagles a lot, but when I went to the Seattle Dog Show last Saturday my daughter and I mostly looked at those tough little guys, the Terriers. We specifically looked at the Border, Cairn, Glen of Imaal, Norfolk (my daughter fell absolutely in love with them at the show), Norwich, Parson Russell, and the West Highland White Terrier.

Our real favorites were: Irish Wolfhound, Bulldog, Bichon Frise and Chihuahua (my daughter has a Chihuahua mix).

As far as the web sites go:

Southern California Beagle Club: It’s amazing that there are 258 errors on a page with such miniscule content. According to the Membership page, the next meeting is April 26, 2007. We’ve got tacky, but stereotypical dog paw graphics and there seems to be a lack of contrast throughout the site.

Julie Wright: Needs to read my article Why You Can’t Use Music On Your Web Site. On the plus side, Pumba is just about the cutest damn beagle you’ll see.

Mohave Desert Beagles: Somebody needs to learn how to break up text into paragraphs. I also hate navigation links at the bottom of the page. What if I don’t find the page interesting? Do I want to scroll? Would I even know the navigation is there?

Dyno-Mite Beagles: I’ve never owned a purebred, but it seems weird selling a six-year old dog. The News page is empty and apparently there are no Favorite Places

Amazon.com sends me the following email:

We’ve noticed that customers who have purchased or rated “Zatoichi the Blind Swordsman, Vol. 9 – Adventures of Zatoichi” have also purchased “Attack Girls’ Swim Team Versus the Undead” on DVD. For this reason, you might like to know that “Attack Girls’ Swim Team Versus the Undead” is now available. You can order yours for just $26.99 by following the link below.

This is total BS. I can’t imagine any of the 12 people who bought Volume 9 of Zatoichi purchasing the “Attack Girls” dreck. C’mon Amazon. If you’re going to give me recommendations, give me something more realistic.

Then I get an email saying that since I purchased Zatoichi Volume 8 (or something similar) I should be interested in a new collection containing Volumes 7, 8, and 9. Uh…I already bought them individually from…guess who?…Amazon.

Submitter’s comments: I found this on a forum – the person who posted it said “thanks for loading like 100 huge images at once on a single page and pushing the boundary on what could be the largest right scrolling page ever. I think the entire game of Super Mario Brothers had less right scrolling.”

I can’t improve on commentary like that.

Vincent Flanders’ comments: Neither can I except to say it’s possibly NSFW — it’s a pouty-mouthed fashion photography site. One reason I’m including this site is because I just know someone is going to want to mimic the scrolling because “we can put all of our products above the fold.”

Rarely has so much talent been wasted on such trivial drivel. Ooh. I like that. A great name for an Emo band — Trivial Drivel. I get 2%.

Andrew Fashion Photography

Submitter’s comments: This site is supposed to be about chem-trails (trials?), I think. As you can see, navigating is terrible, especially because the articles are not grouped. Then there is that special link for the “WIP updated site” that uses frames. Of course, it isn’t any better than the main site.

Although it doesn’t look like this site has been updated since ~2000. I have a DVD sold/distributed by this guy that is (c)2005 and lists carnicom.com on the label.

Vincent Flanders’ comments: There’s a note under what they think is navigation that says “Menus in Progress 04/15/05.” The only progress these menus are making is down the highway to navigational hell. Heck, Jakob Nielsen told us to use them only sparingly — back in 2000. He’s still right.

There’s a link to the original site that’s also scary.

When you go to a subpage, the navigation consists of a link at the bottom of the page (and if the page is longer than a screen, you don’t see it) and/or the BACK button. One of my sayings is appropriate:

Aerosol Crimes

Submitter’s comments: None. It’s a continuation of my major complaint against so many web sites.

Vincent Flanders’ comments: Harmony Central had an excellent forum entry called Why Do Web Designers use Light Gray Type on a White Background? Slight Return’s comment (second comment) hits the nail on the head. Designers know their content so they can read it even if they can’t really see it.

Many otherwise excellent web designers fall victim to Bad Light Gray Type or “GLBT.” I went to a site that will remain somewhat anonymous to read an article about an interesting use of PHP (he’s a programmer, not a web designer). Right away, I knew I was looking at a GLBT site. Click on the image below to see what I saw.

I ran the page through AccessColor and, if you click on the image below, you’ll see how badly the site failed to have sufficient contrast.

73.93% of the text fails to meet one of the contrast standards.

Submitter’s comments: Here’s a pretty sucky horse web site.

Vincent Flanders’ comments: Some clever reader left a comment about another site that applies to today’s Daily Sucker: “1996 called and they want their web site back.” For a 1996 site, it actually looks pretty good. After all, there were some really tacky 1996 sites. I should know. I had one. For a horse web site, this one is pretty good. I’ve featured Lightning Bar, Castlewood Stables (which, actually, has improved), and Horserentals.com,

Today’s theme is contrast. One of the biggest mistakes people make is to not have enough contrast between the color of the text and the background color. I ran the main body text through AccessColor and, surprise surprise, “Either color difference or color brightness does not meet the recommended standard for 60.26% of the total the text.”

Dressage Stable

There’s a reason why Amazon.com doesn’t use certain web design techniques on their web site. This video explains.

Submitter’s comments: May I introduce BizFizz, a programme run by the Civic Trust.

This site fails both AccessColor and HTML validation (40 Errors) and looks pretty bad from the offset. There’s a lot of inconsistency in font size, colouring. and spacing.

My biggest complaint with this site is the quality compared to the Civic Trust’s other sites e.g. www.civictrust.org.uk, www.greenflagaward.org.uk, and www.made-in-britain.org.uk.

Redeeming factors do include labeling of PDF links and an actual title tag.

Vincent Flanders’ comments: Looks like the BizFizz folks need to look over the always-informative Jeffrey Veen’s Design for Startups presentation.

I was totally stunned to discover that “The latest Green Flag Award news” section of the GreenFlagAward web site passed AccessColor. When I manually checked it with Contrast Analyser, it failed 3/4 Luminosity tests and the Colour brightness/difference test. Hmm. I was right.

BizFizz

Submitter’s comments: A mayor of a California town (Los Alamitos) recently sent an email with a picture of the White House lawn filled with watermelons and the words, “No Easter Egg Hunt This Year” to some of his friends, one of whom found the picture offensive. Because of the email, the mayor resigned. Here are the details for my foreign readers who may not be aware of the racially inappropriate stereotype.

Vincent Flanders’ comments: I wonder what kind of web site the mayor used in his election campaign? Hmm. Do you think it uses web standards, that its HTML validates, and is aesthetically pleasing? Of course not. I take great comfort in the fact that this site qualifies as an over-the-top web site. As I state in Over the Top” — An Industry With Sucky Web Sites

The definition of an “Over the Top” industry is just like the definition of pornography — you know it when you see it. Over-the-Top sites generally deal with philosophy, religion, politics, etc., but they’re generally not mainstream.

I don’t mean to imply that over-the-top web sites are racist. It’s just that when you see one, you should take whatever they’re preaching or selling with a grain of salt — until that day when someone says, “The greatest trick the Devil ever pulled was when his web site convinced the world he didn’t exist.” (My homage to The Usual Suspects.)

Elect Dean Grose