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

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

This last group is pretty amazing and a lot of them will end up on the final list which is due out Monday, January 13. Catch the new responsive design and let me know if it doesn’t respond to you.

Worst Websites of 2013 Contenders: July through December

Submitter’s comments: If Lorem Ipsum is considered gibberish, what does that say for the bios for the floor installers at TriFloor.com?

Vincent Flanders’ comments: Obviously, they’re going to fix this mistake within hours of this post. This is one of those easy-to-fix mistakes that shouldn’t be made in the first place. Here’s a screenshot of all the installers that’s blown up 200% so you can easily the Lorum Ipsum text.

The other huge mistake is the text color—you can’t read the text when it’s at its normal size. Contrast where are you?

Triangle Flooring and Surfaces – The Installer Page

Submitter’s comments: Flash may be dead, but its legacy of suck lives on in HTML 5.

Vincent Flanders’ comments: Interestingly, it doesn’t look as bad on mobile devices (iPhone 4 and iPad Air); however, the problems show up on the web version. The site is into that HTML scrolling technique which is so annoying. Scrolling is really for dating sites because you’re excited about what you might find. On 1927, the excitement gives way to annoyance. There’s a down arrow which means you’re supposed to use this as a guide for scrolling. Mac users don’t open up full screens and in the above example it’s difficult to find the down arrow that tells you should scroll down.

There’s also some Mystery Meat Navigation (MMN)—see the image below—and we all know how much MMN sucks.

The HTML5 trickery shown on this site is becoming more and more common. Stop it.

1927 Events