HTML5 Banner Ads
Banner ads are unusual things, no one is certain how valuable they are, ROI is difficult to track and yet every large brand uses them. Even to this day, Adobe Flash dominates the banner ad market to the point that everyone just knows them as “flash banners.” Unfortunately, all of Flash’s downfalls drag the banner ad market down with it including it being a proprietary technology, not working across ever prevalent mobile devices and not being accessible to those with disabilities.
Problems with Flash Banners
If you forget about the fact that flash banners don’t work at all on mobile devices, you’d quickly run into the issue of them not fitting very well on a small mobile screen. Leaderboard (728×90), Medium Rectangle (300×250) and Wide Skyscrapers (160×600) are the most popular sizes of banner ads today yet only the Medium Rectangle would fit comfortably on a mobile devices. Imagine if your ads could automatically resize down from a Leaderboard to a Medium Rectangle based on the size of the screen with which they’re being viewed.
Another big issue is accessibility, current flash banners will either be built using images for the text or having the text broken out into vectors. Combine that with the fact that SWFs are compiled into a binary only the flash player can read and you have an accessibility nightmare. There’s no feasible way a screen reader can break through the compilation and read the text even if it was in plain text. There’s got to be a better way.
HTML5 to the Rescue
HTML5 combined with CSS3 takes care of all of these issues. It’s an open standard that everything from a desktop to the oldest of smartphones utilizes. The text is plainly readable and can use custom fonts w/ @font-face in CSS. Also via CSS breakpoints we can actually completely reconfigure the ad to work at a number of various sizes through one single iframe embed. No longer do we need to deploy 10 different sized banners to handle every situation.
Now some people think that CSS3 is limited to simple sliding transformations and isn’t sophisticated enough to catch people’s attention on the ever noisy Internet, but they’d be wrong. We’ve put together an example page that while crude, is responsive and has a couple HTML5 banner ads on it, do yourself a favor and resize the browser and watch the Leaderboard up top resize to a Medium Rectangle and how the animations change accordingly.