HTML and CSS Reference
In-Depth Information
Mobile Pricing
Mobile ad pricing is very similar to desktop in that ads are typically billed off impressions; that is, the number of
times an ad is rendered to the page or requested. Traditionally, mobile rich media are billed on a CPM basis (that is,
on the basis of every thousand impressions). This can also be joined with viewable impressions—that's when an ad is
actually within view on a user's machine. Typically, this metric aids ads that render “below the fold,” the area
not in initial view when a user visits a page. Taps, or clicks, are the number of times a user touches a banner to expand
it, and CTR (click-through rate)—it should be known in mobile as TTR (tap-through rate)—is the total number of
times an ad is tapped divided by the number of served ad impressions. For example, if an ad shown 1,000 times
receives 10 taps, it has a CTR of 1.0 percent. Finally, the cost is factored by the total amount paid for the reported time
period and possibly a bill based on the total number of impressions served. There is a nice, really detailed breakdown
of mobile ad pricing at
http://mymobileagency.co.uk/blog/mobile-advertising-pricing-explained.html
.
Ad Creation
Now that you understand mobile ad pricing, let's dig into the bigger topic at hand, which is the creative design
and development of the ad. For mobile, it's best to include all the ad's style sheets in the head of the publisher's
page or in iFrame's head, if it's being served that way (your publisher will inform you of the way your ad will be
rendered to the page).
■
iFrame ads in older device browsers can cause system memory issues, especially when nested
inside one another
. it's becoming less of a concern with newer devices but keep this in mind when you define your
campaign's reach.
Note
Styles shouldn't be included anywhere else, as applying them after an element is created causes reflow, repaints,
and unwanted (and unnecessary) flashes of unstyled content. When including the CSS specific to your ad, be sure
to bundle all the CSS files into one file while minifying and compressing it. In mobile, the fewer requests the better,
because network conditions can vary tremendously. I recommend using CSSCompressor,
http://csscompressor.com
and JSCompress (
http://jscompress.com
)
, as minifying or compressing the code will reduce the overall file
size—which is SUPER important for mobile devices. For scripts dependent on elements, have them execute after the
DOM is “ready” or “loaded”—this is done by using the
DOMContentLoaded
or “load” event.
Also, if you need to rely on image assets, you should be preloading whenever possible; preloading provides the
complete ad experience before rendering any ad content to the screen. While images are pretty heavy in the mobile
universe, you can't always get away from using them so definitely employ the learning's of sprite sheets as we've
learned in Chapter 5. This way, you're positive that the content will be operational and visible when the user finally
sees it. Listing 8-1 presents a common technique to preload image assets.
Listing 8-1.
JavaScript Image Preloader
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var images = new Array();
var numImages = '3';
var count;
function preloading () {
for (i = 0; i < preloading.arguments.length; i++){
images[i] = new Image();
