HTML and CSS Reference
In-Depth Information
You can see that the
jquery.js script
is being loaded first, using a
defer
setting, then the
mainSiteScript.js
,
which has dependencies on the JQuery library. Last, call in the third-party JavaScript tag for our ad content, which has
no dependencies on the publisher content. Since parsing JavaScript on mobile can take many milliseconds longer,
depending on the network connection, it's important to maintain the site's functionality to the user and load the ads
after the main content has loaded.
Before starting an HTML5 campaign and before starting creative development, always ask your ad ops or
campaign manager where the tag will run. What device, browser, and so on. Define your reach; this will dictate the
overall functionality, as support is limited for certain features. The functionality of the creative required will dictate
the amount of time to develop for cross-browser/device builds. There is a very comprehensive outline on mobile ad
With this in mind, let's first discuss the
viewport
in mobile
.
The viewport is really the virtual window for the
browser to render the content on mobile devices. By using meta tags in the head of your document page, you can
specify width, scale, and user scalability and even set minimum and maximum values for the browser window to
interpret. Since this is very important for formatting content correctly for mobile devices, let's look at Listing 8-3,
which shows the browser window being set to the size of the screen on the device that's accessing its content.
Listing 8-3.
Viewport Meta Tags for Mobile
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
When you open this document in your mobile browser, you'll notice that any content in your browser has been
set to the device's width. For an Apple iPhone, this would be 320 CSS pixels wide; it would be 600 CSS pixels for a
Kindle Fire. This variable width is a great feature. Since it makes the browser seem like a native application for the
device, it's something ads should take into consideration, as most publisher pages will include these meta tags. Listing
8-4 shows a more elaborate viewport example by setting scale values as well as user input.
Listing 8-4.
Setting Scale with Viewport Meta Tags
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "initial-scale = 1.0, minimum-scale=1.0, maximum-scale=1.0,
user-scalable=no, width=device-width">
</head>
This can also be achieved using the JavaScript method included in your JavaScript file (see Listing 8-5).
Listing 8-5.
Setting Viewport Width and Scale with JavaScript
var viewMeta=document.createElement('meta');
viewMeta.name='viewport';appleMeta.content='width=device-width, initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=0';
document.getElementsByTagName('head')[0].appendChild(viewMeta);
Either of these code examples when viewed in a browser will set the page content's width to the device's screen
width, set the initial, min, and max scale level to 100 percent, and not allow the user to zoom in on the page content
using a pinch gesture. This information is vital to content owners looking to achieve the best possible presentation
for mobile visitors, especially those wanting to mimic native applications built for the Web. Regarding advertisers,
