Effective Banner Advertising

The Problem

Honestly, I hate advertisements, almost all sorts of advertising methods such as banner advertisements, popup advertisements and pop-under advertisements. It's space-consuming, bandwidth-hogging, distracting, and truly unfriendly to my everyday surfing experience. I'm sure others might think the same perspective.

However, I understand that advertising is important too, playing its role to keep the web spinning. Without advertising, there will be no free email, free web content, and free online services. As important as it gets, advertising has gone too far and caused problems among Internet users. Advertisements graphics are getting larger, not only in file size but also their dimensions. Popup advertisements are getting rude to clutter the screen until they distract the user's concentration. Advertisements tend to get more animated, causing various accessibility problems to visually-disabled people.

This phenomena leads us to have no other choice but to block all these pests, using some filtering software widely available on the web. Of course, webmasters don't want this to happen as they rely on advertising to support their server bills and maintenance.

The Solution

Fortunately, I've found a win-win solution for both the web surfers and the webmasters. This solution is bandwidth-friendly, and fully accessible, made possible with just a few CSS codes, applicable to all types of banner advertisements. Shown below are the codes and some comments:

HTML codes:

<div class="banner">
<a href="http://getfirefox.com/" title="Get Firefox">
<span>Advertisement : Mozilla Firefox. Take back the web. Download now!</span>
</a></div>

CSS codes:

@media screen,projection{

.banner,
.banner a{
	/* dimensions of the banner */
	width: 468px;
	height: 60px;
	display: block;
	margin: auto; /* optionally, align the banner to the center */
}

.banner a span{
	display: none; /* hide the text */
}

.banner{
	/* display the non-animated banner image, by default */
	background: transparent url("fox_banner.png") no-repeat;
	color: inherit;
}

.banner a:hover{
	/* display the animated banner image, only when hovered */
	background: transparent url("fox_banner.gif") no-repeat;
	color: inherit;
}

}

The Advantages

To the web surfers

Most browsers will load the non-animated graphic first on the page. They will only load the animated version when hovered.

To the webmasters

The banner image is displayed, linked via a stylesheet. There is no img tag used.

The Disadvantages

To the web surfers

You couldn't block this type of banner advertisement, unfortunately. Even if you can, it will not be effective enough, because it will conflict with other non-related sites too. For example, Mozilla Firebird Firefox users could block this advertisement by adding the following codes to the 'userContent.css' file:

div[class="banner"]
.banner a{
	display: none !important;
}

... or:

div[class="banner"]
.banner a{
	background-image: none !important;
}

However, this might cause other sites which use the same class value of the div tag to render unexpectedly, maybe partially missing web content.

To the webmasters

Some people might still be able to block this advertisement, though. But, don't worry. As long as you don't assign site-specific class or id values to any elements on your page, you are safe. Even safer, you can change the value of the class attribute of the div tag to other more commonly-used values such as 'head', and not using advertisements-related values such as 'ad', 'adbanner' or 'advertisement'. The most ultimate method is not to use any class or id values at all, like this:

HTML codes:

...
<body ... >
<div>
<a href="http://getfirefox.com/" title="Get Firefox">
<span>Advertisement : Mozilla Firefox. Take back the web. Download now!</span>
</a></div>
...
</body>
...

CSS codes:

@media screen,projection{

body>div:first-child,
body>div:first-child a{
	...
}

body>div:first-child a span{
	...
}

body>div:first-child{
	...
}

body>div:first-child a:hover{
	...
}

}

The codes above uses pattern matching, which involves the child selector and the :first-child pseudo-class, to refer to an element and assign the banner as the background image of that element. Unfortunately, the example above cannot work in Internet Explorer (up to version 6) and other older graphical browsers.

As an aside, this type of advertisement may also be blocked by manipulating the URI id.

Additional Disadvantages

The Conclusion

Of course, there are always advantages and disadvantages in anything. If you like this method, use it. Don't like it, just leave it. But, please think twice. Read again.

Note: The banner images on this page has been changed and updated for Mozilla Firefox, replacing moz_banner.png and moz_banner.gif. The logos used in the banners are trademarks of the Mozilla Foundation.

| Home