Welcome to The HTML Hell Page

"Hell is other websmiths." — Jean-Paul Sartre, updated

You Know You're In Design Hell When You See...

blinking text Blinking text makes it nearly impossible to pay attention to anything else on the page. It reduces 87% of all surfers to a helpless state of fixated brain-lock, much like that of a rabbit caught in the headlights of an oncoming semi. This is not good. If you abuse the blink tag, you deserve to be shot. Clue: if you use the blink tag, you're abusing it. ( User Friendly has an apposite comment on this.) gratuitous animation With animations you get all the wonderful injuries of the blink tag with the added insult of the graphics download time. People who abuse these should have flip books rammed into every bodily orifice until they figure out that a two- or three-frame graphics loop is even less pleasant than that. marquees So, maybe you think the blink tag and cheesy animations are the worst abuse half-bright websmiths can perpetrate on your retinas? Naaahhhhh. For those times when too much is just not enough, the Great Satan of Redmond has given us <MARQUEE>, which allows you to create animated scrolling marquees at the drop of an angle bracket. This bastard cousin of the blink tag can cause vertigo and seizures in susceptible individuals, reducing them to exactly that state of drooling lobotomized idiocy that's such an essential prerequisite to purchasing Microsoft products. Coincidence? We think not. garish backgrounds The very next time we stumble across a page composed by somebody who thinks it's cool to use leaping flames or a big moire pattern or seven shades of hot pink swirly as a background, we swear we are going to reach right through the screen and rip out that festering puke's throat. If there's a worse promoter of eyestrain and migraines than the blink tag, this is it. unreadable text/background combinations The world is full of clowns who think their text pages look better in clown makeup, clashing colors galore (your typical garish-background idiot also pulls this one a lot). The magic words these losers need to learn are "luminance contrast". Your color sense is between you and the Gods of Bad Taste, but if you don't stick to either light text on dark backgrounds or the reverse, you will drive away surfers who like to be able to read without suffering eye-burn. brushscript headings Brushscript headings are rude. Unless, that is, you think every single surfer hitting your page truly craves the opportunity to hang out long enough to watch toenails grow while a brushscript GIF downloads just to display a heading you could have uttered in a nice, tasteful, fast font. "Best viewed with..." Ah, yes, "Best viewed with..." — surest sign of an incompetent web designer (unless it's one of the parody buttons from the Viewable with Any Browser campaign). This kind of lameness is not just bad taste, it makes the site actually unusable for the large numbers of surfers who happen to be using something other than the designer's favorite browser. Unfortunately, the sort of people who do "Best viewed with..." is also usually way too stupid to get the point if you try to explain that HTML is supposed to be about device-independence — so pull them by the guilt-strings and point out that blind people surf too. If that doesn't work, club them to death with a chair leg or something. No court would convict. "resize your browser to..." instructions Right. As if we wanted our browsers to take up that big a chunk of screen real estate. But what's really annoying is that invariably these bozos get it wrong. Like, their browser has an 8-pixel offset, ours eats 20, and they forgot to allow for scroll bars so they're off by at least 30 pixels anyway and the display graphics are complete garbage. large fixed-size tables This one is often brought to you by the same idiots who so love "resize your browser to..." instructions. Hello? Hello? Would somebody explain to me how it escapes these people that the world is inhabited by lots of people with different sized displays, and that tables flow for a reason? Sigh... unnecessary border spacing In this particularly moronic variant of large fixed-size tables, the designer puts the entire web page in a table and pads the edges with empty columns of a fixed width. Duh. This is a sure sign that he or she is one of those pathetic desktop-publishing weenies who thinks HTML is a page description language. Hanging's too good for them... Pointless use of <small> or <font size=> If we wanted our text to be unreadably tiny, we'd have told our browser to display it that way. This one mugs viewers with 20" and 21" screens particularly hard; since most fonts are scaled for 72dpi they're already 30% smaller than they ought to be at 100dpi. Anybody who use these tags for running text should be compressed by 30% themselves, slowly, and preferably in a machine with big nasty spikes. masturbation with Javascript There is a large class of Javascript annoyances perpetrated by people whose ability to do cutting and pasting exceeds their negligible sense of taste. Of these, one of the most common is the script that scrolls text in the Netscape status line. To all the disadvantages of <MARQUEE> this one adds the fact that you can't see where links go any more. Better than that, pages with 25K of Javascript followed by < 5K of actual content; these pages, of course, are invariably hosted on slow servers so you can experience the pleasure of waiting for Javascript to load just so you can see a cutesy animated menu bar or something equivalently useless. In general, any page whose source has more Javascript than content should be sent to the recycle bin. unnecessary use of Java There is one thing worse than your average garden-variety idiot web designer, and that is the half-clever idiot who loves to ring in all the latest technology without stopping to think about its side-effects. One notorious Fortune 100 website, when it detects a Netscape browser, assumes you must be able to support a fancy Java search applet — and if you have Java turned off for security reasons, you can't search the site, because the perfectly adequate CGI search you'd get if you were using Lynx has been disabled. Moral: Keep It Simple, Stupid! pop-up windows Some particularly irritating designers have discovered the magic formula that causes your browser to spawn a new window when you click on a link — or worse, ways to make pop-up windows appear even if all you're trying to do is exit their wretched hive of scum and villainy as rapidly as you can find the Back button. Stay in your own window, dammit! The Web is supposed to be about viewer control; designers who persist in rudely grabbing pieces of the viewer's screenspace without permission deserve to be lashed with knouts. menus made entirely from image maps Clue: lots of people use text-only browsers like lynx, either because they want to (for speed) or because they have to (visual impairment, or lack of a graphics display). An entire page that shows up only as "[ISMAP]-[IMAGE]" is useless. Designers who can't be bothered to at least provide a link to an alternate text menu are, at the very least, guilty of laziness and thoughtlessness. Huge image-maps are bad even for graphical browsers; they're slow-loading and needlessly frustrate users. And a frustrated user is a gone user. sound and video that launches without prompting About those embedded videos that just suddenly start playing by default, without bothering to ask you if you want them to be played? No. If you have ads on your site, fine, but if my loudspeakers suddenly start yelling about how I can win a ONE THOUSAND DOLLAR GIFT CARD if I just TAKE THIS SURVEY NOW you can take it to the bank that I would sooner lick sores at a leper colony than answer your survey or ever do any business with you. And here's a hint to everyone who runs porn sites: most people who watch porn do not want the sounds of people having sex broadcast to everyone within a thirty-foot radius. CSS that sets fixed-size fonts dimensioned in pixels This is the idiot web designer's favorite way to make a site unreadable on a monitor with a finer dot pitch than the one he/she happened to use. Guess what happens when you set a 10 or 11px font on a 72dpi monitor and it gets viewed on a 120dpi monitor? That's right, instant eyestrain and another user cursing your name. This problem is going to get worse as displays get larger and finer-grained. CSS that changes the hotlink colors Isn't it fun when you surf to a page and your eyes stall out trying to figure out which piece of text are hotlinks? That underlined blue and purple are valuable navigational cues in the Web jungle. If the page has multi-colored links or links that are not easily distinguishable, then this is another case where overriding the browser's settings should be punishable by intimate acquaintance with a flensing knife. Forcing one of background and text colour, but not both. Suppose I like my pages to default to green text on a black background? (Yes, I actually got email from a reader who does this!) If you set your text colour to black, but don't set the background color, the site will be unreadable. If you set your background color to white (or worse still, orange — this has happened too!) but do not set the text color, I will develop eyestrain and wish a plague of creeping horrors on you. It is not wise to assume that the viewer has not fiddled with the default settings on their browser; either set both colours or neither. background MIDI, Flash, Shockwave, and other abominations Background music takes forever to load, and isn't portable. Flash and Shockwave take forever to load, aren't portable, and are proprietary formats that lock you into a single vendor. When you insult your viewers with crap like this, don't expect them back.

You Know You're In Content Hell When You See...

hit counters "You are the 2,317th visitor to this page." Yeah, like we care. On the search-enabled it takes no effort at all to find and bounce off every page on the planet with a reference to (say) credenzas or toe jam. In this brave new world, hit counters are nothing but a particularly moronic form of ego display, impressing only the lemming-minded. They may tell you how many people got suckered into landing on a glitzy splash page, but they won't even hint how many muttered "losers!" and surfed out again faster than you can say "mouse click". To add injury to insult, hit counters screw up page caching, heaping more load on the Internet's wires. guestbooks If we have something to say to you, we'll send you mail. Having a guestbook is lame and only demonstrates that the designer is not thinking about what happens when you nudge people to write something, anything. Of course, 95% or more of what guestbooks collect is inane drivel. stale links Stale links are lame. People who have lots of stale links are lamers. OK, everybody has a pointer vaporize on them once in a while — but haven't you noticed that stale links generally show up on a page in swarms, like cockroaches? That's because people with good web pages use them and hack them and fix broken pointers quickly so they're unlikely to have more than a few at a time busted. A page with lots of stale links yells "My author is a lazy, out-of-it loser with the attitude of a slumlord running a cockroach palace." pages forever under construction Surfers learn quickly that for every ten "under construction" signs that go up, maybe two will ever come down before the heat-death of the Universe. This is stupid. HTML is not rocket science and prototyping pages is not a slow process. Anybody who can't find the time to clean the construction signs off their pages should yank them and take up a hobby better matched to their abilities, like (say) drooling, or staring at the wall.

You Know You're In Style Hell When You See...

pointless vanity pages If we had a nickel for every home page we've seen that's a yawn-inducing variation on "Hi, here's me and here's a cute picture of my dog/cat/boyfriend/girlfriend" we could retire to Aruba with a bevy of supermodels tomorrow. Clue: if you don't have something to say, shut up. And keep it off the Web; life is too short for boredom. angst and pretentiousness We were originally going to vent our spleen at black backgrounds, until we realized that black is not the problem. It's the three overlapping populations of losers that compose 99% of the black backgrounds on the Web that are the problem. These are (a) cooler-than-thou art fags, (b) angst-ridden adolescents, and (c) the kind of coffeehouse trendoids who actually believe subscribing to Wired makes them hip. Clue: angst and pretentiousness are boring. People who spew bad poetry and/or make a fetish of writing in all-smalls and/or traffic in fuzzy images of mediocre avant-garde art should slit their wrists or join a commune or do anything else that will keep their self-indulgent sludge off the Web. corporate logorrhea We've all seen them — corporate pages that start by downloading some monster logo graphic from hell. And after you've waited a million or three years for it to finish, the rest of the page has a ton of gush about how wonderful the company is, maybe some lame-oid promotion that's just a hook to get you on their mailing list, and no content at all. Tip for marketroids: this is not effective, unless your goal is to make the company look like every other moronic me-too outfit that thinks having a Web address will make it look like it has some semblance of a clue. Not! advertisements from hell Don't you love top of the page ads that are changed every time the page is accessed? If you're jumping back and forth between a parent page and a child devoted to a subcategory, you get the dubious pleasure of waiting for a new ad graphic to load each time! no email address for feedback These folks want you to look and listen to them, but they don't want to hear from you. Isn't it interesting that half the Web pages of Fortune 500 companies, the big names like McDonald's, won't tell you what their email address is? Shows you just how much these gutless wonders really value their customers. Another tip for marketroids: this sort of thing makes your company look exactly as arrogant, stupid, and indifferent to its customers as it actually is. Think of an email feedback address as a sort of necessary disguise. cookie storms Lots of web users don't want strangers dropping little turds on their disk drives so they can be tracked, scanned, collated, and sold. Lots of users therefore set their browsers to query them before setting a cookie. Lots of users become extremely annoyed at pages that flood them with cookie requests. Clue: if the user rejects your first cookie, he doesn't want a second or a forty-ninth — cope with this gracefully. Any web designer who fields pages that generate cookie storms should be disemboweled with a dull pruning knife pour encourager les autres.

You Know You're In Extension Hell When You See...

broken HTML A lot of broken HTML gets inflicted on the world because it happens to get past the brain-damaged `parser' of everyone's favourite bloatware web browser. The designer gets the perversity prize if he can provoke radically different behaviour in different browsers or browser versions. Microsoft's `smart quotes' Another sure sign of Microsoft brain damage — questionmarks showing up where single or double quotes ought to be. Here?s an example, doesn?t it look illiterate? Clue: shut off the so-called "smart quotes" feature in your Microsoft Word, moron. It generates Microsoft-specific characters that aren't in the Latin-1 character set; many browsers (rightly) throw up their hands in horror at this. There is a cure. unstable extensions We just love it when our browser freezes while loading a page, hangs for a while, and then ignominiously coredumps. When this happens, you can bet money the page is using a Netbloat extension nobody ever bothered to debug properly (there are a semi-infinite number of these). The worst offender is undoubtedly... frames We used to say "frames are for idiots", back when they tanked most browsers. Bordered frames still are; they eat up precious screen space with frame widget cruft. We now grudgingly concede that borderless frames have their uses — but if you do them, do them right. Frames that can't be bookmarked still suck, and links that don't replace the whole page when you jump offsite suck even worse. Use frames with extreme caution.

Improving your web page

"Okay," I hear you saying, "so you've given me good advice on how not to screw up. Have you got anything more positive to say? Like, good things to do and how I can improve my page?" For you, my friend, I have three words. Content, content, and content. Give the audience a reason to care. Too many web pages are like tales told by idiots, full of sound and fury, signifying nothing. Do you want to be interesting? Then forget the graphics and the glitz. First and foremost, have something to say.

Suggestions?

Got your own gripe about poor HTML design? Mail it to us!

Please do not write asking me to review or correct your web page design. I have enough trouble finding time to maintain my own web pages, let alone other peoples'. You might be able to change my mind with lots of money, payable in advance.

Thanks

...to Pete Glasscock for inspiring this page, even though he subsequently disappeared off the Web. ...to Patrick Campbell-Preston <patrick@chaos.org.uk> for most of the Extension Hell section. ...to Rob Novak <rnovak@ibm.net> for "advertisements from hell". Others have contributed to this page explicitly asking not to be credited.

Other Good Advice

Horrible Examples of bad technique are listed at Web Pages That Suck. Jakob Nielsen's column Top Ten Mistakes in Web Design is very good. The Yale Style Guide is worth reading.