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

While I love my friends, I hate how @#$!ing stupid they can be. Two of them wanted my input on their website and I had given them—I don’t know—20 or 30 different tips—which overwhelmed them. One of them then asked me to give them just one tip to help their website rank higher in Google’s search results (yeah). I refrained from saying “Nuke your site” and said, “Have your designer rename your image files to something logical and make your ALT attributes descriptive. Why? They were using Adobe GoLive (which is now Adobe GoneDead) and it messes up image tags.

Take a look at the recent wonderful 1:44 a.m. photo of me showing off one of the few T-shirts my wife thinks is funny.

Below is the code Adobe GoLive would have “produced.” I modeled the code after code found on their website.( I didn’t want to use one of their examples because I don’t want to embarrass them.)

<img src=”http://cdn-webpagesthatsuck.com/Images/WPTS_vf_12.jpg” height=”389″ width=”300″ alt=”” name=”WPTS_vf_12″ border=”0″>

WTF?

Here are the problems:

1. If you’re going to use a subdirectory for images, call it “images” not “Images” (minor issue).
2. The name= attribute is replaced in HTML5 (very minor issue, these guys are so far from HTML5—wait, so are most of us).
3. The border=”0″ attribute is not necessary (OK, should not be necessary and this is a minor issue).
4. The alt= attribute is blank. For many images, this is OK. For an image like the one above, no. If you look at #5 below, I just know that if the program filled in the attribute it would put something unintelligible. In fact, on many of their images the code reads [alt name=”WPTS_vf_12″] As we all know, the alt attribute may help Google when it indexes your site—there’s a lot of discussion on the web about this. The alt= attribute could be something like alt=”Vincent Flanders is a very funny guy” or anything that would be meaningful to your visitors and Google. (Major issue).
5. BIGGEST MISTAKE: GoLive (and there are other programs like it) automatically creates file names for images that are meaningless. In this case, the above picture is called WPTS_vf_12. That’s not going to help Google index your site. It needs to be called something like Vincent-Flanders-self-portrait or, more accurately, Vincent-Flanders-defies-the-laws-of-physics-or-he-rotated-the-image-so-you-could-read-the-text.

It’s been months and they haven’t changed it (or anything else as far as I can tell). Maybe now that this issue was mentioned in my interview in Chicago Business my friends might take it a little more seriously.

A very nice series of articles for all you small business owners. It’s an easy, smooth read — which is how good writing should be.

Featuring:

Q&A with design guru Vincent Flanders For 15 years, Vincent Flanders has turned the spotlight on poorly designed websites at his own website: webpagesthatsuck.com.

If your small-business website isn’t designed to sell, what good is it doing you? Since opening in 2008 in River North, Marbles: The Brain Store has grown into a $3-million business selling toys and puzzles to improve memory and critical thinking, primarily through its stores. Prior to a major overhaul last year, sales from the company’s website (MarblesTheBrainStore.com) accounted for less than 1% of revenue.

You don’t need to completely overhaul your website to boost your sales — tweaks can do the trick It’s not enough simply to build and launch a website. It must be updated and maintained. But you don’t need a complete overhaul to get results. Often small tweaks can help drive traffic or

Tips for turning web browsers into buyers Consumers have grown increasingly comfortable shopping on the web. Yet it’s estimated that less than 5% of website visitors turn into buyers.

Smart sellers embrace smartphones: Customers expect mobile access to your website now Today, millions of people access websites and download mobile applications from their smartphones and tablet computers, and the number is expected to grow.

Submitter’s comments: Although my background is more in graphic arts than UI design, I’m a big fan of your work.

My most recent encounter with crazy web layout/navigation comes courtesy of my health insurance plan.

After about my fourth login, I finally realized that the main navigation structure is composed of three columns (colors: puke green, blue, red) on the right side. The real beauty of this design is that the navigation columns leap from the right side of the screen to the left when clicked. And then they leap back when another column is clicked. I’ve never seen anything like this before. All the sliding columns are causing eye/mouse strain!

I believe this is one of the biggest health insurance companies in the country. How can the navigation of its web site be so convoluted?! Thanks again for promoting good web design. Your site has helped me a lot.

Vincent Flanders’ comments: Anthem Health is making me very sick. In addition to the bronchitis I’ve had for the last month, this site’s navigation is making me puke my guts out. If Christopher Columbus used navigation this bad, we’d still be living in Europe. This company isn’t like yesterday’s sucker, Unexplained Research, this is a big, supposedly serious company.

This site typifies a new plague on web design which I’m calling, for the moment, jQrap. jQrap is the crappy misuse of the jQuery Javascript library’s effects just for the sake of using the effects. Just like Flash gets misused by Flashturbators, jQuery is starting to be misused by clowns like me who aren’t programmers. Oh, yeah, there are a lot ob bad programmers writing a lot of jQrappy plugins.

There are also a whole host of contrast issues, but they pale to the navigation.

Initially, I’m calling this phenomenon “jQrap.” I might change it to jQueryCrap or jCrap or whatever great name you come up with in the comments or email.

Anthem Health

Submitter’s comments: The page renders slowly and recklessly. there’s horrible use of space. terrible layout. and it’s impossible to navigate—if there is navigation.

Vincent Flanders’ comments: It’s a better looking example of an Over-The-Top website. The definition of an “Over the Top” website is just like the definition of pornography — you know it when you see it. Over the Top sites generally deal with philosophy, religion, politics, end times, etc., but they’re generally not mainstream. The design is always “interesting.”

I have a fairly wide screen 1200 pixels, but not all the information fits in the screen—you have to scroll horizontally.

Unexplained Research

Submitter’s comments: This is the home page of a company that sells mostly esoteric chemicals to the research community. Personally, I think the Flash animation is an 8/10 on the Suckometer.

Vincent Flanders’ comments: That’s why I love my readers. I’d also give it an 8 on the Suckometer. If you just let the FlashSplash page finish, you’ll get a mission-statement sounding pile of platitudes: “Bringing You Products For Innovative Research.” The Flash animation of a chemical ring is also a waste of bandwidth and the color combinations are ugly. The text on the “About Us” page is obscured by a picture of some buildings or something.

To paraphrase the great American philosopher Carlos Irwin Estévez: “Duh. Losing.”

Toronto Research Chemicals