HTML5 Ad Templates. HTML5 Banner Creation Online

Paid advertising has always had a lot of ways to promote itself, and this includes online advertising, too. Online ads have been doing extremely well for more than a decade and show no signs of stopping anytime soon. However, you have to know the differences and nuances of various ad types to use them in the most effective way.

That being said, image-based ads are still the most popular ones, both still and animated. These types of ads come in several different formats, including JPG, PNG, GIF, and HTML5. The last example is going to be our topic for today.

HTML5 banners and their advantages

HTML5 banner advertising is quickly moving towards becoming a default format for online advertising in general, and there’s a number of reasons for that. Reason number one is the sheer versatility of responsive ads that can be created with HTML, making sure to represent all of the different sides of your brand on the Internet. Some of the advantages that HTML5 as a format offers are:

• Scalability to a large number of sizes and formats
• Easier production for effective and content-rich banners
• Allows for efficient collaboration in-house and across different parts of your company
• Much more control over the end design when compared to different formats
• Possibility to capitalize on the ever-growing mobile ad market with responsive ads
• The creation of different translations and ad variations is extremely easy
• Data feeds can be used to update banners dynamically.

Two more important facts here that should be taken into consideration are Flash and mobile advertisement. Adobe Flash was the main tool of banner creation for a while, but its popularity started to drop as soon as devices such as Apple iPhone became popular (they do not support Flash at all), and the final nail in the metaphorical coffin has been Adobe themselves pulling the plug on Flash support completely earlier this year.

Mobile advertisement does not only concern iPhones, either – a smartphone, in general, is an incredibly popular device nowadays, and it has been dominating the ad viewing charts for a while now (even though it’s still growing). So it does make sense to keep in mind how your banner is going to look within a mobile device when planning your marketing campaign.

Banner ads in HTML can serve all of the different purposes that a normal image or animation can work with, such as promoting, marketing, SEO, marketplace, and more. Simpler HTML banners could be done using the usual method of working with a code and maybe a separate image file as your background, and there are also several tools that can help with creating more complex banners in the HTML5 format. Now we’ll attempt to explain how to make a banner in HTML as a code.

HTML banner creation via code

The most basic HTML banner/header can be designed using the following example:

<section class="header">
    <h1>Text 1</h1>
    <p>Text 2</p>
    <a class="btn-bgstroke">Text 3</a>
</section>

This code results in three lines of text, the first one being the header, the second one containing the general information on the topic, and the last one being your call to action (CTA):

Additionally, you can use CSS to customize the banner in question, so that it’s not just a text with a blank background. Here is our example:

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,100,700,900);

h1,
p,
a{
  margin: 0;
  padding: 0;
  font-family: 'Lato';
}

h1 {
  font-size: 2.8em;
  padding: 10px 0;
  font-weight: 800;
}

p {
  font-size: 1.1em;
  font-weight: 100;
  letter-spacing: 5px;
}

.header {
  width: 100%;
  padding:60px 0;
  text-align: center;
  background: #4c5270;
  color: white;
}


.btn-bgstroke {
  font-size: 20px;
  display: inline-block;
  border: 1px solid white;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 300;
  margin-top: 30px; 
}

.btn-bgstroke:hover {
  background-color: red;
  color: #4c5270;
}

And there’s also the visual result of the CSS customization:

This way, we’ll have a solid color of the background (the line is background: #4c5270 under the .header group), a dedicated font called Lato, and a responsive CTA button (that changes color to red when you hover over it). 

This code can then be embedded right into your website’s source code and should work as intended.

Another way of creating a simplified HTML banner is via <div> tag. The code sequence is going to be slightly different, though. Let’s look at our example first.

<div style="width:300px; height:250px; padding:15px; background-color:blue; color: white">Test 1</div>

This code results in a 300×250 banner with a blue background and a line of text written over it, as follows:

That being said, there are several different tools that work like your regular image/ad designer but can also save the results in a HTML5 format. One such example is Google Web Designer. 

Designing HTML5 ads with Google Web Designer

Google Web Designer is a rather comprehensive application that allows for the creation of many different web advertisements in the HTML5 format. There are a lot of features that are included in the package, from the regular image design and animation to the ability to create rules, events, links for your CTAs, and more.

The main goal of this HTML banner creator is to reduce or eliminate the manual coding segment of the process when it comes to designing your ads, since coding often requires a specific set of skills to be able to work quickly and efficiently.

Now we’ll go over some of the general steps that are used when designing your HTML5 ad with Google Web Designer:

1. The first step you have to do is to create a new file to work with. That way you’ll get to the creation window, which allows you to specify some things, such as the storage location, the name of the file, the intended environment, the dimensions of your ad (either choose one from the list, input dimensions manually or make the ad responsive for it to automatically fit and adapt to the content that you’ll be placing inside), and more. Click “Ok” after you’re done with that.
2. Adding images to your file is as easy as the regular drag-and-drop routine (it is worth mentioning that the first image you’ll drop onto your file would be considered the background image and fit accordingly). Other images might also be included with no problems whatsoever.
3. Textboxes for general information and CTAs can also be made using the T button on the app’s control panel.
4. You may have noticed that you also have a timeline-esque bar under your file. This one is there to help you with managing animations, if you want to have them in your banner. The process itself is similar to most of the competitors on the market, with keyframe management, animation speed customization, transition effects, and so on.
5. Previewing your future HTML5 ad is always possible using the “Preview” tab in the upper right corner of the app. It can be used to assess the way the ad is going to look in its final form, and visualisation is also great for spotting the problems before you’ve saved the ad in question.
6. The process of saving your results is also somewhat different, since it’s called “Publish” here. You can “publish” your ad as an archive into your computer (the .zip format is offered by default), or you can place it in Google Drive for later usage.

HTML5 advertisement supports many different code types and file formats, but there are also some limitations included, such as:

• All of the images within an HTML5 ad should be stored locally and are kept together with the file inside the archive;
• No support for either maps or videos;
• You only have a list of Google web fonts to choose from, there’s no support for any other font;
• No support for expandable ads;
• Multiple timers and exits are not supported for environment target actions.

Despite its limitations, HTML5 is still a relatively popular format with lots of possibilities. However, some might find methods above to be too difficult to work with. There are other options that exist for these cases, and those are template storages and online ad builders.

Template distributors and online ad builders

For people that do not really want to design their own ads, there’s always an option to work with a designer, for a price. To explain this option in slightly more detail, we’ll now go over top-3 best HTML5 template distributors: Codecanyon, Themeforest and 5banners.

1 & 2. Codecanyon and Themeforest

There are several reasons for why we’re reviewing two different services as a single point on the list. First of all, both of these are part of a popular creative ecosystem called Envato market (as the upper part of each of the screenshots suggests). Additionally, while there are some differences in the layout, both of these contestants are working within the same set of rules – serving as a marketplace for HTML5 banner creators and/or their actual designers.

The filtering options of both services are quite impressive, allowing to search for specific tags, price brackets, ratings, dates and so on. You can also filter out the search results by a few more parameters, such as price, novelty, rating, popularity (trending), highest sellers, etc.

That being said, both services offer different HTML5 template databases, with the ability to preview any of the templates before buying it. Additionally, some template owners also tend to list additional services that are included in the template’s price, such as:

• Animation
• Compatibility
• Fonts
• Minimal correction of the template for the buyer, etc.

Most of the templates from these databases also come with multiple different sizes, covering the majority of your needs when it comes to popular ad sizes such as 728×90, 300×250 and so on.

3. 5banners

5banners, on the other hand, is a slightly different service. While it also offers a set of templates available for purchase, all of those are done by the service itself, and are slightly less customizable and more of a “general purpose” banner template. 5banners takes pride in the ability of these banners to be ready for deployment as soon as you’ve downloaded the template and replaced stock placeholder images with your own product ones. These are their own brand of banner templates called ReadyBanner.

However, this is not all that 5banners do. They also offer multiple different tiers of “banner support”, so to speak. To explain a bit more about that, we’ll have to list all of the different offers, first:

• ReadyBanner
• My ReadyBanner
• Custom Banner
• Source File
• 12 Months Full Subscription

ReadyBanner is the case we’ve explained above – the offer includes one banner from 5banners’ marketplace and a dedicated help file. You’ll have to replace the images within the template with your product’s images by yourself, as well as adding your own slogans.

My ReadyBanner, on the other hand, is similar to the previous offer, with one exception – the increase in price is justified by the inclusion of an additional service to perform the image editing and slogan adding before delivering the complete version of a banner to you. That way, you only have to provide the materials and the slogan for your product, and you’ll get a template that doesn’t need any kind of tinkering before being used for promotion purposes.

Custom Banner is the only option on the list that does not have a defined price, since this option implies that the banner would be designed from the ground-up specifically for your product or service. The difference between this option and the previous one is that Custom Banner is, as the name suggests, custom in its entirety, while My ReadyBanner is still adding your product’s images to one of the already existing templates.

Source File option adds another file to your regular package of one template – and that is the source file of the template in question, to be edited at will in a compatible service (Google Web Designer, Photoshop, and so on).

12 Months Full option is the most lucrative one out of all of them – offering access to the entire library of 5banners’ templates with no restrictions. That being said, this only covers the regular package of “downloading a template”, meaning that you’ll still have to pay if you want the template to be custom-fit for you, one way or another.

That being said, while the abundance of options is nice, these are still mostly template marketplaces, with their own problems and shortcomings. A lot of template bundles come with a price, and you’ll have to either pay the owner to customize it for you, or to use a dedicated software to do the same yourself (if you have the source file). This might not be the best option for some people with little to no knowledge in the field of banner design.

With that in mind, you may want to consider using one of the online ad builders for your HTML5 advertisement plans. There’s quite a number of different platforms that can work with banners as a whole and offer an option to save in the HTML5 format, so now we’ll look over 5 of the most popular examples.

1. Canva

Canva is one of the known competitors on the market of HTML banner creators, offering a rich collection of features in the field of image editing and animation. The addition of a user-friendly interface and the existence of their own template library for different types of banners makes it even better. The amount of formats for different social media sites is also extremely impressive, from YouTube and Twitter to Facebook and LinkedIn. All in all, it is a good choice when it comes to an online ad builder with little to no drawbacks.

2. Creatopy (previously Bannersnack)

Promoted mainly as an “online visual production platform”, Creatopy is the successor of Bannersnack, with both of them being an online ad builder with many useful features. Creatopy also boasts millions of stock images, a number of different HTML5 animation presets, the ability to use your own assets in tandem with the built-in ones, general animation capabilities with a timeline, a plethora of HTML5 ad templates and more. All of that is also encompassed with an easy-to-use interface that’s easy to figure out.

3. Bannerboo

General interface friendliness and the addition of several complicated editing features is what makes Bannerboo stand out from the other competitors. There’s also your usual package of image editing and animating capabilities, built-in HTML5 banner templates, various objects to use, adaptable designs, and so on. Animation is one of Bannerboo’s strongest suits, too, and its timeline is designed to be understandable and simple enough for anyone to operate with no issues whatsoever.

4. Bannerflow

Despite the fact that Bannerflow is a paid HTML banner creation app with no free options available, it’s still a good alternative to other participants on the list if you can afford it. Bannerflow offers a simplistic interface, several different animation types, a variety of HTML5 ad templates, as well as many customization options. This tool also includes banner translation, campaign management, analytical features, and all of that – within the commonly known HTML5 interface.

5. OnlyMega

While the previous example was mostly about animation, OnlyMega focuses more on its impressive library of templates, including HTML5 ad templates. Created directly for people who are not sure about their future ad design, OnlyMega offers thousands of HTML5 banner templates that you can fully customize however you like. The customization process is performed within their ad builder, which in itself is packed full of various image editing features, suitable for your ad building efforts.

6. Viewst

Another way to create your own HTML5 advertisement campaign is to use Viewst. It is a comprehensive online ad builder that offers multiple different features tied around creating the most attractive advertisements. Some of the features included are image resizing, color changing, object adding, image cropping, animation customization, transition effects, a variety of HTML5 banner templates, and more.

While the main purpose of this ad builder, as with most of the list, is to work with banners as a whole, they also offer the ability to download the results of your efforts in the form of a HTML5 archive filled with code and necessary files.

Creating your own HTML5 banner with Viewst

The process of creating your own HTML5 banner is not particularly difficult if you’re using one of the online ad builders such as Viewst. In general, we can say that the entire process takes five steps:

1. Choose the correct banner format. Choosing the correct dimensions for your future banner is the first step, and it’s as important as any other one. Having an unfit banner is worse than not having a banner in the first place.

2. Start from scratch or use a template. While Viewst does offer a variety of creative templates for you to use and adjust however you like, there is also an option to start everything from scratch, from a blank slate of a file.

3. Make your banner unique. Most of your creativity goes there – adding images and shapes, setting up text boxes and buttons, changing colors, fonts, and more. The sky’s the limit when it comes to all of the possible combinations of fonts, images, and text messages.

4. Add animations. Animation is also an important part of your banner, especially with all of the possibilities that HTML5 has. This includes regular animations, transitions, a slideshow of images or specific objects, etc.

5. Download your banner ad. After you’re done setting up your banner’s design as a whole, it is time now to export it in a specific file format. Usually, HTML5 is saved in an archive that keeps both the code and the images in question to use as a singular banner.

And that’s about it, this list is an answer to the question of how to make a banner in HTML5 banner creator, with the help of Viewst.

Conclusion

HTML5 as a format offers a lot of flexibility when it comes to the banner creation methods, and its ability to support most of the popular ad formats is a nice addition, as well. There are several ways of creating HTML5 banners on your own, and they tend to differ quite a lot. On the other hand, the amount of choices is there to help you choose the one solution that works the best for your specific case.