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

Submitter’s comments: I just had the interesting experience of trying to find a pair of glasses on the Alfred Sung website. I lasted about three mouse clicks into the site and then was too puzzled to continue, so I thought I’d send the site to you instead. Here is yet another example of not only confusing Mystery Meat Navigation, but also a useless, pointless, unnecessarily annoying Flash menu system. Really? You needed Flash for this?

All I wanted was to complete a simple task: look at their catalogue of frames to see if I could find a replacement for the pair of Alfred Sung glasses that I used to own and loved and happened to accidentally destroy last week. I have a general idea of the design I want (in fact, I even had a model number on the old frames that I was hoping I could look up). I expected I could go to their site and say, “Hey, show me all the women’s half-frames you’ve got and I’ll probably give you some money.” As a bonus, I was hoping they might even tell me what retailers in my geographic region carried their frames. The site didn’t really allow me to do any of that.

I have no idea what all those little square buttons on the main site are for and why they are just showing me random pictures of models instead of telling me something useful, and I can’t really be bothered to click on them all to find out. After a moment or two I realized there’s a tiny little, not-well contrasted link on the bottom right saying “Collections”. Call me crazy but if you’re selling eyeglasses your clientele probably doesn’t see very well and you might want to make your text easier to find and read. So I clicked on “Collections” and got… something? I think this is a perfume ad on a eyewear website? I thought I was going to get some eyeglasses collection?

According to that ad, I must be in love with Alfred Sung… well maybe, but I’m definitely not in love with their site.

Vincent Flanders’ comments: The Mystery Meat Navigation on Sung’s home page is really, really awful. As the submitter stated, Flash is used on the home page and my Firefox browser is set up to not display Flash, so there’s nothing.

As the submitter correctly noted, the site isn’t useful. It’s really just a badly built advert.

Alfred Sung Eyewear

Submitter’s comments: Though many government websites probably don’t have money to invest in web design, The Minnesota Board of Pharmacy website is particularly bad. I’ve taken a preliminary class in HTML and wonder if I could do better.

Be sure to check out the “What’s New” section with the flashing rainbow NEW after every item listed. Thousands of Pharmacy Technicians and Pharmacists have to access this website every year to renew their licenses and I keep hoping this site will get an overhaul.

Vincent Flanders’ comments: Yes, I’m sure you can do better. It’s a fairly standard 1996 design but with some interesting use of navigation. Normally, clicking the logo that’s at the top of a subpage will normally send you back to the home page. Nope. Home links are at the bottom of the page.

The site is usable on a mobile device. Well, it’s as usable as a FrontPage-generated page can be. I can’t imagine anyone filling out a form using a phone, but I guess it could be done. Maybe we should classify this site as a proto-responsive website. Maybe we shouldn’t.

Minnesota Board of Pharmacy

Vincent Flanders’ comments: There has been a lot of positive press around the Internet Archive’s Wayback Machine’s (IAWM) grabbing of its 4 billionth web page. Well, it should be negative press. The Wayback Machine does a crappy job of grabbing pages. It’s a freaking joke. I know you don’t believe it, but I’m restraining my condemnation of this sh*t-hole website.

Here’s The New Jersey State Policemen’s Benevolent Association’s home page back in May 2012 per the Wayback Machine. What a sucky job. There are graphics that didn’t get captured. Oh. Here’s the Wayback Machine’s first capture of the website from June 1, 1997. Sucks. IAWM claims the problem is with the site’s using robots.txt file to exclude graphics. I don’t know if this is true. If it is, then why are you grabbing the pages? They’re worthless without images.

Actually, I hate to hesitate to call these people liars, but I went to a recent Daily Sucker (MGBD Parts and Services) and looked for their robots.txt file and didn’t find one. It could be hidden (and it’s also a WordPress-based site) so maybe they’re telling the truth. However, Google doesn’t like graphics and text to be hidden by robots.txt and I can’t imagine any website would hide pictures on purpose (I can’t see anybody hotlinking because they want the images on their website). If you go to the IAWM 2014 MGBD capture page, you’ll see some pictures came through and others didn’t.

I don’t know what is causing the problems, but whatever is going really makes the site useless.

Here’s a helpful hint. If you don’t want your site archived by IAWM, there’s a page that explains what to do.

Internet Archive’s Wayback Machine

Submitter’s comments: I was checking out KickStarter when I ran across this gem.

Vincent Flanders’ comments: Ah. If you wanted to create a website that looks like what (almost) everyone says a website should look like in 2014, this site is it. The reason it’s here is because they make a mistake that’s wayyyyy to frequent: the didn’t check their site on an iPad (or You-Name-It device). If you don’t have a mobile device, here’s what Vessyl looks like. I’m sure it’s a simple CSS mistake—a text box was floated instead of sunk—and it may even be patched by the time you take a look. BTW, the problem doesn’t exist on an iPhone.

Vessyl

Submitter’s comments: I just stumbled on http://www.laeuft.de.  Nice site, if it was a printed leaflet for a fashion label. Unfortunately, on the first glance it looks to be in Flash (which it isn’t, the truth is much more scary than that), and what looks first like Mystery Meat Navigation turns out not to be a usable navigation system at all. No, you do not get to the next page, as there are no real pages, just this images animation, and navigating with these “things”, you only see a part of the site, because some “content” is in between those stopping points.

Fortunately, they tell you on the first “page” how to see their entire site: You should just scroll down to see more and to get the images go forward. This could be a challenge when using a notebook or an mouse without a scroll wheel, for keyboard scrolling seems to be disabled, and there are neither scrollbars or other  navigational elements. So I really had to plug in a scrollwheel mouse to get through. This nearly beats random mystery meat navigation, don’t you think?

When taking a look into the code, I was a little shocked to see this is not Flash, not a single bit of it. All these breathtaking animations really are made by plain HTML and  jQuery image sliders. And the main reason why there is no working navigation is: there are no different pages. It is just one single page, with JavaScript, CSS and  jQuery singling out what content you actually see. Which is technically kind of brilliant if you have search engines in mind (everything here is clearly indexable. Maybe that could even compensate the complete lack of relevant metadata like description or keywords). They really are using the latest cutting edge web technology.

Vincent Flanders’ comments: I agree. It’s pretty impressive. It’s a bit easier to use on a mobile device. You just swipe left or right. I can’t seem to find any internal links on the mobile or desktop. Is this a brochure?

Laeuft