1. A JavaScript Content Switcher That Works Without JavaScript – Impressive Webs
2. Five Reasons Why Landing Pages & Forms are More Valuable than Homepages – Performable
3. How To Use Google’s Free Online Hard Drive – BusinessInsider
4. Breaking Up Large Documents for the Web – Part 1
5. Breaking Up Large Documents for the Web – Part 2
6. Breaking Up Large Documents for the Web – Part 3
7. Customers Increasingly Intolerant With Slow Web Sites – PC World

Submitter’s comments: The gracious host starts his high pressure sales talk as soon as you get to his site. He even wants to “point out a few valuable areas for you to take advantage of.” Given his first impression, I was too scared to look any further. I’ll leave that to the professionals. Does this qualify for a new category of what not to do?

Vincent Flanders’ comments: It’s a variation of those talking people you see on Mr. Bottles or Connecting Point (video).

I was afraid that this site was going to degenerate into Guns Guns Guns (video). Thankfully, it didn’t. What gives with the large, black space in the middle of the page. Allegedly, it’s something called “Hacker Safe.”

It would be nice if the site used cookies so that you’d only hear the message once — on each page. Visited links don’t change color (hard to do on this blood-red background) so you don’t know what you’ve already looked at.

I love the “2 Day Shotgun Skill Builder” page. First, as soon as you go to the page, a video starts. Wrong. You’re never supposed to do that. Let people click if they want to see the video. Trust me. I’ve gone through the site and the videos and sound files really get on your nerves — especially when you return to a page you’ve visited. Second, the video shows a guy shooting a handgun instead of a shotgun.

Like so many sites, there’s so much information that’s poorly categorized. Oh, there’s too much text that’s too little.

Frontsight.com

Submitter’s comments: When I first saw this site and noted the dreaded “schemas-microsoft-com:office:office,” I figured it simply didn’t work well with Firefox. Not the case. It looks the same in I.E.

I am not certain there are any lessons to be learned here. This is simply stupid. On many pages the content simply starts half-way down the page due to a doubling of the side menu. Even if you are part of the slap-it-together-and-post-that-puppy crowd, it is hard to believe that no one noticed this on the damn homepage at least.

There are a couple of other problem (home page is named “Index”), but who cares?

Vincent Flanders’ comments: I always admire people’s inability to see the obvious. This isn’t one of the dreaded IE6 bugs that screw your site up but you won’t notice cause you don’t have IE6 on your machine situations. You can see it in about any browser you try.

Hobo.com

Submitter’s comments: ColoradoPols.com recently ran an article entitled The Worst Campaign Website We’ve Ever Seen.

Vincent Flanders’ comments: As readers of this site know all too well, just when you think you’ve seen the worst the Internet has to offer, you discover something else. Yes, their suggested site is bad (actually, it’s been improved — you should see the screenshot in the article). However, the worst campaign site for this year (so far) is George Hutchins for U.S. Congress. It ended up as #2 on my “Ugliest / Worst Over The Top Web Sites of 2009.”

Kennedy for Colorado

Submitter’s comments: Stumbled on this site.  Gave up trying to figure out the Mystery Meat navigation (good luck clicking some of the links…) and stumbled on out of there.

I respectfully submit it for your ah… consideration.

Vincent Flanders’ comments: Yeah, yeah, yeah. I know. It’s an art site, but we need to stop promoting these techniques. The good news is the “bubbles” don’t make bubble sounds (I remember hearing them on some site from the past).

Stop it already.

Studio Jan Melis

Vincent Flanders’ comments: When you’re young, you talk about the drugs you take. When you’re old, you talk about the medicine you’re taking. Once of the problems with taking medicine when you’re older is that you forget whether you’ve taken your pills or not — especially when you take several different medicines.

King 5 TV ran a news story about a new type of medicine cap that tells you how long it’s been since you’ve opened that particular medicine. They mentioned that local drug store chain (Bartell Drugs) would have the product available and that it was available from the manufacturer.

I looked at a lot of pages at Bartell’s site , but couldn’t find a search engine. Using the Google Toolbar, I searched the site, but only found one link and the link wasn’t helpful.

When I went to RX Timer Cap’s web site (the manufacturer of the product) and clicked the Buy button, I was greeted with the message “Page Under Development.”

Holy Mother of God. Do these morons realize how frustrating this is? I want your product but you won’t let me order it.

Obviously, there will come the day when they solve this problem (I hope). Here’s a video to memorialize the fact they’re Unclear on the Concept.

RX Timer Cap

Submitter’s comments: This site is guaranteed to give you a headache. The home page has a Javascript slideshow of different sized pictures that cause the footer to bounce up and down uncontrollably. You’ll notice the menu on the right has an orange border while the links are red. To top it off we have an awful bee cursor.

Vincent Flanders’ comments: I know how easy it is to screw up a Javascript slideshow. I screwed up the one on the home page (here’s what the adjustable slideshow looked like on my home page). Some bright person complained and I fixed it by setting the box height to a fixed value — 300px (here’s what the revised slideshow looked like). Today’s sucker bounces more than my box did because there is more size discrepancy in their pictures.

I’ve never bee fond of right-side navigation, but that’s a personal preference.

the bees knees

I ran into two articles about problems in using a CSS file for printing:

1. Browser Performance Problem with CSS “print” Media Type (December 2009)
2. 5c media=print stylesheets (February 2010)

It turns out that if you’re using a print stylesheet (shows up in the format <link href=”print.css” type=”text/css” rel=”stylesheet” media=”print” />), every other file has to wait to load until print.css finishes loading.

To get the full effect of the delay, I created a 583Kb print.css file — which may be the world’s largest print.css file — and placed it in the head of this HTML file. Notice how long the page takes to display (I’ve turned off caching and file compression.).

The following picture shows what happens (click graph for larger example):

The page took 7.42 seconds to load. Page Speed gave the page a score of 81. Yslow gave it a “B,” with a score of 84. These two tools are extremely important and should be in your arsenal.

Optimizing the page. I removed the CSS from the <HEAD> of the document and inserted the Javascript code from Article 1 just before the </BODY> statement.

<script>
window.onload = function() {
var cssNode = document.createElement(’link’);
cssNode.type = ‘text/css’;
cssNode.rel = ’stylesheet’;
cssNode.href = ‘print.css’;
cssNode.media = ‘print’;
document.getElementsByTagName(”head”)[0].appendChild(cssNode);
}
</script>

</body>
</html>

As you can see in the graph below, the document loads much faster (click on the graph for larger example). All files load in 5.97 seconds, but the whole page (everything but the print stylesheet) loads in 2.11 seconds — the visitor quickly sees the page and doesn’t care that the print stylesheet loads last because s/he may never want to print the page and if s/he wants to print the page, it won’t happen immediately.

Page Speed gave this version of the page a score of 85. Yslow gave it a “B,” with a score of 83. Page Speed liked the page 4 points more, but Yslow liked the page 1 point less.

Since nobody on Planet Earth is going to print a document immediately after it loads, it’s safe to use Javascript to load the print stylesheet. What if they don’t have Javascript enabled? See Article 1 for the answer.

Yes, it’s true that nobody is going to have a print stylesheet that’s this large (it’s composed mostly of comments) and the improvements aren’t as important as caching and compressing your site’s files, but it’s good to be aware of what causes roadblocks in displaying your web pages.

Customers Increasingly Intolerant With Slow Web Sites