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

I hate forms. In fact, if I’m not mistaken, WPTS is a form-free zone. However, they’re insanely important for most sites and here’s “Best Practices in Form Design,” a free, downloadable, 133-page PDF (4.37Mb) from the guy who wrote the book on forms.

Download the PDF

Submitter’s comments: This is such an odd site. It’s part business, part personal and part political. On the business side, you actually have two businesses: reenactors sales and scuba sales.

I’m not from Mars but I’m still confused.

Vincent Flanders’ comments: So am I. This site looks like it was created in 1996, starting with the first two words on the site— “Welcome to.” Other charming elements from 1996 are the scrolling Javascript ticker at the bottom, the type of background image, the centered text, the Comic Sans font, blue border around graphic links, lack of links to the home page from the subpages, blocking right click on the Scuba page (on IE — it doesn’t work in Firefox or Chrome), horizontal rules, table borders, cheesy graphics (credit cards come to mind) and I don’t think purchases are handled using the https protocol.

BTW, the picture of the beautiful kids on the front is a link to a page that has nothing to do with these kids. Why?

Somebody needs to read my redesign checklists: Checklist 1 – Fatal Mistakes and Checklist 2 – Big Mistakes. The good news is the home page loads quickly. Page Speed gave is a 91 and Yslow gave it an 81.

Blockade Runner

I deleted Edge Entertainment because it might have an IFrame click-type Trojan that may “increase the number of visits to certain sites in order to boost the number of hits for online ads.” My browsers didn’t detect anything.

Today, April 20 — which is Hitler’s birthday — seems like a good time to talk about a disturbing trend in web design.

Read the article

An old high school buddy, Terry Schill, came up with a brilliant take about recent Twitter events: “Not bragging, but all of my Tweets are going into the Library of Congress….who would have known?”

Definitely NOT The Daily Sucker.

The best part of the Twitter deal is that everyone can now legitimately tell people, “I’m an author. My works are in the Library of Congress.”

Submitter’s comments: I found your site as part of the therapy I needed after a colleague asked, “Have you seen the med college site lately?” I’d like to draw your attention to our Medical College “redesign” in NYC.  It was bad before.  Now, I’m not quite sure what to say…

Vincent Flanders’ comments: How about saying, “It sucks.” I’m sure the graffiti on the front page means something to somebody, but that somebody isn’t me and it probably isn’t you. AccessColor says that Both color difference and color brightness do not meet the recommended standard for 9.7% of the total text. Tsk Tsk.

I ran the site through Zoompf’s Mini Performance Assessment Tool and was informed that Cornell Medical had the following problems:

Hopefully, the full report is still up. For a sucky web page, it had low scores on Page Speed (71) and Yslow (59).

I took a look at an older version of the Cornell Med home page at Archive.org and, yes, the new site is much worse. If you click on Departments, you’ll get one of those lightboxes with all the links. Choosing “Headache Center” sends you to a page where there are no (obvious) links back to where you came from — the home page.

Weill Cornell Medical College

Submitter’s comments: Long time reader, but first time submitter. I love fishing, and I stumbled across a link to this page on a fishing forum from someone who recommended the planer bobbers.

Check out the product page.

It’s supposed to be a really good product for catfishing in rivers, but how anyone manages to stay on the page long enough to buy it without having a seizure or running away screaming I don’t know.

Vincent Flanders’ comments: There are three articles (at a minimum) the designer of this site needs to read:

1. Breaking Up Large Documents for the Web – Part 1
2. Breaking Up Large Documents for the Web – Part 2
3. Breaking Up Large Documents for the Web – Part 3

The product page is breathtaking and by breathtaking I mean it’s like someone punches you in the stomach and you can’t breathe and so breathtaking is hard to do.

Besides all the graphics and text problems and everything crammed together, the music drives me crazy.

As I’ve recently theorized, crappy web sites load quickly and that will make Google happy.

Catfishing

Submitter’s comments: I have the worst page ever. Trust me and check this one out. I have seen most of the sites on your site — great site by the way — and this has to be up there.

What do you think?

Vincent Flanders’ comments: It’s pretty bad, but it isn’t the worst site I’ve seen. The major problem, of course, is contrast. I can’t read the menu links and it’s difficult and painful to read the text. It’s unfortunate, because helping kids to read is about the most important thing you can do.

In keeping with my recent rant about sucky web sites scoring well on their page loading time, Page Speed gave the home page an 88, while Yslow gave it a 72 (which is a grade of C).

Frog Reading

Speaking of testing your site’s performance (and I have been talking about it), try Zoompf’s Free Web Performance Assessment, created by Billy Zoompf (not really, he’s Billy Hoffman but I like calling him Billy Zoompf because it reminds me of Billy Zoom from the great LA band X). Billy is one of those fricking genius kids that we all wish we were. You can see a sample report of Porn.com “with extremely tiny pixelated nakedness,” which may make it NSFW.

Dreamweaver CS5′s new features http://bit.ly/bL64VM and version comparison http://bit.ly/9cPTJl aren’t exciting me.

As I said in a previous post Google is using your site’s speed in its web search rankings — kind of. It’s only partially implemented and only for English queries — right now. Search Engine Land has an excellent non-Google take on the matter.

OK, you’ve found out your site’s loading speed sucks, what do you do?

There are lots of things you can do to speed up your web site. I think the three steps you can take that will improve your site’s performance more quickly (and perhaps have the greatest impact on your site’s speed) are:

1. Remove as many f*cking third-party widgets as your boss will let you. Steve Souders’ Performance of 3rd Party Content article states:”Ads, widgets, and analytics are a major cause for slow web sites. P3PC is a project focused on analyzing the performance of 3rd party content. The goal is to find the key wins to evangelize to make 3rd party content faster.”The two worst offenders on his 6-item list are: the Digg widget ad Google’s AdSense. Obviously, Google won’t downgrade you for using AdSense.

   His list is far from complete (he’s just starting) and I’ve personally found that the Snap widget, Techmeme widget, Twitter Flash widget, and the Amazon widget that display books are all bandwidth hogs.

2. Cache your files— Add an Expires or a Cache-Control Header. Yahoo! covers the topic. Information on how to do it is difficult to find and implement. Most articles assume you are a professional system administrator with root access.Here are some articles that I’ve found useful for normal people:

   Sample Apache cache configuration
   Caching Tutorial
   Speed up your site with Caching and cache-control

3. Compress your web page components. As Yslow states:”Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%. Approximately 90% of today’s Internet traffic travels through browsers that claim to support gzip.”Here are articles that I’ve found useful for normal people:

   Use mod_deflate to Compress Web Content delivered by Apache
   Adding GZIP Compression To Your Site Via .htaccess

Redbot is an important tool to help you see details about your site. Here’s what you see when you visit my articles page and here’s what you see when you click check your assets (really important).

I also find Zoompf’s blog very useful and, of course, Steve Souders’ High Performance Web Sites.

Yes, it’s finally happened. Google is using your site’s page loading speed in its web search rankings — kind of. It’s only partially implemented and only for English queries — right now. Search Engine Land has an excellent non-Google take on the matter.

The Google article lists various tools to help you evaluate your site’s speed. Page Speed and Yslow are two addons for the Firebug plugin for Firefox. These tools are extremely valuable because they  analyze “web pages and suggests ways to improve their performance.” Performance is this year’s black.

Crappy looking sites. In my view, the problem with rewarding web speed is that lots of sites that are the worst sites and worst looking sites on the Internet might see an improvement in search results because they load faster.

Yes, I know that Page Load Time is a minor, minor factor. Still, it seems bizarre that crappy looking sites will get any kind of bonus for loading faster.

Sites That Suck – Ranked by Page Speed Score

Not crappy looking sites. The following is a list of some well-known sites:

Content Rich Sites – Ranked by Page Speed Score

Jeez. The New York Times scores lower than the turd pile called Yvette’s. Yes, I know content is rewarded.

Irony. I measured the page load speed of three companies who provide performance tuning. Very interesting results.

Three companies that perform Web Site Performance Tuning:

Since it’s my policy not to comment on web designers’ sites, I won’t comment on any of these 10 selections by iMediaConnecion. Let me just say “10 awesome agency websites” is their article title.

10 awesome agency websites

Not the Daily Sucker – Information Architecture TV: Wireframes

Check out the site. Content doesn’t suck.

Website Wireframe Lecture from Chrissy Kimball on Vimeo.

Submitter’s comments: “This page is not under construction” it says in the splash page.  Could have fooled me.

Vincent Flanders’ comments: WTF? WTF? WTF?

In the last 14 years, I’ve seen plenty of examples of stupid navigation. This may be the worst. This site’s navigation scheme is to web navigation what pedophilia is to the Catholic Church.

Maison Martin Margiela

Submitter’s comments: Here’s one for you.

Vincent Flanders’ comments: Government web sites are always problematic. There’s so much information, it’s often difficult to organize and there are various departments who feel they deserve prominent placement on the home page — and if everyone got the space they wanted, the home page would be eight miles long.

The strangest part of the home page is they’ve installed code so you can’t right click. The ancient Greeks, who coined the word “hubris” and knew hubris when they saw it, would be shocked at Camden’s overweening pride in thinking that these images are so valuable that anyone in their right mind would want to steal them. Heck, even crazy people know better. Hell, anybody who really wants them knows about 14 ways to get them (disabling Javascript is the easiest).

It really bothers me that if you click a link like “County Events,” you can’t click the logo at the top left and return to the home page. Yes, you can click the Camden County logo in the middle, but that’s not where people expect to see logos. BTW, two of my favorite singers (Joan Osborne and Rosanne Cash) are playing there this month.

If I’m not mistaken, there are contrast issues on the site map page and I wouldn’t be surprised to find them elsewhere.

The biggest problem with the page is “Where’s the focal point?” This would be a good page to use in an eye-tracking study. Jakob, are you listening? I tried to find “Departments” or “Services,” but I couldn’t find them. I settled on “Government” and was greeted with a letter from the Freeholder Director, which was not what I was looking for. Over on the left was a menu and the SIXTH item was “Offices and Departments.” That really sucks.

Camden County