The 20 Worst Websites of 2011: Second Quarter Contenders
and How These Sites Relate to Your Website
NOTE: The final rankings for the year have been established. I've left the "losers" behind and removed commentary from the sites that "made the big time." The winners can be found at:
The Worst Websites of 2011
The Worst Website Navigation of 2011
Worst Over-The-Top Websites of 2011
Original commentary: We have some big name organizations showing up—Pine Sol, State of Utah, Trader Joe's and Xerox. In fact, it's possible that Xerox will be the Worst Website of 2011 because their site is just awful.
It's really easy to look at a site on this list, laugh and say, "My site must be OK because it doesn't look like any of these sites."
Your site might not look exactly like these sites, but there are certain bad design techniques you might be sharing with our contenders that are serious mistakes—mistakes like the ones that show up on Web Design Checklist 1: 165 Mortal Sins and Web Design Checklist 2: 83 Potential Mortal Sins.
I've spent a great deal of time specifically identifying many of the areas where these sites go wrong. I'm sure I've missed plenty from my lists, but it's a start. I'm trying to teach you to fish
19. Marvelous Muggs
NOTE: Looks like the site is dead. Comments apply to original.
Vincent Flanders' comments: Just another poorly constructed restaurant site. I'm especially fond of the fact that the first menu item on the left is blocked. Not all the graphics are links. Some are and some aren't, which is very confusing.
Other comments: When I go into a bar/ restaurant and sit down I reach for the menu. The menu should list everything available for consumption. I probably don't give a whit about the proprietor because I've never met him. I prefer an eatery without a blast of loud noise from a jukebox. So where's the damned menu? Why do I have to dig for it among barely legible page links scattered around the screen?
Don't you just love it when a page has a banner almost half the size of the page that you have to scroll? Does a restaurant really need a mission statement? Geez, the damned music file is stuck. I'm sure you're thrilled to learn that the incandescent bulbs have been removed and replaced with mercury-laden, compact fluorescent bulbs. The allergies page does not open. The directions page uses the usual crappy maps instead of a Google Earth placemark. The menu is on a PDF, it's nearly unreadable and requires vertical scrolling - seven effing pages.
Here are some of the web design issues your site might have in common with Marvelous Muggs:
- Site has a sound file automatically play in the background when a web page loads, (Video) but we're not a record label or musician. Bars don't count. There's also the issue of paying royalties for music used.
- You can't read the navigation. (I know what you're thinking: "How is this possible?" Trust me and click the link. (Screenshot is displayed at original size.) As I mentioned in my commentary, the first menu item on the left is blocked.
- Site doesn't make them look like credible professionals (video on the topic). People will not do business with a company if it doesn't look professional. Remember: Professional Website = Trust.
- OUR SITE USES LOTS OF WORDS IN ALL-CAPS.
- Site has a mission statement or a link to a mission statement on the front page (non-profit's are exempt). Marvelous Muggs' Mission Statement says nothing but what you'd expect.
- Pages have too much / too little white space. In this case, it's black space. Another example of too much white space.
- It looks like they've never conducted user testing. Obviously, this site never asked anyone outside the organization to look and comment on the site. Marvelous Muggs
Here's a version of Marvelous Muggs at Internet Archive - IA does a crappy job of capturing websites.
17. Virginia Stucco
Vincent Flanders' comments: Periodically, I'll take a look at an old Daily Sucker to see if it's been fixed. Often, they're fixed. Often, bad elements are just shuffled around like deck chairs on the Titanic. I originally featured Virginia Stucco almost 10 years ago when it had 17,159 visitors. Ten years later there have been 29,451 visitors. If you just saw 29,451 visitors , you wouldn't know if that number were good or bad. Actually, it's bad because it means a little over 3.5 people per day visited the site. On the other hand, if all 3.5 visitors purchased something, it might not be bad. As I often say, “It depends.”
Here's a side-by-side comparison of the 2001 and 2011 versions of the site. You can see that, for the most part, they rearranged deck chairs.
Other comments #1: Now why the HELL would someone want to make it hard to read their contact information? The phone number and address are *flashing* in Firefox.
Other comments #2: I really liked the legal disclaimer at the bottom of the home page:
This site and it's contents are the sole property of Virginia Stucco Co.© unless otherwise noted and are protected by domestic and international copyright laws.
First, learn what the difference is between it's and its. Second, exactly who might ever want to steal anything from this site, I'll never know.
Other comments #3: I just launched 5th generation of our website. Traffic and leads jumped (again). Imagine what these guys could do if they tried.
Here are some of the web design issues your site might have in common with Virginia Stucco:
- The logo looks like a bad scan of a business card. Well, the business card isn't the logo, but they actually have two business cards on their home page.
- They have not eliminated unnecessary design items. Ugly background image, cheap clip art, animated GIFs, counter and on and on.
- Site uses underlined text. (Only links should be underlined.)
- Don't put flags on your website unless you're a government agency. Wait a minute. Scratch that. Even the U.S. Senate knows better than to have a flag on their website. Hell, even Michele Bachman doesn't use one. Nobody is going to buy your products because you have a flag on your website. Animated flags condemn you to the lower reaches of bad web design hell. This site has two animated flags and the Great Seal of Virginia.
- Site doesn't make them look like credible professionals (video on the topic). People will not do business with a company if it doesn't look professional. Remember: Professional Website = Trust.
- Site uses animated GIFs. (Site)580
- Hit counters.
- Site uses an ugly background image or an image that looks like it came from 1995. This site uses one of the arch type bad background images. This screenshot shows other bad backgrounds.
- It looks like they've never conducted user testing. Obviously, this site never asked anyone outside the organization to look and comment on it.
16. State of Utah's New Website
Vincent Flanders' comments: The State of Utah's new HackTML5-based web site is interesting. It's a marginal Daily Sucker, but it provides an opportunity for us to learn from websites that cost lots of money and are cutting edge. I call it HackTML5 instead of HTML5 because you have to use all sorts of hacks to make HTML5 work. Then again, almost any HTML is hacked to some extent (thank you, Microsoft Internet Exploder).
If I scroll down the home pagein Google Chrome, I can't get the bottom menu to stay in place like I can with Firefox 4.
There are a lot of behind-the-scenes issues. Yslow gives it an F (40) while Page Speed gives it a 74. (Page Speed always grades on the curve. Earlier versions were tougher than Yslow, but now they're pussycats. BTW, 40 is the lowest score I've ever seen. Even the ridiculously crazed format of TechCrunch gets a 48.) The site isn't using the asynchronous version of Google Analytics, tsk tsk. There are 15 separate Javascript files and 4 external stylesheets. Here's a screenshot of the Yslow report.
The material on the “Highlights” page scrolls too quickly. I read at a reasonable speed (I yam a kollege gradiate), but I can't keep up.
Clicking on “Highlights” or “in Utah” or “News” brings up a scrolling DIV. It's a nice concept, but it doesn't work that well on my iPad. Why does that matter, because they have a file called ipad.js that's supposed to make the site work on an iPad. It doesn't quite get it right. Here's what they say their site looks like on an iPad and here's what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen.
THE REAL PROBLEM WITH THE iPAD VERSION is the iPad must be in landscape mode. Putting the iPad in portrait mode causes major problems because the site prevents scrolling (user-scalable=0). Here's what you get for the home page when in portrait mode.
When you click on “in Utah”or “News” and you have a large portrait monitor, you get a repeating background. That sucks. It sucks because when you click “Search” or “Highlights” you don't have the problem.
They'll fix this—probably by the time you read this—but the Education page blows up in Chrome and Firefox, but not IE9. Hmm.
On the plus side, what they've done with content is pretty amazing.
Other comments:
- Home page = 1.2MB
- Very CPU intensive
- Does not work well in Firefox, Opera, IE < 8
- Weird scrolling issues in IE
- On a HD screen, requires you to maximize your window
- Are they trying to copy Microsoft Bing?
- Broken 'search' feature: Search for an expression containing spaces, on the results page the spaces are converted to "plus" signs. Click search again and the "plus" signs are then converted to %2B
- The search feature does not accept special characters ?
Here are some of the web design issues your site might have in common with the State of Utah:
- Site uses a background graphic that repeats itself on large-screen monitors.
- Site doesn't work/work well on an iPad Here's what the State of Utah says their site looks like on an iPad and here's what I get on my iPad. Notice the cut-off text at the bottom. It gets worse. When I clicked “in Utah,” this is my screen. Support for the iPad is important because it accounts for an increasing % of PC sales—11% last quarter.
- It appears they didn't test to see if their site looks the same in the major browsers.
15. Sport Fishing with Dan Hernandez
Vincent Flanders' comments: Once again, “Where's the focus?” Dan has so many ads and self-promotional things going on that it's difficult to see where to go. It doesn't help that the contrast sucks on the top horizontal navigation menu so you can't read the links.
I love ads. My old man was in television broadcasting from 1948-1990, so advertising makes me happy. Hell, I even appeared naked on a full-size billboard to promote an ISP where I was employed. But there are limits to advertising and self-promotion. Basically, when your advertising gets in the way of your content, then you've gone too far. Dan's gone too far. If you don't want to visit the site, here's a screen capture.
Other comments: I'll probably remember his name for a day or so.
Restrictions on presentable web page size has a way of eliminating windy and flowery writing.
One should keep in mind that websites grow and it's better to introduce discipline to a website at it's start than to have to go back and refit every old page to a new format.
There is no reason to have a Google search box within the page.
Locating the page links at the top of the page has a way of wringing out oversize useless banners.
Some day it may be useful to construct a book from the narrative on the website, real difficult to do from a 2 inch scroll in an I-Frame,
The first consideration is the speed by which a visitor can view every page of the site. Placing the page links identically at the top of every page makes that possible.
Letter size paper is 855 pixels wide measured in Landscape mode, which allows for printing 4 pages of a book. The most common size flatscreen at the moment is 17", which allows 76 pixel wide thumbnails in the margins. His videos and ads could be combined into one page.
Here are some of the web design issues your site might have in common with Sport Fishing with...
- The logo looks like it was professionally made, but the quality is not very good. Your logo is extremely important. If you put a Dell logo on an IBM page, it seems to be believable. Your logo is what identifies your company/organization.
- The man from Mars cannot quickly find the focal point of the home page.
- 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 the background. Here's a video that discusses contrast. The contrast sucks on the top horizontal navigation menu so you can't easily read the links
- The home page is too long. They forgot that people skim. Here's an example from a radio station. Here's a cycling company,
- Poorly implemented frames.
- The banner ads (especially near the top of the page), are too close to graphics and links. People tend to ignore ads and they'll ignore your graphics. On this site, they'll ignore/miss the navigation (because of contrast issues).
- The site owner understands how the navigation works so s/he assumes everybody else understands.
- A site's navigation should tell you where you are, where you're going to go, and how to get back to the home page. This site's navigation doesn't.
- It looks like they've never conducted user testing. Obviously, this site never asked anyone outside the organization to look and comment on it.
12. Sunset Loft
Submitter's comments: Be sure to click through – if you can read the funky flashing font.
Vincent Flanders' comments: I'm going to skip the SplashPage and move right to the dreck. It's obvious to everyone but the site owner what's wrong. You can go to StumbleUpon and just about every website you'll find looks better than this one.
Other comments #1: Legible page navigation links placed identically on every page would do wonders.
Other comments #2: Not to mention the tremendous time savings it would be to NOT have to think up a completely new, unrelated to anything else, page structure and background image for each page....
Other comments #3: The image button Predators is spelled as 'Preditors.'
Here are some of the web design issues your site might have in common with Sunset Loft:
- Site says "Welcome to..." on the home page. The only exception to this is if you have a really cool graphic—something like the graphic below—then it's OK to use a "Welcome to" statement.
- Other types of content to avoid on the home page are what I call "Nobody Gives A Left-Handed Flying Farkle Outside Your Company" content. Content like Mission Statements (unless you're a nonprofit), history of the company and messages from the board/owner, directors, etc. Who effen' cares?
- Site uses a background graphic that repeats itself on large-screen monitors. Actually, it starts repeating on any monitor with a resolution greater than 800 x 600 pixels.
- Site doesn't make them look like credible professionals (video on the topic). People will not do business with a company if it doesn't look professional. Remember: Professional Website = Trust.
- 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 the background. Here's a video that discusses contrast. The contrast sucks on the top horizontal navigation menu so you can't easily read the links
- You can't read the navigation. (I know what you're thinking: "How is this possible?" Trust me and click the link. (Screenshot is displayed at original size.)
- A site's navigation should tell you where you are, where you're going to go, and how to get back to the home page. This site's navigation doesn't.
- The site uses animated GIFs. (Example)
- Our site has different looks on different pages or sections.
- Site uses background images on subpages that looks like they came from 1995-1999.
- Our site has outdated calendar information. (Example) This site's calendar ends in 2003.
- The logo does not look like it was professionally made. Here's another example and here's still another example. Your logo is extremely important. If you put a Dell logo on an IBM page, it seems to be believable. Your logo is what identifies your company/organization.
- Site uses a splash page (unless it's a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site, you don't need a splash page). Here's another video example.
- It looks like they've never conducted user testing. Obviously, this site never asked anyone outside the organization to look and comment on it.
11. Oshkosh Gymnastics Center
Submitter's comments: No words needed to describe this one.
Vincent Flanders' comments: I can think of a couple of words: big, Microsoft Office, white space, and eight TABLES. According to the Charles Proxy, the home page eats up 3.25Mb of bandwidth and WebPageTest says it takes over 20 seconds to load. It's ugly in a harmless way. On the plus side, the facilities look very, very professional. It's a shame the site doesn't.
Update: They've made some cosmetic changes. They've eliminated most of the pic turds on the home page. Here's a 3Mb screen capture of the way it used to look.
If your company is totally PC, then this site might be sorta-kinda not suitable for work because of photos of female gymnasts. Hell, how would I know what's politically correct? I've spent my whole life embracing the incorrect <grin>.
Other comments #1: Oddly, when I see this site, I see folks who think they can't find/afford a decent web designer. I am then reminded of an exchange between the characters in the movie "The Seven Samurai." Just replace "samurai" with "web designer"; you'll get the idea:
"But will samurai fight for us, just for food?"
"They´re awfuIIy proud! "
"Find hungry samurai!"
"Even bears come out of the forests, when they´re hungry "
There will always be someone who will build you a nice little site for next to nothing, if not free, if you will give them a little blurb on your site. Oshkosh isn't a huge place, but it's big enough to house a few hungry web designers.
Other comments #3: I prefer compact pages to scrolling and long-winded explanations. Compact non-scrolling page design introduces discipline into the website much like a remark box on many blogs, like Youtube. One learns quickly to trim the fat out of the narrative and use up the whitespace. Too bad they don't teach dance, it would be a lot less boring for the kids.
Here are some of the web design issues your site might have in common with Oshkosh Gymnastics Center:
- Site doesn't make them look like credible professionals (video on the topic). People will not do business with a company if it doesn't look professional. Remember: Professional Website = Trust.
- Site used Microsoft Office to generate their HTML.
- Logo is just text, which reeks of amateurism. Your logo is extremely important. If you put a Dell logo on an IBM page, it seems to be believable. Your logo is what identifies your organization.
- Site uses divider bars.
- Site uses background image that looks like it came from 1995-1999.
- Site uses cheap clip art ( here's an example) instead of high-quality web graphics. In case the example site changes, here's a screenshot.
- Site uses graphics for text.
- Our site uses scrolling, blinking, fading, or moving text.
- Our site doesn't physically reduce graphics using Photoshop (or other program). Instead, we take a 1200 x 800 pixel photo and manually changing the width and height attributes of the IMG tag to a smaller size. Page Speed calls this "Serve Scaled Images." On this site it would save 1.9Mb.
- It looks like they've never conducted user testing. Obviously, this site never asked anyone outside the organization to look and comment on it.
10. RecoveryPals
Submitter's comments: I didn't know these sites still existed…
Vincent Flanders' comments: You can always find sites like this at the sucky end of the street. Small text, lack of contrast, an image that's over 100K that's crammed down into a 95 x 86 JPG, a home page entitled “Untitled Document,” animated GIFs whose use make no sense, and plenty of other mistakes.
I dare you to click “Click Here.” It's not as bad as WebPagesThatSuck's Click Here, but it leads to boxed text where somebody has forgotten the meaning of the word “paragraph.”
Other comments #1: How is one supposed to recover by visiting a site which reminds one of the experiences one is attempting to recover from?
Other comments #2: Wow, talk about good intentions gone horribly wrong. Somehow though, it seems that recovery, at least with respect to alcoholism, is not something to market with t-shirts and cartoon characters, right?
Start over; really. This site does your cause no justice whatsoever. Put more thought into your idea, and if you cannot afford to pay a competent designer, many designers would create a simple, tasteful site free of charge with a modest plug for his/her services.
Other comments #3: I never quite figured out what the site is about. I thought it was about rescue dogs as a dog is pictured. Maybe it's for computer file recovery.
Here are some of the web design issues your site might have in common with Recovery Pals:
- The man from Mars cannot quickly find the focal point of the home page. Your eyes are drawn to the dancing people or to the gigantic word "STiTCH."
- Site doesn't make them look like credible professionals (video on the topic). People will not do business with a company if it doesn't look professional. Remember: Professional Website = Trust.
- The logo does not look professionally made. Here's another example. Your logo is extremely important. If you put a Dell logo on an IBM page, it seems to be believable. Your logo is what identifies your company/organization. On this site, it's confusing which graphic is the logo. Typically, the logo is at the top-left. That graphic has a bear or pig graphic. The middle might be the real logo.
- We have not eliminated unnecessary design items.
- We don't know which design items are not necessary.
- Our pages have too much / too little white space. Another example of too much white space.
- Site has multiple colored areas on the page.
- Site mixes and matches text sizes on the page. (Video on the topic)
- Site mixes text colors on the page. (Also see the video above.)
- Site uses centered text on more than just headlines.
- Links need to be clearly labeled. In this example, "Click here" is not enough information because you don't know where you're going to end up. (This link is NSFW, perhaps.)
- Site uses animated GIFs. (Example site)
- Our links are not informative. "Carol's Blog doesn't really tell us much. Who's Carol? Why should we care?
- Site is using hidden text. This annoys search engines who will penalize the page and your site.
- The site's navigation (on the subpages) consists of a BACK or RETURN button.
- Site has different looks on different pages or sections.
There are probably more, but I've probably spent as much time critiquing this site as they probably spent putting it together.
9. Great Wall of Maricopa
Submitter's comments: The Great Wall is one of the only food choices we have in Maricopa – in my quest to find their menu online, I stumbled upon this glorious site!
I was greeted by this monstrosity of a website. Please be sure to have your sound on to enjoy one of the worst looping MIDIs in the history of MIDIs.
Don't forget to check out the Lunch SPECAILS.
P.S. Their house fried rice really IS delicious.
Vincent Flanders' comments: It's possible the site could induce seizures. Be careful.
I also am fond of COUPON'S (should be “Coupons”). On the “House Specials (spelled correctly) page, the prices are impossible to read. Actually, the prices on all the pages are difficult to read. Didn't anyone look at the site when it was completed?
As someone pointed out, they also have a "Junch" Buffet
Here are some of the web design issues your site might have in common with Great Wall of Maricopa:
- Our site has a sound file automatically play in the background when a web page loads (Video), but we're not a record label or musician.
- Your site isn't hosted on its own domain, but by some service.
- Our site is Flash-based (and this is what Flash sites look like to people without Flash or who are looking at it on an iPhone or iPad.) Flash on a website is dead, dead, dead. Steve Jobs twisted the knife into its festering corpse.
- Our site's navigation is Flash-based. (Here's the actual site)
- Visitors can't read our text because it's too small or it's difficult to read and comprehend because it's too large. In this case, the font is difficult to read.
- Typos—especially too many typos. It's even worse when the typos are in Flash documents. They're harder to fix.
- Contrast. There isn't enough contrast between the text and the page.
- Site didn't hire editor to proofread spelling, grammar, capitalization and content.
7. Trader Joe's
Submitter's comments: The Products page at Trader Joe's tells us to “Please select your location and we'll show you all the new goodies available.” When you look at the page, you can't tell what you need to do to display the products.
Spoiler alert!!!!!!
You may want to see if you can figure out how to display the products before reading below.
It is quite counter intuitive as to what to do next because:
1) The page has a cutesy graphic that doesn't really tell you where to go.
2) Where you need to go is two frames up.
3) “Location” for a retail establishment is usually the one closest to you and not the state you happen to live in.
Vincent Flanders' comments: For those of you who learn best by seeing pictures, here's the Trader Joe's page in question, along with an explanation of the problem.
I can't understand how Trader Joe's could make such an amazingly bad mistake. This navigation is so illogical. I'm not going to look at arrows to try to figure out where to go. Put the navigation where it belongs.
5. Breakout Results
Submitter's comments: Not a spinning Earth, just a spinning moon with a rising sun.
A reminder of how that term “Flashturbation” got its start. At least they knew they needed to enable us to skip that nonsense.
Vincent Flanders' comments: Well, actually they have a Skip Intro button, but it's at the bottom of my laptop screen and doesn't show up. There are a lot of serious mistakes made here that were documented in Biggest Mistakes in Web Design 1995-2015.
1. Believing people care about you and your website. Some of the worst writing on the web is on this website.
Breakout Results, LLC is a highly qualified, proven, game-changing leadership team with an unrelenting passion for leading its client companies to a brighter future with higher standards of excellence, robust top-line growth–and superior bottom line performance.
This is crappy, cliche-filled writing and everybody except the authors of this site know it. Visitors to your site want their problems solved. This text is made for the company–not its customers. People don't give a left-handed flying farkle about you, your business, or your mother. They want their problems solved now.
This mission statement crap can be summarized as, “All babies must eat.”
2. A man from Mars can't figure out what your website is about in less than four seconds. I read a lot of the first page. I don't have a clue what these people do and how they can solve my problems.
4. Using design elements that get in the way of the sale. Flash fits the bill.
9. Site lacks Heroin Content. There is nothing on this website that will make me want to come a second time.
13. Misusing Flash. You should read the article, but the bottom line is there's nothing here that couldn't be done better with HTML and CSS.
Other comments #1: Psychobabble (excerpt from from Wikipedia):
…prose using jargon, buzzwords and highly esoteric language to give an impression of plausibility through mystification, misdirection, and obfuscation…
There is so much psychobabble on this site that if you trim away the meaningless drivel you are left with a group of largely blank pages.
Other comments #2: Wow. That sucks so much it's ridiculous. WHAT DOES THIS COMPANY DO?!?!?!
Here are some of the web design issues your site might have in common with Breakout Results:
- We've designed our site to meet our organization's needs (more sales/contributions) rather than meeting the needs of our visitors. (Video)
- Our site tries to tell you how wonderful we are as a company, but not how we're going to solve your problems.
- It takes longer than four seconds for the man from Mars to understand what our site is about.
- Our site doesn't make us look like credible professionals. (Video) People will not do business with you if you look like you're not professional. Remember: Professional Website = Trust.
- Our site is Flash-based (and this is what Flash sites look like to people without Flash or who are looking at it on an iPhone or iPad.) Flash on a website is dead, dead, dead. Steve Jobs twisted the knife into its festering corpse.
- Our site's navigation is Flash-based. (Here's an example site)
- Our site uses a splash page (unless it's a liquor, porn, gambling, adult, tobacco, or a multi-lingual / multinational site). (Video)
- The content is not understandable by humans and is full of marketing-speak, or jargon, or unexplained acronyms. Unfortunately, the company is out of business (probably because nobody could understand what they were doing. Here's some of their crazy language:
[Company Name} is a multi-platform vertical portal matrix to add value to the consumer Internet experience by simplifying the convergence of brands and services. The company is currently developing the interest of strategic partners and is raising capital for expansion."
- The content is not engaging.
2. Bill O'Neill – Bucks County's “Voice of Reason”
This site made #9 on The Worst Over-The-Top Websites of 2011.
