HTML and CSS Reference
In-Depth Information
you to use a variety of great tools to help you along the way. Some of these tools will likely become your go-to favorites,
and others you won't even give a second chance. I encourage you to find what works for you in your development
workflow while experimenting with the others.
Mobile Tips and Tricks
Now that you have a good idea on how to debug and optimize your content, let's take a look at some of the common
“gotchas” or pitfalls you typically see when dealing with HTML5 advertising, both on the desktop and on mobile
devices. Let's start with HTML and CSS namespacing; if any markup in your ad is named the same as an element on
the publisher's page and not wrapped in an iframe, the element's style and function could get inherited onto your ad.
To avoid this, it's generally standard practice to come up with a prefix naming convention to use in all ad elements.
I like to do ad serving prefixing; for example, if AdMob was serving the content, it would be
am-container
; PointRoll
would be
pr-container
. Another good technique to use is to namespace from your CSS top-level element down. This
could be your ad container element so all your CSS styles would be specifically set to the ads elements and none of the
publisher's page. By writing something like
#adContainer .banner {…}
you can clearly target the ad container by it's ID
and target nested elements like the banner class from our example.
Next I'll discuss asset caching. Caching can often be an issue on mobile applications, especially if a user is
noticing dated content in your ad but you know you've updated it. Ensure that your client has exited the app/web
browser, cleared their browser cache, and removed the app from any background processes. In the event of iOS, this
can be done by double-clicking the device's home button, tapping, and holding down on the app until a close button
appears. For Android, you'll need to go into the running applications and explicitly kill their processes.
Mobile Webkit
Webkit has a very sophisticated rendering engine, and it's the default device browser engine for iOS and Android
devices. It also has plenty of useful but often hidden properties to take advantage of. If you notice that Webkit is
handling your content in a strange way or perhaps even an ideal way but are not quite sure why, I recommend visiting
Webkit.org
to learn about the inner workings of this powerful browser. For a quick rundown, I've listed a few here
that you come across most frequently in the ad world. I hope these useful properties will help you when you notice a
few within your creative development, debugging, and testing. The first one is the font-rendering glitch when Webkit
performs any type of CSS animation on DOM elements. This glitch is often seen when fonts look sharp and clean
during the animation but on the completion they appear to get much bolder for no apparent reason and often result
in an unwanted flickering effect. If you or your client notices this, try to apply the following CSS rules on the container
div
wrapping your text:
<style>
.smoothFont {
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
}
</style>
This rule will set the GPU “on” for the duration of the ad experience, which will not result in any font glitches.
Keep in mind also that as more browsers leverage the GPU, this issue could remedy itself with future browser releases.
Another useful Webkit trick is to prevent Safari from adjusting text size on device orientation changes. When you
