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.

Another huge benefit is localization. Using JavaScript, we can read the user’s preferred language set in their browser and translate our strings to match it.  This opens up the entire world to a single banner ad no matter the location or language.  The only thing to keep an eye on is how the length of words in different languages affects your design, but that can be adjusted via CSS.

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.


HTML Banner Ad Demo