Applying Responsive Design to HTML5 Banner Ads

banner_0With the Chrome and Firefox teams making clear plans to deprecate Flash, the de-facto banner ad standard, there has been a frantic push to convert Flash ads to HTML5 format. HTML5 can replicate most of the features of Flash, but is often more complicated and time consuming to produce. I’ve spent a lot of time reproducing Flash ads in HTML5 and I’m often forced to sacrifice features which simply don’t translate well. Moving forward, HTML5 banners will need to grow beyond Flash mimicry and take advantage of this new medium.

My novelty app Turkey Volume Guessing App, coming this November, contains an interstitial ad for other apps I produce. With the holiday season rapidly approaching, the first promotion will be for my wish list app, Listmas. It occurred to me that a responsive layout would allow the ad to display cleanly on all device screen sizes from phone to tablet. Since the in-app ad is in HTML5 format it works well as a stand-alone banner ad in many sizes, both static and expandable.

90px To Infinity

The simplistic flat design style of MyListmas.com lends itself well to SVG/CSS3 based animation. To start, I did make one concession in the universal size requirement, the banner has a minimum size of 300 wide and 90px high. With a repeating background and positioning based on percent, the ads build animation plays well at every other possible size. Though the layout does focus toward the middle 300px, it can be modified to make better use of greater space.

banner_600_90
To compliment its infinitely expandable height, the ad had two vertical breakpoints. The smallest format begins at 90px and contains the complete build animation with a CTA to visit MyListmas.com. The first break-point begins at 250px and reveals badges linking directly to the app stores. The second break-point begins at 600px and reveals copy describing the app and a secondary CTA linking to MyListmas.com.

banner_300_250
When used as an interstitial, the ad takes advantage of the forth dimension, time. In Turkey Volume Guessing App the ad first plays out its build animation full-screen. At the 10 second mark the ad container frame collapses vertically to a 90px height and gently returns the user back to the app while still remaining visible at the top. The final reveal for the full vertical content is hidden until the user follows the collapsed state CTA to “Tap to learn more.” This format combines the attention grabbing nature of an interstitial ad with the persistence of an expandable ad.

banner_300_600

View An Interactive Demo of the Ad

Future Development

As it stands, the ad fits all industry standards. All animation ceases at 12 seconds and, without a custom font, it fits in a 40k slot. All copy is fully editable so it could be translated into other languages as well. For convenience, all image and font assets are base64 encoded and embedded into a single index.html file. For this iteration, I focused the ad around more conventional banner sizes. With further development, the ad could be improved to work in sizes smaller than 300x90px and make better use of larger sizes.

Share on LinkedInTweet about this on TwitterShare on FacebookShare on Google+

One thought on “Applying Responsive Design to HTML5 Banner Ads

Leave a Reply

Your email address will not be published. Required fields are marked *