HTML5 Ads: 4 Challenges with HTML5 banners technology

Whats Different with HTML5 banners? High impact ad formats:

HTML5 banners are here to stay, and it has created a lot of opportunities for online ads on mobile and tablet devices. But it has also created a few issues for many digital agencies and designers who previously relied on the ease of developing banner ads in Flash.

Banner ads: High Quality Banners

New factors have to be considered, including pixel density, screen sizes, keyboards, touch screens and more. With Flash as there was very little device and browser dependency to run rich media, but that is no longer the case.

Here are four top challenges with developing in HTML5:

Varying browser capabilities
Media (audio and video)
Code exposure
Animation issues

1 – Varying browser capabilities

The performance of banners created in HTML5 depends largely on the various browsers and their unique capabilities. Safari. Firefox. Chrome. Opera. Android, and more.

Users have so many browser options to chose from, which can add many challenges for designers and developers both.

HTML5-compliant applications might have to be coded differently to ensure the same behavior on different browsers as each support different features. Worse, older browsers like Internet Explorer (which is still used in some business sectors, believe it or not) won’t play many HTML5 elements.

To overcome this challenge designers have to be wise in which elements to used in creating an HTML5 banners. Using external frameworks and libraries can be tricky too, so investigate their compatibility with different browsers and devices. It’s smart to use the latest release of a library.

2 – Media Issues (Audio and Video)

Streaming audio and video in Flash was made easy by the popular FLV/F4V formats, but that isn’t the case when developing in HTML5.

Now various browsers must use <video> and <audio> tags to play HTML5 media, and they all support different video formats (MP4 versus WebM, etc.) Plus different browsers us different audio formats too (MP3 versus WAV.) That means designers and developers have to include audio and video files for all of these formats into each Creative Banner to ensure they play effectively. Worse, if you want the quality to adapt and stream to each user’s connection speed, you might have to include many versions of the same audio or video files.

This adds up to very large banner ad files. We’ll address how to reduce HTML5 banners size in a future blog, but for now let’s look at issue number three.

3 – Code can be seen (if user knows how)

When using only HTML5 to create banner ads, their presentation layer can be exposed to the user, allowing access to all CSS, JavaScript and HTML files included in the add. Users can even view code if so inclined. Encrypting your HTML5 banner ads isn’t possible since browsers cannot play encrypted content.

4 – Animation Capability

Animation is a very critical element of an engaging rich media banner ad.

While creating animation in Flash was easy, designers are finding it hard to sync audio with the animation when using HTML5. It is very time intensive and complicated, which adds to the expense of producing the banner ad. There are a few solutions. New tools in the market are becoming available to help create animations faster in HTML5. Designers could also use Flash to create an animation and then turn it into video to incorporate in the HTML5 banner (this allows the animation to be seen, but it is not ideal because it prohibits user interaction with the ad.)

These are four of the challenges we have experienced in designing effective HTML5 banners for our clients. Stay tuned for solutions to many of these challenges in future blogs. In the meantime we would love to hear about your experiences while developing with HTML5.