How To Create HTML5 Banner Ads

  • Post category:Display Ads
  • Post author:
  • Post last modified:April 22, 2020

HTML5 ads have changed display advertising entirely it has come a long way since the days of flash ads. It offers a set of interactive content, that works universally across any platform (website or app) and device (desktop, tablet & smartphone).

What is an HTML5 Ad?

While display ads used to just be text or static images, with HTML5 (latest version of Hypertext Markup Language) technology, your ads now render exactly like a website. It also enables banner ads to show properly across devices.
Imagine having a lead form, Google map, video or even a game as the ad content. There is no need for a user to redirect to a website by clicking on your ad. They simply interact with your ad offerings, right on the ad itself! This alone has brought better ad performance.

The problem with HTML5 ads is the cost needed to build them. It is more expensive to build HTML5 ads and you also need HTML5 developers to build them. They are also responsible for ensuring the ad loads correctly on the sites or apps you serve them to. It’s a challenge for agencies and advertisers to find reliable rich media vendors, and not every client is willing to pay for expensive HTML5 mobile or web banners.

Thankfully, with many free ad creators and templates provided by ad serving platforms, creating HTML5 ads can be simple and cost-effective. You can also access this ad gallery for advance HTML5 ad examples.

How To Create HTML5 Banner Ads

The easiest way to create HTML5 interactive ads is to use an ad banner maker. The free MobileAds’ ad creator allows you to build HTML5 ads for mobile and desktop – in just minutes. It also takes care of every technicality for you, from tracking, analytics, and ad serving – all you need to do is to come up with a good banner design, build the ad and serve/track them.

There are two types of ad builders in MobileAds’ platform. The templated ad creator allows you to build HTML5 ads by selecting pre-made templates and choosing the type of interaction you want within your ad.

The HTML5 Rich Media ad creator (flexi ad creator) is suited for more creative freedom and creating animations using layers.

Using MobileAds’ Templated Ad Builder

Log into the MobileAds platform and choose templated ad creator under ‘Upload Ad’.

How To Create HTML5 Banner Ads 1

Choose the ad format that you want to create. You can choose from desktop web, mobile web, in-app or in-stream video.

Under each selection, you can select if your ad is to be an embedded, interstitial, expandable or in-scroll ad. (See different ad format examples here). Then choose the size of your ad.

If you cannot find the ad format or size that you want, just click on ‘Request ad size’ and drop us a message. Our ad specialist will help you with your request.

Depending on your selection, you will see a list of ad templates to use.

How To Create HTML5 Banner Ads 2

Upon selecting them, the ad studio will load. This is where you start customizing the look and feel of your ad. Depending on the template you chose, there will be different options to choose – from the number of tabs within the ad, color presets and background images.

Make sure to put in a fallback static image and URL. In a case where your HTML5 ad is served into a non-HTML5 ad compatible environment, it will revert to the static image ad.

How To Create HTML5 Banner Ads 3

After completing this, click next and you’ll be brought to the rich media component section, where you can choose from the list of available interactive components for your ad.

In my example below, I’ve built a sample ad for a burger restaurant.

It currently has a menu slider tab to display a food menu, each with a separate URL link that will redirect the user to the particular menu item. A lead capture form to collect leads, a store locator for viewers to find the nearest restaurant and a Facebook wall for users to see social media updates by the restaurant.

How To Create HTML5 Banner Ads 4

Once done, give your ad a name and save it under a campaign.

To preview your created ad, simply click on ‘preview’ under the campaign section and a preview window should show. Here, you can test the functionality of your ad, send the link to your client and get corrective feedback from them.

How To Create HTML5 Banner Ads 5

When you have finalized your ad, just switch the ad to active and generate an ad tag for it. Pass the ad tag to a DSP or ad network, and your ad should load as seen in the preview window.

Using MobileAds’ Rich Media Banner Ad Creator

If you are building animation ads or prefer more creative freedom with your ad creatives, try using the rich media ad creator. This ad creator is based on layers – use them to create animation or to add rich media components on each other.

How To Create HTML5 Banner Ads 6

Under ‘Upload Ad’, click on ‘Rich Media Ad Creator’. There are various ad formats you can choose, from the IAB standards (Embedded, Expandable & Interstitial) and other propriety ad formats (Inscroll, Mini Inscroll & Pushdown) mainly used by publishers.

In this example, I’ll select an interstitial ad and choose a 320×480 ad dimension.

Once loaded, you can start building your ads. Let’s start by adding a layer. You can resize the layer to anything you like. Rename your layers with easy-to-read titles, so you can easily recognize them as you build your ad.

How To Create HTML5 Banner Ads 7

On the right side of the ad creator, you’ll find a panel to customize the layer. First, you can select the type of media, from an image, button, text, shape or even a video.

The second tab, ‘Property’ allows you to customize the properties of the layer – to align it or to set its position manually. The third tab, ‘Animation’, is where you animate your layer. You can program a build in and build out animation, set a delay time or duration.

Finally, the last tab, ‘Action’ refers to the action that happens when a user tap/clicks on the particular layer. You can set a URL for the user to redirect to, when they tap on the layer. Instead of a URL clickthrough, you can also put in a telephone number for a tap-to-call action.

How To Create HTML5 Banner Ads 8

You can add additional layers to the current ad. For this example, I’ll add a YouTube video layer and a button layer to the ad.

How To Create HTML5 Banner Ads 9

Once you’re done building your HTML5 ad, give it a name and save under a campaign. You can preview your created ad using the preview link.

How To Create HTML5 Banner Ads 10

That’s it! Just follow the same steps to build more ads or use the duplicate ad function to save time, building them. And once ready, simply generate an ad tag to run the ad in your DSP.

To learn how to generate an ad tag, read our guide on using the ad tag generator.


MobileAds is an ad serving platform with a free ad builder for rich media HTML5 ads.

If you are looking for a dedicated rich media agency to custom-build interactive ads, just feel free to contact us at [email protected]!

 

Alvin

Alvin is the Founder and CEO of MobileAds.com. He is a go-getter, and adventurous guy who believes in working smart to gain success in his business ventures and in life. He also founded RichMediaAds.com and MobileLanders.com.

Leave a Reply