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

Submitter’s comments: At the following site, I wasn’t sure if they wanted to take me boating or cut my hair. Can you tell? And the background tiling looks even worse than the tiles on my kitchen floor.

Vincent Flanders’ comments: To truly appreciate the awfulness of the tiling, you have to go to the site (recommended) or look at a full-page screen capture (silly and a waste of 1.7Mb worth of bandwidth). I should note this screen capture was taken on a monitor that’s 1200 pixels wide. If your window is less than ~1067px, the tiling isn’t noticeable. Still.

There doesn’t seem to be enough contrast between the menu text at the top and the background. There are several tools web designers can use to determine the proper contrast. The article Easy Color Contrast Testing lists several.

Headhunter Hair Styling

Submitter’s comments: I see MSY has been previously nominated for the Daily Sucker and even received an honorary award in 2009. MSY have updated their site from early-90s out-of-date in 2009 to late-90s out-of-date now in 2014. They’re catching up! At this rate they may hit contemporary within 15-20 years.

Vincent Flanders’ comments: Nicely phrased. MSY would have made the regular Worst of 2009 list except they changed it enough by the end of the year so I thought the new version didn’t qualify so I put it on the Honorary list.

This screenshot of the 2009 MSY website shows why it sucked back in the day. The “worst” design element is that the page won’t fit on a 1200px monitor so you have to horizontally scroll. The home page doesn’t do very well on Google’s PageSpeed Insights (you also get to see a screenshot of what the page looks like on an Android device).

MSY Technology

Submitter’s comments: Is this a bad website?

Vincent Flanders’ comments: Yes.

I’ve loved magic since I was a little boy. In fact, I love it so much I refused to watch the TV show "Secrets of Magic Revealed" (or whatever it was called) so it’s disappointing to see this website suck.

The 15Mb home page takes 26 seconds to load (per WebPageTest). The pictures at the top—where the navigation should be located—are not links, which you would expect them to be. The navigation starts at around 640px from the top of the page. Yeah, that’s where all the web design books tell you to place the navigation. Oh, and the page is ~31,674 pixels long (on a 1200px wide monitor) and even with the monitor being 1200px wide, I still have to scroll horizontally. Not good.

The rest of the page contains the usual suspects of bad web design.

The Magic of Baltimore

Submitter’s comments: I stumbled upon something so unbelievably bad, well, I still can’t believe it. It’s the new site “Canada: A creative nation” made by the government of Canada.

Usually, you would expect an official government web site to at least look professional. This one illustrates perfectly how, when you try to “be creative”, breaking all usability and web design principles is a great way to distinguish yourself… indeed, this is a unique site, one that all Canadians can be proud of. :-)

Try the French version as well as the English one, so you get to appreciate this wonderful site in both of our official languages. By the way, none of the links a the bottom of the page are working…. some link to ‘#”, some link to non existing pages… nice :-)

Vincent Flanders’ comments: Oh boy. It’s bad enough it takes forever to load, but then you get some good old skeuomorphic web design. Like we’re idiots or something. Please take a look at the subpages and try to navigate in the rooms.

Canada: A Creative Nation

Submitter’s comments: Even a black hole doesn’t suck as much as the nbcnews.com redesign. You really have to view this atrocity to understand – that is, if you aren’t using FireFox on OS X because it won’t load in that anymore. Also complaints exist of it not working with Safari, or with Nexus phones.

This redesign has all the makings of the most epic website failure of 2014, and it’s only February!

Vincent Flanders’ comments: A lot of people submitted this site—probably because the NBC owns the rights to televise the Olympics here in the United States and people want to see streaming videos (they can’t unless they have a cable subscription).

I’m not terribly fond of the currently hip Card design technique, which is most often seen on Pinterest and is touted in the article Why Cards Are The Future of the Web as…well…the future of the web. On NBCnews the cards at least line up across each row and that’s better than Vevo where they don’t exactly line up. I know there are sites where the cards are all jumbled up, but I can’t find any at the moment. I find it hard to read Cards on a desktop monitor. You’re eyes are always scanning back and forth and I’d say it seems like Cards were meant for people with ADD except that I have ADD and scanning cards sucks.

I was pleased to discover that the site doesn’t use “infinite navigation” (the page goes on forever and the agony never ends) on the home page; instead, they have a “Load More” button at the bottom of the page. Unfortunately, this isn’t the case on most (all?) of the other pages. Click the menu icon and then click “Tech & Science” and you’ll be taken to a page that scrolls forever. That sucks.

The navigation gets much worse. Click on any story—I clicked on Report: Target Hackers Slipped In Via Vent … Maintenance Company and started reading. At the end of the story I was shocked to discover that other full-length stories about security followed. WTF? Are you kidding me?

I understand Card design can be really useful for mobile devices and that’s one of the points the “…Future of the Web” article touts. There’s only one problem here. I ran Page Speed on the home page and the mobile version scored 46/100 and the desktop version scored 66/100. Hell, my poorly designed (and I’m proud that it is) home page scores 83/100 on mobile and 94/100 on the desktop.

Oh, yeah. Check out the article, With one day to go, the official NBC Olympics app is a bit of a mess.

It’s going to be a long year.

NBC News