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

Submitter’s comments: Site looks nice. Plain, but nice. Kinda like an old-fashioned ice cream palace. Unfortunately that is all there is to the site, the home page. Also, all that text is actually images.

Vincent Flanders’ comments: Not sure if it’s true Daily Sucker material. It might be nice to know what types of pastries and ice cream are available, but I’m the type of guy who would just go. On the other hand, Using graphics for text is definitely on Web Design Checklist 1: 165 Mortal Sins That Will Send Your Site to Web Design Hell.

Churn

Submitter’s comments: They need to update their website.

Vincent Flanders’ comments: It’s a Flash-based website and there’s very little here that requires the use of Flash. Certainly not the Flash-Splash page. There is at least one video and it’s fine to use Flash for video. In fact, Adobe is only focusing Flash on gaming and premium video.

Now, more than ever, Flash isn’t the best solution for websites. Use it for what it’s meant to be used for—games and video.

Arctic Sunwest Charters

Submitter’s comments: It is meant to be a site about history but has all that unnecessary, jarring gumpf.

Vincent Flanders’ comments: I had never run across the word “gumpf” before. Love it. “Random junk.” I think it’s a subset of Over-the-top Web Design. There are OTT websites that have a consistent theme and then there are Gumpf OTT—or GOTT websites—as in “Mein GOTT.”

There’s way too much crammed on one ugly page. I’m not sure they’ve licensed the likenesses of Clint Eastwood are Arnold Schwarzenegger and it’s just plan horrible looking, which is a shame because I really liked the Anglo-Saxon English class I took and to have these representatives screw it up is a bit sad.

Oh, the site is mildly NSFW (I think). Depends on how politically correct your company is and how much bathing suits offend. On the other hand, there might be worse pictures. Dunno because I have no reason to stay on the site.

Mercia Tourist Board

Submitter’s comments: Scunthorpe is a town in the north of England. The website is run by the media group which produces the weekly newspaper for the area. It had a major revamp a couple of years ago when they decided that what the town really needed was a long scrolling, box laden vomit fest of a site designed to make casual viewers wish for blindness.

“Features” include:

• a lag when scrolling caused by the interminable boxes
• links themed with a rainbow of good taste
• missing images (I didn’t see any but I didn’t try too hard <grin> – vf)
• random shop adverts and news stories strewn everywhere
• links which wander off onto other domain names e.g. try announcements
• links back which go to the wrong site e.g. try announcements, then Scunthorpe Telegraph Announcements, then try to get back, you will likely end up on thisisgrimsby instead.
• less than intelligent positioning of “useful links” and “most popular” stories.

I mean, I could go on…

Vincent Flanders’ comments: Ah…Scunthorpe. What a problem you are. The site uses a strange variant of Mystery Meat Navigation that I’ll call color-coded MMN. Most of the little sections on the home page have colored bars on the left side. These match up to the colors at the top and bottom of the page that’s called “Today in Scunthorpe.” Who is going to remember this system? Why would anyone in their right mind want to remember it?

One of the perils of this silly system is you put the wrong color code on an item.

The home page takes forever to load—even in England! The load time is 11.742 seconds in London (the first byte is 0.251). Ironically, it loaded faster from Washington, D.C. 8.846 seconds (but the first byte took longer at 0.383).

This is Scunthorpe

Submitter’s comments: So here’s an excellent example of a horrid website. My boyfriend took one look at it (and its autoplay music was going) and he asked, “…is this for a night club?” Nope. It’s a photographer/fashion site.

And you can barely tell what kind of site it is until you get to the portfolio section, which doesn’t even have a means of navigating once you have selected portraits/fashion/glamor or whatever the options are. The portraits one was a nightmare. I found myself spinning my cursor in circles just to try and get a quick glimpse of each picture. Why do people think that sites like this get them business!? You need an easy to navigate your site so that your business is accessible to everyone. What were they thinking, webpagesthatsuck.com!? WHAT WERE THEY THINKIIIING!?

Vincent Flanders’ comments: I initially thought it was a website for a gay dance club in downtown Seattle (it’s an interesting story—five guys and girls went out dancing and we had a great time). When I looked at the URL—SugarYourSpice—I thought it might be a site for an adult novelty store (like Lovers in Puyallup—it’s an interesting story…). Nope. They provide hair and makeup for photo shoots.

I don’t know their clientele, but I don’t think their current website would be as effective as something simple and straightforward. Actually, I’m going to propose they keep their Flashy silly site and create a regular site and give folks the option of choosing which one they want. This is the rare type of site that can benefit by having a normal, HTML-based site and a showy Flash site.

Sugar & Spice is NSFW (slightly)

An excellent article that partially explains (to me) why people who have sucky websites don’t understand their websites suck.

The key phrase is:

People will interpret the same information in radically different ways to support their own views of the world. When deciding our view on a contentious point, we conveniently forget what jars with our own theory and remember everything that fits.

If any of you folks out there are looking for a good research project, I think examining people who have sucky websites but think they don’t suck, would be pretty darn interesting.

How and Why We Lie to Ourselves: Cognitive Dissonance

Submitter’s comments: This site is a rainbow-licious flavor of suckiness. Yikes! And thanks for your service to the Internet :-)

Vincent Flanders’ comments: This is an internal page for a company that makes “100% blended fruit juice concentrate that is specifically designed for childcare centers, preschools, Head Starts, etc.” Since many of those in their target audience are too young to read, I don’t understand the need for rainbow colors, centered text and lots of ALL CAP TEXT mixed in with regular text. I doubt the real target audience (administrators and purchasing agents) appreciates the design and layout. Well, I hope they don’t appreciate it.

Fortunately, in the HTML version there doesn’t seem to be any animated GIFs, but in the Flash version of the site there is at least one animation. The Flash version doesn’t really need to exist. The HTML version would be sufficient—except for the reasons cited above.

Interestingly, the above page was given a 95 by Yslow (but a 78 by Page Speed). The back end seems to be in better shape than what the public sees.

As a lark, I did a quick search for [juice company] and the first result I clicked was a sucker on the high-end of the spectrum: Odwalla. It’s an expensive Flash-based site that wastes your time.

For grins I clicked on Naked Juice and the site is infinitely better than either of the two mentioned

Who is Pennyjuice?

Submitter’s comments: Searching for a local service I came across this site.

Vincent Flanders’ comments: I suspect this is a large, well-respected company who doesn’t understand that their image is being hurt—especially by their images. Like yesterday’s sucker many of the images are resized in HTML or CSS. Because someone designed the page wider than 1200 pixels, you have to scroll horizontally to see the complete page. One of the partially cut out images is 581 x 388 pixels and it’s scaled down to 300 x 300 pixels.

The menu items have a white “aura” around them, which shows they were designed for an all-white background. You also don’t center text content.

Wet Water Equipment Technology

Submitter’s comments: This is a site of a local woman who deals in Feng shui decorating amongst a million other things that are all listed on the same site in no particular order.  I really like the “Clear (your) Clutter” advertisement on the right column of the page.  I wish it worked.

I thought Feng shui decorating was about proper placement of things.  It’s hard to find my Qi on this site.

Vincent Flanders’ comments: Qi whiz, I’m always losing my Qis.

The submenus on many/most/all the pages are impossible to read. Some pages are centered and some pages are flush left (Interior Design), we’ve got rainbow dividers (which, thank God, are not animated) and while I like color around me, there’s just a little too much color on the site.

If this is what websites should look like when they’re Feng Shuid, then we’re all Wang Chunged (tonight. [Sorry for the 80's musical reference.]).

Feng Shui Interior Design

Submitter’s comments: The website is stuck in the 1990s and it’s terrible to navigate.

Vincent Flanders’ comments: They also have links that are unmarked PDFs—lots of them. I viewed the source and counted 103 unmarked PDF links!

The home page has a Google Page Speed score of 14—one of the lowest I’ve seen. It’s major error is it resizes images in HTML or CSS. There are 32 of them and if they were properly scaled, they could save 2.5Mb in bandwidth each time the page loads. The site doesn’t enable caching or compression.

We have too much material on the home page (of course we do), the usual text problems (multiple colors, sizes, etc.). If scientists conducted experiments the way they design websites, all the scientists would have been blown up.

Ohio Academy of Science

Submitter’s comments: First of all, FLASH!!!!  It’s everywhere, the entire site is built in Flash with animations, flashing, auto playing background audio and not to mention that the intro audio file on the splash page sounds like I’m going to see Ron Jeremy appear on the screen any moment.

Vincent Flanders’ comments: I don’t think I want to see Flash or Ron Jeremy appear on the screen. I certainly don’t want Ron Jeremy to appear in a Flash video.

I swear I’ve used this site before , but I can’t find any record of its existence. I suspect there’s some sort of horrible Flash template out there that reminds me of this site. There is nothing on this website that requires Flash. Why use it?

Industrial Painter is a classic example of Mistake #6 from Biggest Mistakes in Web Design 1995-2015 — “Have you ever seen another web site? Really? Doesn’t look like it.“ I wanted to find out if every painting company looked like today’s site. I conducted a search using the term “military painting” (which Industrial Painter also performs) and clicked on the first link I found, which was for Breton Industries. While the site won’t win many awards, it’s infinitely better than today’s sucker.

Industrial Painter

Submitter’s comments: This is a viable candidate—it’s actually been mentioned many times in the national media. But actual content is harder to read than a circa ’05 Myspace page.

Vincent Flanders’ comments: Many people have said “Military Intelligence” is an oxymoron. I don’t think anyone ever said “Military Corruption” is one. Then again, you can put almost any organization’s name in front of the word “corruption” and it makes sense.

This is just another Over-The-Top Website where nobody in their right mind is going to believe a word that’s said simply because of the site’s look.

If you have an OTTW like this one, make it look like Pinterest. whose design is over-the-top but it looks like a normal site so it’s not an Over-The-Top Website. I know it sounds confusing, but it isn’t.

Military Corruption

Submitter’s comments: The Havenworks website might be dead, but there’s another website that seems to love the Never Ending Scroll of Death. Pinterest is a social networking website that seems to cater to middle-aged women. You can share and comment on various things like shoes and clothes, but all I see is a bunch of crap loaded onto one extremely long page. Crap and social networking sites go hand in hand, but this is really bad. All that is missing is some obnoxious Flash.

Warning: Scrolling down the home page of this website could cause vertigo and nausea.

Thank you for considering this site. I actually have friends who think that Pinterest is great.

Vincent Flanders’ comments: I’m definitely not Pinterest’s target audience. Our submitter says the site caters to “middle-aged women.” Om Malik of Gigaom says “It is especially popular with young women.” Of course it is. That sounds better to investors. Either way, this site represents  the pinnacle of achievement for Over-The-Top websites.

The only difference between Pinterest and Dreams of the Great Earth Changes is the quality of Pinterest’s web design. Initially, it looks gorgeous—and it is—until you start to focus and then it becomes a long, blurred jumble of scrapbooking, inspirational quotes, cute animals (Cute Overload comes to mind), food and pastries, and—well, just look at the site.

I can’t stress enough how impressed I am at the quality of the design. However pretty the pictures and layout, it’s still a extremely long (61,250 pixels) crazy quilt of material It’s a very beautiful mess, but it’s still a mess.

Pinterest

Submitter’s comments: Who puts a diaper around the world?  And a badly drawn one at that?  Never mind the logo, this site does not take ‘a fresh look at diapers’.   It looks about as fresh as 1998. Read the rest of this entry »

Submitter’s comments: An early front runner. (Does that make it the Herman Cain of web sites?)

Vincent Flanders’ comments: I doubt Herman had a website quite like this. I swear I’ve used this before, but I couldn’t find any evidence. Sadly, I guess it reminds me of another political website.

You would think the folks at One Nation might notice there’s something wrong with their website if they just looked at a couple of American political party’s websites. Does the Republican Party website or the Democratic Party website look like your site? No? Then your website sucks! (I’m not saying these two sites are wonderful, but they’re not going to show up on WPTS in their present form.)

One Nation

Submitter’s comments: This one page seemed to take its sweet time loading in the 97-99% range while this god-awful music played and never ceased to attack my ears. Also, there is a bit of Mystery Meat Navigation (MMN) going on with the unlabeled bags. Ironically, though this is the “festive” collection, the screen is awfully dark.

Vincent Flanders’ comments: Not sure why the page hangs starting around the 97% mark. It takes a long time to get there and, frankly, I’m bored and would normally leave. I notice the MMN occurs both in the left navigation and in the middle. The left-side navigation is hard-to-read because someone doesn’t appreciate contrast.

While exploring the site, I discovered the Men’s Business Accessories page. More importantly, I discovered the Textured Leather Crossboy Briefcase. While the bag is gorgeous, the price isn’t at £795.

Burberry is your typical high-end fashion/designer site.

Burberry Festive

1. Paratom Investigative Unit

Submitter’s comments: Spooky, psychic awfulness. Every site has its day, and I think Paratom.com has earned it.

Vincent Flanders’ comments: To say the home page photo is inappropriate is to insult the definition of inappropriate.

Paratom Investigative Unit

2. The New Gmail interface

Submitter’s comments: Some of the offenses:

• Mystery Meat Navigation (MMN)
• Two identical MMN gears that point to separate menus.
• Redesign that requires (even in the most compact view) 4x’s the amount of scrolling and 2x’s the amount of clicks.

Vincent Flanders’ comments: I’ve gotten lots of complaints about the new Gmail look. Even my wife complained about it. I don’t see two identical MMN gears, I just see two different types of MMN.

3. Black Hills Youth Football League

Submitter’s comments: This site causes the blind spot in my vision to expand to cover the screen.

Vincent Flanders’ comments: It’s sites like these that amaze me. I’ve been trying to find "the average-looking website." You know, the website that’s "just good enough" so I can point to it when I run across sites like this sucker and say, "Does your site look as good as this one? No? Fix it!" This site not only is over-the-top, it’s under the bar.

Black Hills Youth Football League

Submitter’s comments: I count:

• Sparkling
• Long, incoherent “splash” (?) page
• Big “SALE” GIFs and a credit card logo stripe, but no indication of what they’re selling
• Sparkling
• Four items on the “sitemap” don’t link to anything (Our Show Pictures Our Champions, About Us, Visit Our Chapel Room)
• For no apparent reason, the “family photo” at the top of the sitemap page looks startlingly like a Photoshop construction
• The “Home” page linked to on the sitemap has no text on it whatsoever
• The Home page also has a “Home” link, except this one points back to the sitemap
• Sparkling
• Largely unidirectional navigation (nothing links back up the tree)
• Inconsistent page designs
• The “Designs by Bev” image prominently displayed at the bottom of each page sometimes isn’t actually a valid mailto: href (SiteMap), and sometimes causes a popup window
• One confused man from Mars
• Did I mention the sparkling?

The music is catchy, though! And it’s in the WAV format – how considerate of them

Vincent Flanders’ comments: Those of you who thought my initial reaction to this site was “Jesus Christ!” were right. If the flamboyant Liberace were alive today and he looked at this website, he’d scream, “Stop it right now. There’s too much sparkling going on.”

For the life of me, I don’t get the use of the Standard White Jesus everywhere. The Jesus Of This Site is not 5’3″ tall and doesn’t weigh 110 pounds, which is what the archaeological evidence suggests for the real Jesus. I have an iPhone app I call My Personal Black Jesus and he dispenses wisdom each morning, but it’s OK to have Jesus on an iPhone app—and he’s on lots of them—but he doesn’t belong on a site for dogs. Hell, the Mormons don’t have a sparkly Jesus on their home page and they’re a religion. The Baptists don’t have him either. There’s a point here.

For the life of me, I don’t get how these people can look at their site and think, “This design is wonderful.” Go to your favorite search engine and key in “inspirational websites.” I don’t agree with a lot of their choices, but guess what? There isn’t a single inspirational website that looks like this. None.

Oh. I suspect the site is illegally using sound files. I guess they didn’t read my article Why You Can’t Use Music On Your Website.

My favorite page is the Toy Pomeranian Breeder page. If you somehow accidentally ended up on this page, the “Welcome Pombreden’s Adults for Sale” logo might make you think you stumbled upon a human trafficking website.

Pombreden’s Pomeranians

William Glenn & Son – Example of Bad Web Design for December 12, 2011

Submitter’s comments: This is Scottish, yet crap.

I came across this turkey when seeking out a Scottish gift shop in San Francisco that I remembered visiting previously, before my fiancée and I head out there tomorrow. I found the site for the store – unfortunately, first on my iPhone, which wouldn’t render this Flash-only monstrosity. (And, if not too obscure, my Subject reference is to the “All Things Scottish” series of “Saturday Night Live” skits Mike Meyers starred in in the late 1980′s / early 1990′s.)

Vincent Flanders’ comments: I love the tiles-on-amphetamine look the page has. Uh…aren’t liquor sites supposed to verify your age before you can see the content? Not that it works. It’s a joke, but at least they pay lip service.

William Glenn & Son

Submitter’s comments: It has some issues with the buttons, but real problem is how it set up its Search Engine Optimization. When you go to some of the other pages on the site, sometimes the buttons will appear over information, like the company phone number.

Vincent Flanders’ comments: I didn’t know people were still trying these old SEO tricks and I didn’t know they are still working–white text hiding behind a white image. For all I know, it’s not working. Paging Matt Cutts.

Steamed Clean

Submitter’s comments: I know I specialize in over-the-top sites, but this is not one. It is virtually useless, not even brochureware, and has been since 2008. I just love the watermarked ("istockphoto") pictures. I guess the owner does not mind telling the huge number of potential clients beating their way to his web site that he does not care to pay even the very modest fee for their usage.

Vincent Flanders’ comments: Pretty ballsy–or pretty stupid. I’m in a pretty good mood (3-day weekend with the wife) so I’ll just say it’s been a long, long time since I’ve seen anyone use comps and forget that they used them. I’m sure the designer just forgot to spend the pittance to license the images.

Mallard Adhesive

Submitter’s comments: I wanted to buy this product, but I can’t read (about) it.

Vincent Flanders’ comments: This screen capture shows the problems. If #666 is too light for text on a white background, imagine what how hard this site’s #888 and #999 are to read.

This is a big company.

Symantec – PartitionMagic

Here’s the SmugMug version of the video

Here’s the original article at the Seattle Times

Submitter’s comments: This one really sucks…It’s from a small town’s (Engenhahn) local committee of one of Germany’s major parties (Social Democrats, SPD). Doesn’t even feature the party’s logo or colors, though, but that might actually be a rather good idea…

Vincent Flanders’ comments: In this day and age, you often don’t want people to know your party affiliation. The only people who can look at the thumbnail and say, “Verdammt, das ist glatt (Damn, this is smooth)” are the people who authorized the site. Everyone else sees it for the sucker it is. Speaking of “Verdammt, das ist glatt,” I came up with this phrase using Google Translate. Google also came up with “Marius White – a member of parliament to touch.” Somehow, I don’t think this is the correct translation.

I love the repeating background, the home page TITLE tag of “home” and the multi-colored text.

spd-engenhahn

Submitter’s comments: Uh…what gives with the light text?

Vincent Flanders’ comments: If #666 is Satan’s CSS and violates the W3C’s guidelines on contrast, then TechChrunch Disrupt’s destroys it with text that is #888–33% more Satanic. The regular TechCrunch site uses #000, your standard black text. I read TechCrunch at least 3 times a day. I won’t be reading future Disrupts’

TechCrunch Disrupt