Html5 Banners for Mobile by David Edeburn

David Edeburn discusses options for building for mobile.

Here are your options for low kb mobile HTML5 banner ads and my recommendation for several cases.

Case 1: 320×50 150kb ad

Because of the large file size and the small dimension I actually like to build these out as animated GIFs. I can create or edit a video and have some fun in 10 seconds and really try to engage the viewer in the small space.  Don’t have to worry much about coding in this case these can usually be handed off to the trafficker as is (yay…).

Case 2: 320×50 50kb ad

For this you have two options, a static jpeg, or handcoded HTML5 with CSS animation. I go with the latter because again you have a small space and 15 seconds to grab the users attention. The small space only allows for a logo and a CTA if you create a static which is NOT captivating enough to get a user to click on the ad. You’ve got to get their attention and then entice them with an offer or some sort of value proposition which needs to be delivered in a sequence.

Case 3: full screen interstitial ads 100k

At full screen or close to it, you can create another boring static image or you can spend the time hand coding it and catching the user’s attention. 100k is plenty of space to have 3 animated statements, a product shot, a background, and a CTA all animated and engaging. You’re CTR will be much better in this case if it’s well thought out and executed.

Case 4: interstitial 150k-300k

Now you can animate it in flash or do some really fancy hand-coded executions.  You can also do my favorite which is to combine the two.  Letting each perform optimally. Flash tweens will take care of the really sophisticated animations and coding will take care of whatever wild interactive ideas you can come up with.

Case 5: rich media mobile

Sky’s the limit guys, I’ve seen some awesome stuff.  Interactive videos, transparent video transitions, games, and more. Have a ball at this point the technology is not really a limiting factor only your imagination is. :)

Learn more about David Edeburn