HTML and CSS Reference
In-Depth Information
■
these are just a few gotchas and workarounds. Many more are out there, but given all the devices and browsers
in use, listing them all would be beyond this topic's scope. see
http://css-infos.net
for more mobile Css adjustments.
Note
As you might have guessed, a lot of mobile advertising comes from what's been learned from desktop advertising.
Such ad features as surveys, “send to a friend,” coupon downloads, customer data collections, animations, direct links
to app stores, mapping, video, polling, interactivity, in-ad purchasing, and location-based deals are all possible, but
they may take a bit more understanding to implement flawlessly and across device. These features can really benefit
advertisers; they can use what they've learned from their desktop campaigns and apply it to what works in mobile or
reposition their campaign for features that work better on mobile devices altogether. It's by far not the same medium, but
featurewise, a lot of the same things and more can be accomplished. A large question in the industry is how to handle
assets now that they're not just SWF files. This applies to mobile as much as to HTML5 advertisements in general. Here's
what to look for when handling or handing-off creative assets between team members both internal and external.
•
HTML
•
CSS
•
JavaScript
•
layered PSDs and/or images with sprite sheets
•
Illustrator files
•
storyboards
•
fonts
•
media files (video/audio) if needed
•
A README text file, which outlines instructions of the assets.
All of these assets may come your way in a ZIP file, which ensures that all the assets remain together throughout
the transfer. Confirming that all of these files are present when assets need to be handed off avoids confusion down
the line. This confusion often eats up valuable time and could potentially derail a campaign's launch.
A campaign often requires you to ping data to a third-party server, especially when other vendors give you 1 × 1's
in order to validate tracking metrics. This can be done by creating a new
Image
object in JavaScript and applying the
image's
source
attribute to point to the third-party destination you wish (see Listing 8-7).
Listing 8-7.
Pixel Tracking Example
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id='icon' style='background-color:black; width:50px; height:50px;'></div>
</body>
<script>
var someElement = document.querySelector('#icon');
someElement.addEventListener('touchstart', activityHandler, false);
