HTML5 – Banners: what they are for and how to make them

Banner is a graphic image of advertising character, similar to the advertising module in the press. Can be a static image, or even text, and contain animated elements (up to video and interactive objects). As a rule, may contain a hyperlink to the advertiser’s site or a page with additional information. Tasks have the following banner. First, to sell products. That means – to attract the attention of the visitor, to interest a potential client’s advertised product or service, push to the transition to the site and encourage action (Call To Action). CTA is the ultimate goal of advertising. And secondly, the task of the banner is image or brand advertising, which aims to increase brand awareness and create a positive image of the brand.

Popular types of ads on the site:

  • – Graphic – A simple type of banner for online advertising. It consists of an image of a certain size and contains a link to an advertising resource.
  • – Flash banner – has great possibilities for animation, it allows you to better convey information using a combination of vector and bitmap graphics.
  • – HTML5-banner – a combination of HTML elements with animations and good visual design, adapted to all devices and browsers.

The main differences between HTML and other types of banners

Compared with other methods to create banners, HTML5 technology gives a number of advantages to attract the audience to the resource:

  • Ads in this format will display equally on all devices without additional browser extensions.
    HTML5 provides more options for integrating forms, social media buttons, calendars, maps and other applications into your ads.
  • The low weight and use of fewer resources does not affect how fast pages load in the browser. Flash technology does not allow for such a result.
  • To assess the effectiveness of banners on HTML5, you can look at statistics in Google Analytics. There is various information about guests and clicks on links.

A significant disadvantage of flash technology was the gradual abandonment of the major companies, such as Apple, Mozilla and Amazon. The main impetus for the disappearance of Flash was Google. First, they disabled Flash animation in Google Chrome, and then abandoned Flash ads in their search advertising services, giving preference to HTML5.

Ways to create HTML banners

Developing a banner starts with creating a separate page and is embedded on the site via an “iframe”. There are several methods for creating banner ads on the site, we will consider the most popular.

Creating a frame using CSS3 and JavaScript

A frame allows you to upload any independent documents in an area of a given size. This can be a different HTML-code using styles and scripts for design. It is also possible to implement a banner through a “canvas” area, where animations, drawings, graphics and even games can be designed with JavaScript. Third-party libraries, such as CreateJS, are allowed to speed up development.

Advantages:

  • Functionality is not limited by any program, you can implement anything.

Disadvantages:

  • This process is quite complicated and requires special skills of typesetting.
  • Large labor-intensive time relative to other methods.

Adobe Edge Animate

Those who know Adobe After Effects, the interface of Adobe Edge Animate will seem very familiar. Adobe Edge Animate has more terrible functionality aimed at developing simple animated content using HTML5, JavaScript and CSS3. The program supports importing formats such as .svg, .png, .jpeg, .gif, HTML; supporting video and audio formats.

There are more than 30 built-in effects, which simplifies the time of creating quality animation several times:

Benefits:

  • Lots of available video tutorials on the web on how to use the program.
  • Simple functionality, most processes are automated.
  • The program does not require knowledge of HTML5, JavaScript and CSS3.
  • Upon completion of the work we get all the necessary documents to place the banner on the site. Images – a folder with the graphic elements of the banner, some JavaScript files, html and the An file – for further editing of the file in the program.
  • The ready-made banner is supported by all modern browsers and mobile applications, and meets all the technical requirements of advertising campaigns in Yandex and Google.

Disadvantages:

  • The interface is only in English.
  • Since 2015, Adobe stopped developing the Adobe Edge Animate project, the program has not been updated since then and has reached its limit of development. Edge Animate is still available for download in the Creative Cloud archives.

Adobe Animate CC

Animate CC is the renamed Adobe Flash Professional product. Recently, the technology Flash has lost the trust of users, the program needed a name change and a few modifications. In fact, this is the same program Flash Professional, but in which the files are additionally stored in HTML5 and JavaScript.

The interface is very similar to Flash Professional, but the capabilities of the programs are different.

Advantages:

  • Ability to create three-dimensional graphics. There is a tool “camera”, which allows you to capture the depth of a frame for this animation.
  • Unlike Edge Animate, Animate CC has a large selection of vector brushes and the ability to work with bitmap graphics.
  • The program is relatively new, so Adobe is actively developing the project, releasing updates and improving Animate CC.
  • There is a Russian version.
  • Extended ability to export the file formats: JavaScript/Html, jpeg, png, oam, svg, mov, gif. With the click of a button, banner elements are saved in sprites, thereby reducing the loading time of the banner.

Disadvantages:

  • The novelty of the program is also attributed to the disadvantages. There are not as many tutorials on creating animation in Animate CC as there are in Adobe Edge Animate. Therefore, the work of some functions must be studied independently, which is not easy. The program is quite difficult for a self-study, but you can figure it out.
  • Some features are not automated, as in Edge Animate, which also increases the time it takes to create a banner.

Google Web Designer

Google pleased us with a free editor, specially created for html-banners implementation. Google Web Designer is fully geared up for the realization of advertisements, the main bias of which is towards AdWords.

If we look at the window for creating a new file, we notice that the program already has built in sizes of advertising templates.

Advantages:

  • Simple interface.
  • Availability of templates for advertising in google.
  • Completely free program.
  • The presence of the Russian version.
  • The adaptive design of banners, html banner will look great in any screen resolution.

Disadvantages:

  • The functionality of Google Web Designer is narrow enough to create animation masterpieces. The program is very limited by the templates.
  • Lack of tutorials. Google Help is not enough to fully teach the functionality.

All of the ways above are not new, but they are proven. This means that there is a guarantee that the created html banners will pass moderation on most advertising sites, as their technical requirements meet the general standards.