HTML and CSS Reference
In-Depth Information
CSS3 in Advertising
So CSS3 animations and how they're affecting the advertising space is HUGE! Seriously, when was the last time you
didn't see an ad animate or utilize some presentation features just covered? Usually it's “Make my logo bigger” and
“Can we add a little animation here?” Advertisers are all fighting for users' attention, so keeping the ad moving is
very important to them. A couple of examples that can be extremely helpful for CSS3 animations, especially if they're
leveraging the GPU, are particle generators (or systems) and loader icons. A prime example of when they're used is the
holiday season, when ads need that falling snow effect.
Handling the snow animation via CSS3 and utilizing the z space will have the animation running super smooth
on top of the GPU (even for mobile). Obviously, this could also be done in JavaScript, but depending on the number of
other animations occurring, CSS3 will most likely come out on top.
Loader icons are huge in advertisements where a user opts for more content and the ad pulls in more than it
could on its initial load. Spinners, loaders, and other icons of the sort can all be offloaded to the browser instead of
making an additional HTTP request to grab an animated GIF. Again, this is helpful for additional subsequent loads
based on user interaction. Often, ads will load an initial k-weight limit of 70-100 kilobytes; after a user interaction,
they'll load additional weight up to 100 or even 200 kilobytes more (depending on pub spec).
In short, I have three simple rules to follow if you use (or plan on using) any emerging CSS3 features in your next
advertising campaign.
1.
Understand your target audience, and learn from what the publisher is currently taking
advantage of with regard to features. Chances are it sells the media inventory that aligns
with its content. If its content is aimed at a more tech-savvy audience and the publisher
isn't too concerned with users on IE6 through IE8, you should be able to use more cutting-
edge features.
2.
If you need to appease the masses, work with your publisher to include a polyfill. More
than likely, you'll need that extra k-weight allowance if it's not already baked into the site.
3.
Use a CSS Reset for your ad. Eric Meyer's Reset for HTML5 is one of the better ones out
should only be resetting ad contents and not the page the ad is living on. So be sure to
namespace your CSS rules appropriately. There is no sense working to make a creative
experience consistent across multiple browsers if the underlying browser technology is
rendering creative differently. It will be a mess to debug if you don't reset and start from
ground zero.
Since the CSS3 spec is evolving and many submissions from vendors are already in working order, some browsers
can't wait for the W3C to adopt, and so we get division. It's really important to understand what you can and can't
do with CSS3 in modern browsers. Defining your campaign's reach will dictate what features you can take advantage
of, both today and in future campaigns. Don't rely just yet solely on core CSS3 features. Start with features that are
standard in all browsers by referencing
http://caniuse.com
,
and add progressive enhancements to your ads in
browsers that can support the richer feature set.
Sprite Sheets
Last but not least in this huge discussion of CSS3 is file size and keeping image use under control, especially on
devices with limited bandwidth. Sometimes you can't get away from using images, and sometimes you'll have a
campaign with a lot of them, so now's a great time to discuss sprite sheets. A perfect use case is a character animation
in a game. You can't usually get around working with images when you need specific frames of bitmap data redrawn
to the screen in a sequence. To optimize this use case, we can use a sprite sheet, which includes every frame of
animation in a large image sheet. Sprite sheets are ideal due to the fact that there is only one request made to the
server hosting the image asset. Once the file is stored in browser cache, the developer can move the sprite sheet, via
