Sometime in the late 1990's someone coined the phrase "dancing bologna" to describe superfluous and garish* web design elements that marketing departments love, but the average customer will ultimately loathe. After the boom years of the Internet, and the reality check that followed, many of the startups and agencies touting fantastic new "plug-ins" or similar attention-grabbing "solutions" went "the way of the dodo". Despite limited budgets, and customer dissent, marketing departments and interactive agencies continue to push "bologna".
"Dancing bologna" existed well before the web was commercialized and oversold: as long as there's been graphical browsers, like pioneers Mosaic and Netscape, there's been "dancing bologna". In the early days of the web, people loaded their web sites with every conceivable doodad and gismo: they didn't care that it took ten minutes to download the page, or that it looked something like a Las Vegas at Christmas time, "on acid". Almost ten years later, people are still festooning their pages with Elton John midi files, dancing smiley faces, and browser-crashing Java applets - if you don't believe me, take a trip to Geocities (Geocitites is dead). When it comes to dancing web bologna, few are innocent, but we are all victims (link used to go to a hideous page about maltese dogs). [Editor note: MySpace is probably the most hideous website at this point.]
You will find many of the more infamous and obnoxious "dancing bologna" chronicled below. Read and learn from the mistakes of the past.
Images
Animated Gifs
Ever since Netscape 2, web browsers have supported Gif89a
animated Gifs. Animated Gifs were the only reliable way to display animation on a web
page, until Macromedia Shockwave came along. The animated Gif was destined for
immediate abuse.
In 1996, the typical personal web site was an exhibition of twitching smiley faces, "under construction signs", disembodied eyeballs, rotating skulls, swirling rainbows, and beating hearts. The best analogy in can think of is a clown vomiting after eating an entire bag of jellybeans in downtown Tokyo. Take a cyber-voyage around Fortune City and you'll find that 7 years later not much has changed.
- All you never wanted to know about animated gifs.
- Animated Art for Netscape: has hundreds of classic animated Gifs.
- Peter's site has probably a thousand classic animated Gifs.
- Google's Free Animated Gifs directory.
"Page Lines"
In the old days, coders would separate sections of a page with a horizontal rule created with an <hr> element. Typically you would see a shaded gray bar on the page. It wasn't long before somebody thought of using an image in place of an <hr>, and it wasn't too long after that that somebody thought of "page lines" that looked like dipping blood, walls of fire, churning rainbow colors, or a row of M&M's doing "the wave". "Page lines" are a good idea, but obviously open to a lot of abuse.
Netscape Now! Buttons
Back in the day when Netscape was still the queen of web browsers, they provided 88 x 31 pixel image for web designers to download and place on their sites. The Netscape Now button provided a way for a web designer to tell customers that their web site was compatible with Netscape, and (in theory) leveraged innovative features only available to Netscape users. They also served as a clever and free way to advertise Netscape.
Microsoft soon provided their own image for Internet Explorer, which spawned parodies such as the "Internet Exploder" button. Netscape Now, or IE buttons have fallen out of vogue - what was once the hallmark of cutting-edge technology, now says you're a little behind the times.
The Under Construction image
In the mid-1990s, no web site was complete (feel the irony) without at least one Under Construction image - a courtesy, to let your visitors know that parts of your site were missing or certain data was unavailable. While providing an "under construction" notice is courteous, large yellow and black animated Gifs resembling roadside construction warning will only spook your visitors, shake their confidence in you and send them to your competitor's web site.
Textured background images
Netscape was the first browser to institute the "background image": a tiled image that formed the background of your web page. While some treatments are tasteful, most of the time they were simply gaudy and bizarre.
You're better off using a plain white, black or other non-shocking background color, rather than an image.
- Google has an entire directory devoted to these textures.
Counters
Around 1995 and 1996, just about every site included a "counter" image, which lets a visitor know how many people have been to your web site. Essentially each time your page is viewed a program tallies your total visitors and presents the "counter" image. Some wise guys created fake counter images displaying huge visitor counts, or they spinning like an odometer racking up miles.
Nothing shakes a customer's confidence in your site and company like a low counter amount: "Not that many people have been to this site, they probably aren't good".
Multimedia
Embedded Midi & Wav files
There was a moment sometime in 1995 when every personal web page had either a midi or a wav file that would play once the page loaded. There is no experience quite like the shock of Billy Joel's "Piano Man" or Elton John's "Crocodile Rock" unexpectedly blasting from your PC speakers.
Even though it is no longer 1995, every night is Karaoke night on Geocities. Plop one of these files on your page and violate a copy write law or two as well.
- Learn from my mistakes: The Virtual Dorm Room features an embedded midi file as well as a cheesy animated Gif!
- Harvest a wealth of midi treasures at ExTreme Midi, or visit one of the hundreds of files in Yahoo!'s midi archive directory.
- Also try
Yahoo!'s Wav Archive directory. Just imagine how much cooler your site will
be one you add a few Homer Simpson Wav files.
Java Applets
Java Applets are programs that run inside your browser window, and somehow extend the wonderfulness of your web surfing experience. You've seen them: first a gray square appears on the web page, (then my browser freezes or crashes), and then the gray box becomes an advertisement, navigation menu or animation. Woo hoo!
Plenty of developers still use Java, but for the most part alternative technologies like Macromedia's Flash (easier to learn, create and update) and Microsoft's ActiveX (a little easier to learn, better integration with Windows).
Back in mid-nineties there was plenty of hype around Java Applets: so much so that I "upgraded" to Windows95 just so I could witness (and program) Java.
The most "famous" Java applets are the "fake moving LED banner", which simulates those scrolling electronic signs that you see in bars and delis, and the Lake applet, which mirrors an image and creates a rippling water effect. I guess Anfy's water applet is cool as well.
- Anfy has the best visual Java applets: including the ripping pond.
- The Java Applet Collection: classier, less obnoxious applets.
VRML
VRML, or Virtual Reality Modeling Language, promised to extend the web to the point of virtual reality by allowing programmers to code complex, interactive 3-D worlds, which downloaded into your web browser.
VRML never made it for a number of reasons:
- VRML requires you to find and download a plug-in. Plug-ins were typically large in file size, which was an issue in the era 14.4 modems. Once you downloaded and installed the plug-in, they didn't always work.
- Once you got the plug-in to work, actually using the plug-in interface was awkward: one slip of the mouse and you were totally disoriented, wondering what happened to the object you were looking at a few moments ago.
- Controls varied from one plug-in to another, so VRML developers could not predict or guide user behavior.
- Creating a VRML site is more challenging than HTML. You can learn HTML in a weekend with text editor, a browser and a Dummies book. VRML was far more complex, requiring knowledge of a 3D modeling program if you wanted to create something halfway decent.
- No one ever managed to create a compelling or impressive VRML site, but it sure was fun trying.
- Plug-ins: Cosmo, Community Place, Platinum WIRL, Worldview, V-Realm, VR Scout, or Virtual Explorer.
Video & the TV influence
Many of the bad ideas that drove web "innovation" during the 90s followed the lead of television. Web design borrowed plenty of ideas, such as the rounded corners of C-SPAN, the network identification "bugs" that sit in the corner of a TV screen to let you know what station you're viewing, and VH1's "Pop-up" Video, to name a few. Web designers and entrepreneurs always suffered from "TV Envy": any new medium borrows from media that came before it.
Web video technologies, like Real and Apple's Quicktime, have always struggled to present themselves as comparable to actual TV. Slow modems (most people still use dial-up connections), slow PCs, network traffic, and crashing servers prevent the Web from rivaling television.
Quicktime, video files and 3D Panoramas, are here to stay, as are Real and Windows Media. What happened to Vivo or VDO?
Macromedia Shockwave
Shockwave, the sister of Flash, is web-ready multimedia created with Macromedia's Director presentation program. In the pre-web days, Director was good for creating CD-Rom interfaces or presentations for those masochists who shunned the ease of PowerPoint. Director is more advanced than Flash - you can create full-blown 3D games with Director. Flash, on the other hand, is less expensive, it is easier to learn & use, and it has a huge community of Flash developers from whom you can learn and steal.
Other Site Elements
The Web Ring Block O' HTML
Back in the early days of the web, people got the good idea to join subject-related web sites together into "rings". Typically, a ring owner would invite a site to join a ring, or a site owner would apply to join. Site owners would stick a block of HTML at the bottom of their web page, inviting you to try the other sites in the ring. This isn't a bad idea, but there are two problems:
- You cannot control the web ring HTML (which often contains a picture), so you end up with a part of your site that looks nothing like the rest of your site.
- Other sites in the ring shut down, and you end up with a ring polluted with dead (404) sites.
The Intro Page
Perhaps the most worthless of all web pages is the Intro Page (sometimes called a "splash page"). The idea is this: you go to a site, and you're greeted with a Flash movie or an image, typically with some kind of logo, or cute message - and hopefully a "Skip Intro" link. The worst is when the intro pops up in a new window - I hate that.
There's no need for an Intro Page: there is no need to make your visitors sit through a Flash movie, or stare at an image before they get to your homepage - you will likely only disappoint or disturb them. An intro page places visitors an extra click away from your site and services, and gives them an excuse to leave. If you want to impress a visitor, impress them with the actual content of your site, your site design, and the quality of your services.
Browser Requirements
"This web site is best viewed with the Internet Explorer 6 browser set to full screen, with a screen resolution of 1152 x 864 pixels, over a broadband connection, and you'll also need Macromedia Flash, Adobe Acrobat, and Apple Quicktime."
Sure, all of this may be true, but why would you want to scare your visitors or place doubts in their mind?
Colored Scroll Bars
Coloring browser scroll bars can be an effective way to integrate the browser window with the colors and style of your web site.
Like any other web technology, the opportunity for abuse is high.
"Last Updated" data and time
Nothing says, "the content on my site is stale and irrelevant", like a "Site Last Updated On:" message.
Microsoft Transitions
Transitions are an Internet Explorer only technology that allows you to create PowerPoint-like page transitions for your web pages. For the most part, this technology was rejected by web designers and developers, but some people still use it. You can specify movie-style wipes, checkerboard dissolves or Looney Tunes style circles.
Best of all, you can go to your Internet Options dialog box, and disable this feature.
- The Web Developers' Journal has an excellent tutorial page.
Internet Explorer-specific style filters
Microsoft may claim to obey web standards (w3.org), but they always seem to take things a little to far, like creating additional style properties for IE browsers.
With IE, not only can you color, bold, italicize, or change the typeface of your text, but you can shadow, drop-shadow, or make your text glow as well. There are even more filters for images.
I really don't see this abused or even used that much.
Somewhere along the line Netscape decided to create a tag that would . This was immediately abused by just about everyone. If you're using Netscape right now, you're
Netscape and Mozilla still support the tag, but the Internet Explorer never did. Given the fact that 90% of web surfers use IE, and the fact that Netscape users have grown to hate Blink, you don't see it used all that often.
JavaScript Page Fades
Around 1996 people discovered that you could gradually change the background of a web page using JavaScript. Yes, this was tacky and awful, and thankfully, no one does it anymore.
There are plenty of web sites devoted to all the crazy stuff you can do with JavaScript: 90% of which is tacky and unnecessary:
Comet Cursor & DHTML cursor trails
Back in the 90's somebody got the idea that people wouldn't mind if you changed the appearance of their cursor (make it look like a Garfield, or a pony or something), or have things (colored dogs, cats, ufos) chase your cursor around. All-righty then.
- Comet Cursor changes your cursor depending on what site you are on.
- JavaScript driven "mouse trails" like this, use JavaScript and dynamic HTML (DHTML) to create their effect.
"e" or "i"
Anything that starts with an "e" or and "i". If you want to earn the disrespect of just about everyone, place an "e" or "i" in front of your company or product name.
What needs to go away, but seems to be here to say
Pop-up windows - true abuse
There are all sorts of "pop-up windows": new browser windows big and small, pop-under windows, "chromeless" windows, fake "pop-up windows" created with Flash or DHTML, windows spawned with Java or ActiveX, Gator install windows, and "fatherless" windows that use your browser's EXE file to spawn new windows - and they all suck.
I avoid web sites that host pop-up window advertisements, and I would never patronize a company advertised in a pop-up window. There are excellent uses for new browser windows, but an obnoxious pop-up advertisement is not one of them. Marketing and ad agencies love pop-ups because they have "higher than average" click-thru rates; unfortunately, they alienate and disappoint everyone else.
You can read my article on free pop-up blockers.
Flash Abuse
Just about any animation that fills your screen, distracts you from reading a web page, or dances it's way into your heart is made with either Macromedia. Flash offers designers seemingly limitless possibilities: TV quality cartoons, games, and screensavers - you name it - it can be made with Flash.
No single web technology has been abused to the extent that Flash and Shockwave has - I could write a coffee table sized book about it.
Advertising / Marketing Abuse
- "Interstitials": Flash ads played between pages of a web site.
- Eyeblaster type Full-Page overlays, Expandable Banners, or Floating Ads
- Fake browser windows
Designer Abuse
- The dreaded Intro Page
- Flash experiences that are presented in pop-up windows or full-size browser windows.
Award Winning Abuse
This is the End
This concludes the "atrocity exhibition". Learn from the mistakes of the past, and never, ever, place a rotating skull on your web page.
* and tacky, obnoxious, gaudy, excessive, browser-crashing, page download time increasing, "snake oil", worthless...
Want more fun? Try the Dan Century Home Page.