Above is the original front page for Web Pages That Suck.

What's really pretentious is the web design technique that comes in two variations — and I used Variation #1: "The Animated GIF on a Black Background." When the animation stops, you can either click on the image (mine's a textual image — it can be a graphical image) to go to the "real" home page or if you don't click, the <META> "refresh" command automatically takes the viewer to the next page. Variation #2 is the same, but it's just a regular image or imagemap, not an animated GIF. I've removed all the links and the "refresh" command so the page doesn't lead anywhere.

A lot of Web sites used this animated GIF technique on their front page, including some people who are really good designers. I'm not sure who originally created this technique, (probably Wired Magazine — they've introduced a lot of grea-at-the-timet graphic techniques) but Wired is in a league of its own and has a dispensation to use any technique no matter how sucky. You and I don't have this luxury. Try to create a more interesting and informational front page.

This topic is: Too many things wrong

I created this version of the home page as a joke. I tried to incorporate as many lousy techniques into one page as I possibly could ranging from different colored buttons to popup windows, to sound files, to animated GIFs, to blinking text, to black borders on a white background, to a "click here" button. I dare you to click the button.

The problem with the page is folks were taking it seriously and would write me about what a lousy designer I was and how could I possibly have such a sucky page on my site. Eventually, I had to put a note at the bottom, explaining the page was supposed to be bad.

A version of WPTS with too many things wrong (opens in new window).

To best view this page
take a hit of Orange Sunshine
and make your browser window
the width of this line.

Wait 30 minutes.
The fonts will change themselves.

This topic is: Forcing the Browser

First, I want you to realize I'm not advocating drug use — the sixties are over. What I am advocating is not pissing off visitors to your site by making ridiculous demands.

There are a fair number of sites that want visitors to make their browser window a certain width, to change the default fonts, and other such nonsense. What these sites forget is most people don't know how to change the default fonts (just ask any Internet Service Provider). What's going to happen is obvious. People will say, "The heck with it" and go surf elsewhere.

It's the same thing with plug-ins. Unless you're a movie, art, or record site don't force people to load plug-ins to view your site.

Don't alienate your visitors.

High on Kai

Small Balls
KPT Enhanced

You're allowed one
Kai Page Curl per career.
Here's co-author Michael Willis's.

This topic is: High on Kai

In the world of graphic design where 100Mb image files are not uncommon, Kai's Power Tools (KPT) have been a staple of great design for a long time. Because there's no limit on image size in the graphic arts world, extraordinary effects are easily created; however, in the world of the Internet we know we've got to be careful about the size of our images.

When people first get KPT or any other graphic tool, there's a tendency to...ah...um..."go overboard." I call it the "I've just learned how to (use KPT /make bevels /whatever) syndrome." We get a new toy, play with it, and then put the results on every image or on every page of our site.

It takes a great designer a good deal of effort to use graphic tools and keep the images small. Then, of course, there's the whole concept of aesthetics. It's hard to fight the urge to make really complex images because, quite frankly, complex images look cool. Once again, it takes talent to make them fit in with the look of a web page.

One of the more frequent Web uses of KPT is to design balls, bullets, and buttons. If I'm not mistaken, the above balls (and the buttons you can see later on) were all created and/or enhanced by KPT. I'm sorry to say that some of them are mine — however, they were...ah...hmm..."experiments" and were never placed on Web pages.

One of KPT's most amusing features is called Page Curl. It's absolutely cool to use this feature once. Now the image above is one graphic guru Michael Willis actually used on a page so he's reached his career limit. I hereby ban Michael from using Page Curl ever again.

As I mentioned, almost everybody gets the "I've just learned how to syndrome." Hopefully we get over it—quickly. I went through my own brand of "I can make beveled edges" syndrome. If you want to see my first attempts at beveled edges, you know what to do. If you've used KPT, some of the patterns will be too obvious.

The Controversy

When I initially created this site I thought I knew what material was the most controversial and would trigger hundreds of email responses. I was completely wrong. The material that provoked the most controversy was "Fonts and Drop Shadows."

I think the comments were evenly divided about my font choice for the original "Web Pages That Suck." One half liked it; the other half hated it. (For the record, the original font was Schmutz ICG Corroded — from the Image Club. My response to those who disliked it ran along the lines of, "I was trying some subtle humor by choosing a font that once was cool, but now sucks. It was meant to be like the front page where I used sucky techniques as an introduction." As we all know, if you have to explain the joke, it's not going to be funny.

The best commentary about this genre of fonts comes from the wickedly funny satirical site "The Onion." (http://www.theonion.com) These folks are insanely brilliant when it comes to parody and satire. In one of their fake news items they had the following story that sums it all up:

Case closed.

The phrase "The Controversy" shows another overused font technique — enlarged typewriter text. You'll usually find this on a page with a black background, but I've placed it here because, hey, let's mix and match fonts and colors — another no-no.

A more serious issue revolves around drop shadows. While no one was able to give me an exact date, numerous designers wrote in telling me this technique is passé.

When I look at the sites I visit on the Net, it's about a 50-50 split between those who use drop shadows and those who don't. I'll let the issue rest for the time being, but I'll get back to it later. It might just turn out the Internet's real controversy isn't how to get more bandwidth, but people using drop shadows.

The topic is: Too Much Text

It's a common tendency — especially for beginning designers — to try to cram every piece of information on one page. After all, a single web page can, technically, go on and on — forever — and since HTML lets you create internal anchors using the "#" symbol, it's especially tempting to make long pages. Sometimes, you have to make a long page — if you're creating an alphabetical listing but, more often than not, it's better to break the document up or try to condense it using categories.

There's some new research out that suggests it's OK to have long sections of text. However, I don't believe they're referring to the page above.

Above is the very first page I ever created — a page that definitely sucks and sucks big. Besides trying to cram every piece of information onto one page, I made many other design flaws. I'll mention just a couple.

1. I have the ACN logo at the top, not the Lightspeed Net logo. Duh.
2. All the logos are sucky graphics — I wasn't using Photoshop.
3. I should have used a background color — preferably white.

The topic is: Bad Text

This example is the mother of all bad text pages (opens in new window).

"If you have to ask, you'll never understand."

That was my original comment about bad text.

I know it's hard to believe, but there are sites, business sites, that resemble the above example. Generally, they have multiple animated GIF images, <BLINK>ing text (which doesn't work in many modern browsers), multiple font sizes, multiple colored text, JavaScript status bar messages, rainbow-colored divider bars, and the kitchen sink. Oh, yeah, and everything on the page is centered.

It's always been my theory that the more your pages/web site look like the pages on WPTS, the more likely your pages, well...uh...you know.

This topic is: Java Jive:

Comedian Denis Leary has a routine about cocaine that reminds me of my reaction to Java animations. He says, "Yeah, cocaine makes a lot of sense. I want a drug that makes my nose bleed, sucks all the money out of my bank account and makes my penis small. Sure." And what do I think about Java? "I want to spend all day waiting for an applet to load that may compromise my system's security and is about as entertaining as watching a guy making a dog out of balloons. Sure."

If Java animations are so wonderful, would anybody be using animated GIFs? I'm tired of LED billboards and scrolling text and little sprites jumping around. So instead of wasting your time by putting a Java program in the frame above, I just put in a placemark.

I want you to realize that I'm a firm believer Java will be important for writing cross-platform applications. It's just not a graphics tool until we get more bandwidth and bandwidth is farther off than you think — unless you live in really large cities or in those towns that are testing sites.

I recently received an email from someone working at a very large corporation who had some very interesting comments to add that might contradict what I said in the paragraph above.

"...Not to mention that the whole platform independence idea is just a crock. Take it from a guy who spent weeks writing a Java applet (no, not just a silly graphic tool), only to find out that it crashed in every other operating system than the one I designed it in. Platform independence at its best."

The topic is: Needless JavaScript

This site in question was an older version of VincentFlanders.com

One of the nicest features in JavaScript is OnMouseOver where the image changes when you roll your mouse over an image (roll your mouse over any of the three pictures in the frame above and you'll see). Recently, I've noticed it's become a widely used part of the Internet. Normally, when something becomes widely used it starts sucking. So far, OnMouseOver has avoided this fate.

However, on my personal page there's really no reason to use this technique because it adds nothing to my site. In the security industry there's a phrase called "Need to Know," which means if I need to know something, I find out; otherwise, I don't find out. For most Web pages, the operative phrase is "Need to Have" — does adding the OnMouseOver JavaScript enhance my page? In my particular case, it doesn't and it's just a needless waste of bandwidth.

Here's an example of needless JavaScript that opens in a new window.

This topic is: Sliding Curtain Effect

As I said about sliding menus, the issue here is "Just because you can doesn't mean you should." Just because you can create a menu bar like the one you're seeing here doesn't mean you should create one. What does it add to the page? Well, in this case, confusion. I had to create an image with an arrow just to help you figure out where to put your cursor. If I have to go to that much trouble, well, the technique can't be that good.

Oh. It doesn't work in Safari and Firefox (and I suspect it doesn't work in other Gecko-type browsers).

Here's the link for those using Internet Explorer. Opens in new window.