The Mortal Ken guildsite specializes in providing guidance for crafters throughout Azeroth. As a result, we also provide extensive coverage of means of gaining reputation with the various factions, since many of the high-end recipes are tied to your standing with the factions. This attracts browsers from all across the World of Warcraft.
In the technological world, the site's maintenance expenses are covered by a variety of sponsored advertisements. In using affiliate programs, the site maintainers have discovered a variety of tips and tricks for handling ads on our pages. Web site development is, in its own way, a crafting art - and certainly one that can be a source of reputation. So, Since you've stumbled across this page, we're quite happy to share this information with you (this page also serves as our log so we remember how we managed to solve these issues).
Power in Numbers
If you're considering monetizing your site (a fancy word for "slapping ads throughout the layout"), one of the best ways to start is to use a group affiliation. Google AdShare (left sidebar) and Linkshare (most of the right sidebar) are two examples. By signing up with one provider, you gain access to a wide variety of advertisers, so there's a good chance some of them will match your site content. Also, since you have to provide identification information to any site that will pay you, it's safer to work with the large, well-established "brokerages" rather than giving out your SSN to lots of independent vendors. You might also pursue individual affiliation with some of the large vendors - Amazon.Com, for instance - since they are likely to generate revenue for your site. Google AdShare and Amazon.Com (among others) use various tracking methods to try to match the displayed ads to the content of your site pages. These "intelligent ads" work well, since they're targeted to your readership.
Intelligent Ad Issues
Services like Google AdShare and Amazon provide ads which are targeted at the content of your pages. Unfortunately, they do not deal well when the ad isn't in the same frame as the content. There's really no workaround for this - the page layouts we use do not use frames for that reason. The problem with not using frames is that you must update the entire page for content updates. This can result in long download times.
Page Load Optimization
As a result, we've done several things to ensure that our pages can load quickly and display at least the base content. A very helpful link is WebPageAnalyzer.com, which provides a web-driven test of your web pages and gives some helpful advice. When we chose to make a graphic-intensive set of pages, we accepted that we were going to serve a broadband (or very patient) audience. However, we gained some valuable insights:
- Always provide height and width attributes for every image, iframe, and other loaded object if possible - this allows page layout to happen while the individual objects are still being fetched
- Limit yourself to 1 or 2 .css files and ensure that their total size does not exceed ~4k - remember that comments still count against that budget
- Similarly, combine scripts into a small number of files with total size < ~4k
- When using tables, ensure that the table has a set width (e.g., "width='100%'") and that you use <colgroup> and <col> tags to supply column widths - this allows table display to happen incrementally; otherwise, table layout has to wait until the whole table is read
Adding ads can add additional page load issues. In particular, if your viewers are behind a firewall or the ad site is congested, your page load hangs up waiting for the ad loads to complete. Also, if an ad is "ill-behaved" and tweaks either the display setup or layout and doesn't reset it, the remainder of your page may have unpredicatable impacts. There are two techniques which are useful in this case. First, make sure the ads are in areas with predefined geometry (in our case, we put them in a table with defined width and height) so that layout can complete even before the ads complete loading. Secondly, you can place a badly behaving ad in its own iframe. One level of iframe encapsulation does not break intelligent content such as AdSense. Note that the code for Amazon ads is already bound in an iframe.
<iframe src="gad-120x240.htm" width="120px" height="240px"
marginheight="0px" marginwidth="0px" frameborder="0px"
The downside of this approach is that a browser that doesn't support iframes won't see these ads. The standard says you can supply alternative content before the "</iframe>" tag for such browsers. In practice, this behaved unpredictably with different browsers - in some cases, we'd get both the iframe and alternate content. So we just don't advertise as much to folks with older browsers.
Adding Variety to Ads
Much like commercial TV, you might want to display a changing assortment of ads on each page. This can be difficult if you're using page layout templates, since you'd like to be able to reuse everything except the content portion of each page. If you have access to server-side scripting, this can be quite easy to accomplish. Here's an example implemented using PHP, using 3 ads called ad1.htm, ad2.htm, and ad3.htm:
1 => "ad1.htm",
Remembering the lessons about layout, you should make sure that all the ads have the same dimensions, then make sure they're in a structure that communicates those dimensions (e.g., by putting them in a table cell with height and width set).