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

Site: First Bank

Submitter’s comments: I deal with First Bank of Strasburg, Virginia and wonder why they wasted so much valuable landscape at the top of the screen on their “new and improved” site. It’s bad enough on my desktop computer or a normal size laptop, but when I fire up my handy little Acer Aspire One just about everything is below the fold.

I really wonder how many of us dumb old country folks need the included instructions on using the site. I doubt that everyone who uses the site thinks it’s an improvement.

The W3C validator counts 23 errors on the main page. At least I know that none of my students created the site.

I do like the way they used CSS to get the effect of an inline frame without using the iframe tag:

#scrollable {
color: #4D4E53;
padding: 0 10px;
width: 544px;
position: absolute;
top: 350px;
overflow: auto;
height: 320px;
}

… but it still looks like an inline frame and there are two vertical scroll bars on several pages! Usability!!!

If you click on Online Banking Login, you can’t get back to the main pages without knowing how to use the back button to jump back more than one page. Cute.

I don’t know if this qualifies as a Daily Sucker, but I feel better after analyzing the site!

Vincent Flanders’ comments: Hmm. I only got 9 validation errors and 4 warnings when I checked the site using http://www.therespowerinone.com, but when I added index.html, I got the same 23 errors as the submitter found.

I’d like to add that there’s no need to welcome people to your web site. They’ve made the commitment — they are there so you don’t have to try to charm them.

I’ll take your word about the CSS. I don’t like the white text on the red navigation bar. It looks cheap and ugly.

While the site isn’t a car wreck on the Information Highway, it has enough interesting mistakes to qualify as a Daily Sucker.

First Bank

Site: MedFlight International

Submitter’s comments: You can have too much minimalism. Check out the DOCTYPE. If you try to validate it through W3C, it gives up in confusion.

Vincent Flanders’ comments: I took a look at the source code, which said the page was created using HoTMetaL PRO 5.0. Wow. Talk about a blast from the past! I had completely forgotten about the product. Seems like I owned a copy way, way back in a galaxy a long time ago.

The truth is, the company doesn’t need much more than what this site (a single page, as far as I can tell) provides. It would be nice if the text were larger, we didn’t have the gray bars, and had better graphics and logo.

MedFlight International

Site: Keyence

Submitter’s comments: I have an interesting problem here. I want information on a Keyence EM-005(P) proximity sensor. I went the Keyence’s web site, and I searched my way in. I am in Canada, but I tried this through their USA route as well.

I found the proximity sensor page and I found the EM Series. The gratuitous Flash animation did not get in my way.

I clicked on Catalog and a form came up demanding that I sign up on their site. I cannot get information on their product without leaving all sorts of information on me! At the very least, this is inconvenient. Calling this a civil rights issue is a stretch, but I would rather not provide them my email.

If they want to sell proximity sensors, they are going to have to be more eager to tell me about them.

Vincent Flanders’ comments: I understand why the company wants you to register to get a price quote. Their products are not something you go and buy on a whim. On the other hand, asking people to register to get a four-page, 159Kb PDF catalog seems like a lot to ask. The folks at Keyence need to read The $300 Million Button and decide whether or not they should continue to ask potential customers to register to get information.

To show you how it should be done, MailChimp offers a 65-page PDF guide (1.27Mb) called Designing, Coding & Delivering HTML Email and all you have to do is click a link. No registration required. I have a warm spot in my heart for these guys and I don’t know anything about them.

Since I don’t have a clue about the industries Keyence serves, I can’t tell if the site is easy to navigate or not. To me, it looks like a nightmare. I’m going to trust that if you understand what they provide, you’ll be able to navigate; otherwise, it’s a disaster.

Zen Habits(for those who don’t like to read and just want the link)

Vincent Flanders’ comments: Recently, a well-respected site for the web design community cited a number of sites for their wonderful design. One of these sites intrigued me, but it was a site for a web designer and I don’t critique these types of sites to avoid any appearance of conflict of interest. However…

…the image above is a full-size, high-resolution screenshot of some of the text (with most of the customer name redacted).

When I went to the site I was hoping for a religious experience and I was not disappointed. I started speaking in tongues. Unfortunately, the web site made me speak in Tourette tongues. Lack of contrast makes me unhappy and sets me off.

Later in the day, I went to my RSS reader and saw that the Zen Habits blog was running a story called Would You Rather Be Right or Happy? It’s a great title so I clicked the link. As soon as I saw the text, I knew something was wrong — and my regular readers will know what I knew was wrong — the #3 Biggest Mistake in Web Design 1995-2015 — Contrast, Dammit. I went to the AccessColor web site to make sure I was right.

Of course, I was right — and that made me happy! Who says you have to choose between being right and being happy?

This screenshot shows you part of AccessColor’s report. Here are the important parts:

1. Both color difference and color brightness do not meet the recommended standard for 8.99% of the total text.
2. Either color difference or color brightness does not meet the recommended standard for 78.77% of the total.

Text on background with images is for 0.03% of the total text.

Zen Habits – Would You Rather Be Right or Happy?

Narrabeen Beach Surf Life Saving Club(for those who don’t like to read and just want the link)

Submitter’s comments: Now this site sucks!

Vincent Flanders’ comments: Someone once wrote in the comments, “1997 called and they want their web site back.” I think that’s applicable to this site. The frames look like they’re from 1997 and some of the links take you to strange-looking sites like Surf Life Saving Northern Beaches. Talk about small text!

Narrabeen Beach Surf Life Saving Club

There’s a new, FREE stock photography site called PhotoXpress. Here’s an article about it.

Piwigo (for those who don’t like to read and just want the link)

Submitter’s comments: Piwigo is photo gallery software.  Their site combines ugliness and un-usability to drastically poor effect.

Vincent Flanders’ comments: Nicely phrased. God, I love clever writing.

Basically, almost everything on the site is difficult to read. Here’s a screen capture of what the Piwigo home page looks like on my monitor. Notice how the navigation is all over the place.

Their Remote site usage page is a contrast nightmare. According to AccessColor, both color difference and color brightness for the Remote site usage page does not meet the recommended standard for 90.74% of the total text.

The site is a classic example of Mistake #15 from Biggest Mistakes in Web Design 1995-2015 — Mystical belief in the power of web standards, usability, and tableless CSS. On the bottom of their Documentation page, they have the XHTML and CSS standards-compliant buttons. Great. They’re standards compliant, but you can’t read the freakin’ page.

Piwigo

Triad Forensics (for those who don’t like to read and just want the link)

Submitter’s comments: As a designer, I am a huge fan of your site. I often reference your site to try to talk the clients I work for out of bad ideas — sometimes it works; sometimes it doesn’t. Anyway, I came across this web site the other day. Just click around a little and you’ll see why I suggested them.

Vincent Flanders’ comments: “Friends don’t let friends design Web Pages That Suck” was a bumper sticker I came up with years ago. I’m glad designers and other concerned citizens are trying to make the web more beautiful. Well, less ugly. Here’s a tip, when someone wants to make a bad design choice say, ” That’s fine, except there was this site featured on Web Pages That Suck that had that same feature. I don’t think it was on the Worst Web Sites of 2008 list, but I remember seeing it somewhere.”

Triad’s home page background image is distracting, the logo is well-made but cheesy looking, we’ve got a link counter visible, and we also have a mission statement. Mission statements are only necessary on non-profit web sites. This site’s Mission Statement is “to provide quality training and consulting services to our clients.” Duh. Of course. It’s like saying, “All babies must eat.” It only states the obvious.

Speaking of the obvious, obviously Triad’s method of returning to the home page from the Course Registration and Articles pages isn’t helpful. Let me explain visually:

Since I violated one of my central tenets — Don’t use graphics for text — let me translate from graphic to text:

The BACK button is NOT your web site navigation.

The Instructors page is sort of an homage to Marcel Proust. Instead of one long sentence, they believe in one long paragraph. Seriously, you need to break up a paragraph when there’s more than one thought.

The biggest problem is that EVERY page (well, every page I looked at) has a completely different style and could easily be mistaken as belonging to another site. Some pages use a red, white, and blue motif. Even U. S. Government web sites don’t use red, white, and blue. There’s nothing patriotic about forensics. Oh, and “Page Title” is NOT a good TITLE tag.

Triad Forensics

Going to watch Tony Fulgham play at Piecora’s. Saw him when he opened for James McMurtry.

Now that I’m living near the Oregon coast, I’m going to more Seattle concerts than when I lived there.

Christian Goth (for those who don’t like to read and just want the link)

Submitter’s comments: I would like to nominate ChristianGoth.com.  While I feel like this site fills a very important niche in the Gothic community and has an important ministry, it falls prey to a number of problems.

1) The page was clearly created using Front Page (an older version on can assume)

2) None of the attached pages do not have the same background  as the main page.  While many have plain black backgrounds (acceptable) some such as the link for “the Original Blue Rose Society” are completely different.

3) There is no consistent font size or style – ESPECIALLY with headers

4)  It falls prey to something many goth sites do: use bright red and purple on a black background.  While these are colors typically appreciated by the goth community, they are a killer on the eyes no matter what background they are against.

5) Music!  While the music on the main page is not all that bad, the Midi song on “the statement of faith” page is abysmal.

6) Random images with text printed on them – mostly at the bottom of a long main page.

7) Navigation is all but absent except for a “main page” link at the bottom of many very long pages.

8) Navigation on the main page seemingly random with only a semblance of order.  While I do visit the page often, I still find myself doing a Cntrl+F to search for the term I want so I don’t waste precious time searching for the one link in a million.

I find myself very surprised at the lack of good web site design among the Gothic community (i.e. goth.net is a well known staple in the net community but is pretty horrific color wise).  For a community filled with intellectuals, artists, and more than a few computer geeks I do not understand how I have yet to see a well designed gothic site.  Even the stores (i.e. The Velvet  Moon Bathery fall prey to the over use of bright red against black or marbled red/purple backgrounds.  It is rather ironic since Velvet Moon Bathery is about Victorian Inspired Gothic Elegance, and yet the site design does little to indicate this.  

The Best Gothic shop site I have found is The Goth Rosary, which has a simple, yet easy-to-read main page.  It falls short though once you enter categories, by presenting very loooooong lists of products.  It is sites like this that would better benefit from some of the cyberstore designs that hosting companies offers. 

Vincent Flanders’ comments: I think the person who submitted the site covered many of the problems. I’d just like to add that I find the centered text less than inspiring. Initially, I didn’t see the links on the home page, as my screen capture demonstrates.

Christian Goth

Vincent Flanders’ comments: It’s me!

Don’t you just love typos? I’ve made some doozies in my time. When I worked in a Word Center I typed up “Must keep a breast of current trends” instead of saying “Must keep abreast of current trends.” Click on the image below to see a larger, more readable, screenshot.

Web Pages That Suck

Harvard University(for those who don’t like to read and just want the link)

Vincent Flanders’ comments: A couple of days ago I mentioned that Harvard University didn’t understand the concepts of DNS and/or redirection. Today, I’m making them the Daily Sucker because they don’t understand the definition of contrast.

I ran the home page through AccessColor and the report said:

Both color difference and color brightness do not meet the recommended standard for 10.87% of the total text.

Either color difference or color brightness does not meet the recommended standard for 23.37% of the total the text.

Here’s a screen shot of the full report. Mileage will vary because the home page changes frequently. This is a screen shot of the page I used to generate the report.

Oh. Harvard University uses Mystery Meat Navigation. I told you MMN was evil. Obviously, Harvard has turned to the dark site. You’ll find it under the main picture. At least they’re nice about it. You don’t have to click to see each news item. They’ve set it up so the four news items rotate.

Harvard University

SAVEMCINTIRE(for those who don’t like to read and just want the link)

Submitter’s comments: Here’s a good candidate for your “Pages That Suck” web site. It’s from Charlottesville, Virginia, and it’s called “Save McIntire” or something similar. I really can’t tell. At any rate, although recently constructed, this page seems to exist at some internet moment in 1995 — some very horrible moment.

Vincent Flanders’ comments: This site’s text issues of remind me of the Marijuana.org web site. What a classic.

First, there’s no logo. Then we have all sorts of text problems — large text, medium text, smaller text, etc., which are a result of the 118 FONT tags on the page. It’s a mess.

About 3/4 of the way down the page are a bunch of images of girls playing softball. The problem is the one we see all the time: the pictures are large and they’ve changed the HEIGHT= and the WIDTH= attributes to make the images fit in a smaller spaced. Unfortunately, the file sizes don’t change. I’m going to assume (perhaps incorrectly) that the site was created on a Windows machine. Here’s a link to RIOT, a free image optimization tool for Windows. There’s also Smush.it, which is an online optimizer anyone can use. The folks who created this site need to use them to fix their images.

SAVEMCINTIRE

Status Tombstones(for those who don’t like to read and just want the link)

Submitter’s comments: This site has everything it should not have.

Vincent Flanders’ comments: Nicely phrased. It’s not quite true because there are at least 100 web design mistakes the site isn’t making, but I understand what you mean.

The biggest mistake that I want to discuss — and “big” is the operative word here — is the logo on the Specials page is actually 1301 x 921 pixels and weighs in at 400,030 bytes. Interestingly, it isn’t being loaded directly, but by an XML file called “filelist.xml.” This file was created by Microsoft Office or to be more specific, Microsoft Word 11 — and that certainly is a big mistake. Because of how it’s loaded, you can’t see the image’s properties. Very, freaking strange.

The Specials page is very strange in another area. If you click one of the two tomb-thingies, you get the picture of the other one. Also, all the sub-navigation consists of a link entitled “Back.” This doesn’t bother me a lot because there’s so little content on the page. What bothers me is that when you go back to the home page, it takes forever to reload the logo. While 69.72 seconds may not be a lot of time when you’re dead, it’s a lot when you’re still alive and waiting for the graphic to load.

I’m not sure about the company name. Is it Status Tombstones? The TITLE tag just has the URL.

Status Tombstones

http://harvard.edu/ doesn’t work

http://www.harvard.edu/ works

In case Harvard fixes it, here’s a screenshot,

BigBrands.com.au(for those who don’t like to read and just want the link)

Submitter’s comments: This is a doozy.

Vincent Flanders’ comments: You’re absolutely right. We’ve got tons of design flaws ranging from FlashSplash page to a talking lady, to multicolored text, to a section that explains the navigation (if you have to explain your navigation, you’ve already lost), to music files, and to links that go to the wrong place (the “Click Here to View Turbo Lock Catalog” takes to freeimagehosting.net). Huh?

The grammar and spelling errors are what drive me crazy. Didn’t anyone run a spell check?

Example #1
Example #2

BigBrands.com.au

Environmental Justice in America Conference(for those who don’t like to read and just want the link)

Submitter’s comments: I heard about this great conference on environmental justice and found the web site so I could forward to others. But after seeing it, I don’t think anyone would get too excited after looking at the site. I can’t put my finger on exactly why it sucks. Just looks amateurish and plain.

Vincent Flanders’ comments: This is an important topic, so I’ve made a video about meeting your users’ expectations.

Here’s a link to the YouTube video
Here’s a link to a high-def version

Environmental Justice in America Conference

Cheap Batteries(for those who don’t like to read and just want the link)

Submitter’s comments: Apparently this place has good prices on batteries and, presumably, good service since they’re linked by someone else.  They must keep their price low by not spending on their web site.  Not much grouping, no menu, no order, and a format that reminds you of the 90′s.  The only thing missing is flashing animations – thankfully absent or I wouldn’t have stayed on the page.

Vincent Flanders’ comments: This site reminds me of MSY Technology, one of the contenders for Worst Web Site of 2009. Unlike MSY’s minimalist web page, Cheap Batteries weighs in at 1.5Mb. I’m pleasantly amazed that you can order 12,000 batteries at one time. It wouldn’t take much effort to whip this site into shape, but I suspect the site owners like the look.

Cheap Batteries

The Art of Living(for those who don’t like to read and just want the link)

GlobeGuy’s comments: Don’t ask how I found this one. But not only is hideously ugly, it also has a really stupid globe on the home page! It’s worth visiting a few of the inside pages, because each is ugly in its own way. For example, the background of each is a different horrible color. I particularly like the page labeled “Blogs,” where you’re instructed to Select Desired Author and only one author is listed.

Vincent Flanders’ comments: It’s a great URL (artofliving.com) that would be nice for some furniture company or something of that ilk.

I’m not sure how often the site is updated. The Women’s Day 2007 page talks about “This year’s Annual International Women’s Day event.” The copyright notice says 1994-2009, but I find that a little hard to believe. (The first web page I ever created is dated April 6, 1995.) The domain record has a creation date of April 27, 1996, which is earlier than 99% of the sites on the net and is still an impressive date.

It’s ugly (check out the Our Voice page) and I’m not sure what the site is about.

The Art of Living