HTML and CSS Reference
In-Depth Information
Same In-Same Out Rule
Advertising usually also follows a “same in-same out” rule. This is the functionality of the ad unit and how it expands
and contracts based on user interaction. For example, if a user clicks or taps to expand the ad creative, the user should
click or tap to close out. The same rule applies to using mouse-over interactions in desktop. Note that all publishers
that support rich media advertising campaigns typically follow this rule.
Mobile
If your ad agency is ready to start constructing HTML5 ads, it's a good chance that you and your clients also focus on
penetration and reach in the mobile market, since Flash isn't supported on iDevices. Mobile is still a small market in
the grand scheme of things, but it's growing very quickly. In 2011, mobile advertising was up 149 percent over 2010's
numbers; overall, advertising will very soon shift away Flash entirely and leverage HTML5, CSS3, and JavaScript for
creating experiences. For an A/B comparison, take a look at this ad sample from the folks at Sencha: dev.sencha.com/
deploy/css3-ads . Can you tell the difference between Flash and CSS3? Chances are you can, but as more HTML5
browsers become the norm, expect to see more Flash-like experiences being developed with web standards. Also, use
html5readiness.com to keep up to date on overall browser acceptance.
Images vs. Icons
For mobile devices, especially with varying pixel densities, it makes more sense to leverage the browser to create
graphics and use fewer bitmap images where possible. Why? Because one way or another, images are absolutely
horrific when they're scaled. Scaling up results in loss of image fidelity and overall quality; scaling down results in
unwanted aliasing, which will reduce the overall sharpness of the image. With this in mind, Drew Wilson created a
font icon library, Pictos ( pictos.cc ), for various screen layouts and overall design. Many web publishers use these
icons today. If you're being pressed to use images because there is absolutely no way your client will rest for font icons,
I'd encourage you to use a service, such as Sencha's Image Service, a proxy service that allows designers to optimize
images requested by multiple devices and screens. (Go to sencha.com/learn/how-to-use-src-sencha-io for more
on this technology.) Conversely, you can use a service like Resize.ly ( resize.ly ), which is a cloud-based image-
resizing tool. In short, if you can get the browser to do the hard work while you take full advantage of CSS3, you'll be
better off than by making multiple HTTP requests to get images from the server. Be sure to use images intelligently
and target users on desktop only. If you are running a campaign on mobile, ask yourself whether images are needed,
and if they are, how many? In most cases users on mobile or low-bandwidth devices will benefit more from one-image
or no-image loads. Again, be sure to use CSS, SVG, canvas , or other alternative means on mobile. You'll learn more
about each of them in later chapters.
Site Events
In advertising, site events allow tracking from an ad unit to a publisher's page; this process is otherwise known as a
conversion. For an advertiser adding site events represents real ROI (return on investment); it shows where users click
from and how they arrive at the advertiser's site. However, since cookies are used to track site events, there are limits
on how conversions on iOS devices are handled, since the iOS default setting doesn't allow third-party cookies to be
dropped unless a user has visited the domain. This is a huge challenge in the industry; many ad-serving companies
want to tell this story to the advertiser but have to find other means. Many think HTML5 local storage can provide
this mechanism for tracking conversions (you'll get a closer look at working with it later in this topic). Others argue
how this will change things in the future. Will publishers act as ad-serving first-party cookie drops on behalf of the ad
server? Will third-party ad servers go away? One thing is for certain: limitations and future issues with privacy are in
the forefront of everyone's mind as HTML5 becomes bigger in the advertising market.
 
Search WWH ::




Custom Search