we have a banner and clicks are read from this. For other banners, other technical threads, and there the click is read differently, now we are considering a specific example.

Container with banner

In other lessons, I will tell you how to create a banner with 100% screen width with animation and how to create and prepare a layout for website layout according to all the rules.

Files from the lesson:

1. Ready-made FullScreen banners: click

Friends, hello everyone. Today we will continue to create banners in the program Google web Designer in HTML5 format with 3D effect.

And this is understandable, banners created in html5 and css3 are displayed on any screens, both on computers, TVs, and on mobile devices... The same cannot be said about flash banners.

In addition, these banners can be, just use and the banner will look great on any screen.

And given the fact that mobile devices are more and more used to browse Internet resources, then this is very important.

I have already described the main one and its placement on the site in the last article. So today I will focus on creating the 3D effect and setting the cycling (re-display). And also consider a few settings for "events".

It is rather difficult to describe this whole process in detail, so I bring to your attention a video tutorial. This will make it much easier to master the material. And also download the archive with the project of my banner, as an illustrative example.

Preparing to create a banner with a 3D effect.

The final form of the banner depends on the preparation. The Google Web Designer editor allows you to create realistic 3D effects and all this will be written in html code, you just need to put everything together correctly in the visual editor.

To create a high-quality 3D effect, you must first cut the blanks in Photoshop, which will later need to be joined in Google Web Designer.

As an example, I have prepared the following blanks:

I made these blanks in Photoshop, but there are many similar images on the Internet. You don't have to strain yourself, but take ready-made options.

Note: If you are interested in the process of creating such templates, write about it in the comments.

It is also important to consider the overall banner composition and script. How the banner will be perceived as a whole depends on this.

Creating a 3D object in Google Web Designer.

So, by analogy with the last article, start the editor, create a new project.

The 3D effect means a composite image, that is, an image consisting of several pieces located in the desired projection.

These multiple images need to be combined either into a group or placed in a DIV block. And so and so it will be right. But, it's more convenient for me to work with the DIV side.

Step 1. Create a DIV block.

So, to create a DIV block, in the left panel, select "Tool for working with tags (D) ".

Be sure to assign an ID. And resize using the section "Properties" in the right pane.

Now we need to select the block. To do this, in the left pane, select "Selection tool (V) " and by double-clicking the left mouse button, click on the frame of the DIV block. At the same time, it will change color to red.

Step 2. Arrange the images.

And now the most painstaking process begins. It is necessary to expose all the elements of one single image.

I have the following elements at my disposal:

- Upper side.

- Side (consists of three separate parts).

First, place the back (back) side of the image and align it to the center and top edge of the banner.

Add the front side in the same way. Align and offset along the Z axis.

Since the side width is 4px (pixels), I moved the front and back sides along the Z axis by 2px and -2px. Which will provide a gap between the images.

Note: see the screenshots for the exact displacement figures.

Next, add the side, all the pieces separately. For ease of placement, use tools "3D rotating the work area " and "Scale"... They will help you to precisely fit all the details.

To begin with, I suggest that he will line up all the images, on one side, and then copy them and place them in a mirror projection on the other side.

The next step is to build the upper left corner.

Now the center part of the side.

And the bottom corner is on the left side.

Be sure to align all elements of the side with the Y-axis at 90 0.

Now you need to copy the desired layer and paste it again, renaming and changing the location parameters, so we get the elements for the right side.

To do this, select an image in the bottom panel - press the key combination CTRL + C (copy) and paste a duplicate CTRL + V.

Let's start in the same way as for the field side from top to bottom, but only for the right.

Top right cap.

I did not make the lower part, since it is not visible in the image.

The hardest job is over. Now you can start customizing your animation. As a visual demonstration, let's rotate the image.

Creating a rotation effect in Google Web Designer.

The first step is to get out of the DIV block, which contains all the image elements. That is, we worked inside the block with specific images, and now we will need to work with all images at the same time, controlling the DIV block.

First, click on the DIV button in the bottom panel.

So, on the chalet of time, by pressing the right mouse button, you create two keyframes. It should look like this:

Set the location of the source frame on the Y scale at -90 0.

Set the first keyframe (the second in a row) on the Y scale to 0 0.

Set the second keyframe (the third in a row) on the Y scale at 90 0.

Everything can be checked the result. To do this, click on the button Play.

True, our image will only make one rotation. In order for the image to rotate constantly or to make several rotations, you need to adjust the cyclic parameters.

Setting up looping in Google Web Designer.

In the program, you can configure several options for cyclicality (repetitions). This way you can set up repeat for all elements of the banner or for each element separately.

Also, the cyclicity can be limited by the number of repetitions or made it infinite.

On the bottom panel, next to each item there are symbols "Castle", "Eye", "Back Arrow".

So, to set the cycle, you need to click on the symbol "Reverse arrow". And choose either a limited number of repetitions or an endless option.

I chose endless looping of the animation. Since in the future I want to configure "Developments" in such a way that the rotation will stop when you hover the mouse cursor and continue after the cursor is removed.

Stop rotation when hovering the mouse cursor over the banner.

First of all, set a shortcut on the first keyframe (the second in a row). To do this, press the right mouse button above the frame and select the menu item "Add shortcut"... Enter the name of the shortcut and press the Enter key.

And in the next step, choose as the receiver « Page1 "... There will be no other options there.

And the final step, choose the shortcut that you created at the initial stage.

Save events and check. The rotation of the banner will stop when you hover the mouse cursor on the frame where the shortcut was made.

Resuming rotation after moving the mouse cursor.

In order for the rotation to continue, after moving the cursor to the side, set up one more event.

It is configured similarly to the previous one, with only two differences.

The event is selected "Mouse"— « mouseout ".

Event - mouse abduction

And as an action Timeline — « togglePlay ".

Action - Continue

Our banner with a 3D effect is ready. And you can come up with as many different effects as you like.

Just do not forget to make an event for a mouse click and link opening. The banner was not created for the sake of beauty, after all.

Initially, this process may seem complicated, but after making a couple of banners, you will no longer seem so.

That's all for today, friends. I wish you all success, I look forward to your comments and see you in new articles and video tutorials.

Best regards, Maxim Zaitsev.

Banner HTML5- a banner that displays arbitrary HTML content or an image. HTML code can be normal HTML page with styles and scripts. It fits in an iframe and has limited access to the content of the site.

Using the Banner HTML5 template, a banner can be added in two ways:
1.Preparing the picture only. The presence of a link to go in the banner parameters adjusts the clickability of the image.
2. having prepared HTML creative in the editor according to the instructions: or.
If both the HTML code and the image are added to the banner, then the HTML code will be displayed.

Parameters configurable when added to ADFOX:
- Banner width, height.
- Custom css-styles for the container with the banner.

HTML creative development

1. Familiarize yourself with HTML code requirements

• The maximum allowable size for an HTML file is 65,000 bytes.
• JavaScript and CSS are preferable to be placed inside the HTML code of the banner. If the resulting HTML code exceeds the maximum size, then you need to reduce the code by placing JavaScript and CSS in separate files:
  - save js and css code in separate files with the .js or .css extension;
  - files by weight should not exceed 300Kb;
  - upload files to the "Files" tab advertising campaign and include the resulting links to files in the HTML code.

  An example of connecting js and css files:

  Relative file paths are not allowed in HTML code.

• There can be only one .html file in a project.
• The maximum number of files in a project is 50;
• Allowed file types in the project: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• Maximum size of each file (also valid for files inside the archive):
  - 300Kb;
  - 1MB for video files.
• File names should contain only numbers or letters of the English alphabet, the underscore character. It is not allowed to use Russian letters, spaces, quotes and special characters in the file name;
• Russian letters cannot be used in the names of variables and objects.
  The only exception is the text on the banner.
• Format finished project - zip archive.

Image requirements

Use pictures high resolution, this will radically improve the quality of the banner on a mobile device, although it will reduce the banner loading speed.

You can use SVG images. They are vector-based, which means they will look better on all devices - mobile and desktop. They also have a small file size and can be animated.

Accepted image formats: png, gif, jpg, svg.
Maximum file size: 300Kb.

2. Select the editor in which you will develop HTML creative and click on the corresponding link. Prepare an archive with HTML-creative according to the instructions:

Adobe Animate CC Editor - One Button Banner

Adobe Animate CC Editor - Multi Buttons Banner

1. Download a template for a banner with multiple buttons

2. Create an HTML5 Canvas project in Adobe Animate (or open an existing one)

3. When adding buttons or nested movie clips, it is important to set them instance name so that you can then add a click to the buttons you want. We recommend using titles button1 - button9.

See also:

Instructions for adding a button and assigning an instance name

Main stage button

1. Create an object on the stage, for example, using the Rectangle Tool.
Then highlight it and in context menu select "Convert to Symbol ..."

2. In the dialog box that appears, select Type: Button, Name can be left unchanged, click Ok.

3. Give this button an Instance Name for the click to work.

4. Add the following code to Actions for this button:

Window.buttons.push (// Comma-separated paths for buttons, adding this first this.button1 // End of button space);

Nested button

1. Let's say the button is inside another symbol, for example, inside a Movie Clip.
In this example, this Movie Clip is set to Instance Name "name"

2. By double click go inside name, there will be a nested button.

3. When specifying the path to such a button in Actions, you will need to add the Instance Name of the object after this, in which it is nested:

Window.buttons.push (// Comma-separate the button paths, adding this first this.name.button1 // End of button space);

Instructions for creating transparent buttons

1. Select the element you want and convert it to a symbol

2. Specify a name and select Type: Button

3. Double-click the symbol to navigate to it:

4. Make insert keyframe on hit frame

5. Delete the contents of frames up, over, down

6. The transparent button is ready:

4. Add the Actions layer to the project (we will add the code for the buttons to it)

5. Open a window for writing code

Window.buttons.push (// Comma-separate the button paths, adding this first // End of button space); setAdfox ();

If the button is in the main scene, then write its instance name right after this, for example

This.button1

If the button is inside a nested scene, then after this, first write the scene instance name, and then the instance name of the button:

This.scene_instance_name.button2

An example of the resulting code in the Actions layer:

Window.buttons.push (// Comma-separated paths for buttons, adding this first this.button1, this.scene_instance_name.button2 // End of button space); setAdfox ();

7. The first button in the line of code will call the first link from ADFOX, the second will call the second, and so on.

Along with the HTML creative, give the manager, who will add the banner to ADFOX, information about the correspondence of buttons and link numbers.

8. Open the publishing options and connect the template from the first paragraph and publish the project by selecting the required directory.

9. After publishing the project, zip it in .zip format. Your creative is ready to be uploaded to the ADFOX banner.

Google Web Designer Editor

The code for this banner can be used as a basis for creating creatives in the editor.

Template contains script adfox_HTML5.js and a set of parameters for the correct operation of transitions and counting events:
% reference%,% user1%,% eventN%, where N is the event number from 1 to 30.

2. Click handling.

All events are assigned to specific animation elements through the Events tab.

The Tap Area component is used to invoke actions.
Add it and select an event Tap area -> Tap / Click(or "Tap Area> Touch / Click" in the English version).

In the " Own code"specify a call to the click function.

2.1 If using one jump button:

CallClick ();

2.2 If there are several navigation buttons:

CallClick (n);

where n

2.3 If you need to trigger an event from an animation without a transition, use the following code:

CallEvent (n);

where n- the number of the event to be triggered.

The peculiarity of the implementation of a stretching (rubber) banner.

To make the banner stretch across the width of the container in which it will be located on the site, on the panel Properties for position and size, specify percentages instead of pixels.

Also use options "Align to container" and "Rubber layout" on the top panel tools.
If you enable "Fluid Layout" before using any alignment tools, then when the parent container is resized, all elements will be aligned relative to each other and relative to the container's dimensions.
In this case, you can simultaneously use both the relative sizes of elements in percent, and absolute - in pixels.

4. Publishing the project.

When adding a banner to ADFOX, the manager will need to know the correspondence of buttons and event numbers. For each event, the manager will prescribe its own link for the transition, which will then be transferred to the banner code using a variable.

After publishing the project, zip it in the format .zip... Your creative is ready to be uploaded to the ADFOX banner.

Other editors

1. Counting clicks in a banner

In order to calculate statistics on clicks in ADFOX for a banner, you need to set a variable in the HTML-code in the tag and for the href attribute:

% banner.reference_user1%

Also for links use target attribute with the variable% banner.target% in the attribute value.
If the attribute is absent, then the link will open inside the iframe, that is, the advertised site will open in the banner space.

Example HTML code for counting clicks on a banner:

Advertiser website

In the HTML code of banners that will be placed in mobile applications, use the macro to track clicks: %reference%@%banner.user1%

2. Counting clicks from multiple links in a banner

Let's say the banner has several links to navigate to different pages advertised site, and for each of them you need to get the number of clicks.

First link Second link

Replace the values ​​of the href attribute with variables %request.reference%@%banner.eventN%, where instead of N there should be an event number from 1 to 28.
For example:

First link Second link

The correspondence between links and variables must be reported to the manager adding the banner to ADFOX. Since when adding a banner, you will need to specify the first link for Event 1 in the "Events" tab, and the second link for event 2.

Adding a banner to ADFOX

To add a banner to ADFOX, select the desired banner type and template "Banner HTML5".

Specify banner parameters:

Archive with HTML5 creative- download the .zip archive with the project, field "HTML5 creative code" should remain empty (it will be filled with the content of your project's .html file after adding the banner).

HTML5 creative code- download the zip archive with the project, prepared in HTML editors or paste HTML code.

If there are several links in the banner, add them in the tab Developments at the banner, in the URL fields of the transition.
Check with the developers of the HTML creative for the correspondence of link and event numbers.

Reference to the reference pixel- ADFOX pixel is used by default //banners.adfox.ru/transparent.gif, if necessary, keep track of impressions in third party system, remove pixel ADFOX and provide another link.

Creative width (px or%)- specify the width of the banner.

Creative height (px or%)- specify the banner height.

Image- upload an image.
Terms of displaying creatives:
- added HTML code and image - HTML code will be shown.
- added image - the image will be shown.
- added HTML code - HTML code will be shown.

The name of the class attribute of the banner container- specify a name (or several names separated by spaces) for the class attribute of the container with the banner.

Use SafeFrame (yes | no)- safeFrame is a technology that wraps ads in a special iframe that has a strict API. SafeFrame does not allow ads that are rendered in it to collect data and interact with the rest of the page outside the safeFrame.
yes - enable the use of safeFrame and deny access to the web page;
no - do not enable safeFrame. The banner code has access to the web page.

Banner block styles- arbitrary styles for the banner container in one line. Besides the style: display. For example, "border: 1px solid red;". Invalid values ​​will be discarded by the browser.

Banner (English banner - flag, banner) - a graphic image of an advertising nature, similar to the advertising module in the press. It can be either a static image or even text, or it can contain animated elements (up to video and interactive objects). As a rule, it may contain a hyperlink to the advertiser's website or a page with additional information... The tasks of the banner are as follows. First, sell the product. So - attract attention of the visitor, interest potential client advertised product or service, push to go to the site and induce action(Call To Action). It is the CTA that is the ultimate goal of advertising. And, secondly, the task of the banner is image or brand advertising, the purpose of which is increase brand awareness and build a positive brand image.

Popular types of ads on the site:

• Graphic- a simple kind of banner for advertising on the Internet. 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 raster graphics.
• HTML5 banner-combination of HTML elements with animations and good visual design, adapted for any device and browser.

The main differences between HTML and other types of banners
Compared to other methods of creating banners, HTML5 technologies provide a number of advantages for attracting an audience to a resource:

• Ads in this format will display the same on all devices without additional browser extensions.
  HTML5 provides more options for integrating into your advertisements forms, buttons social networks, calendars, maps and other applications.
• Light weight and use of fewer resources does not affect the speed of loading pages in the browser. Flash technologies do not allow achieving this result.
• To evaluate the effectiveness of HTML5 banners, you can view the statistics in Google analytics... There you can find various information about guests and clicks on links.

A significant drawback of flash technology was the gradual abandonment of large companies such as Apple, Mozilla and Amazon. Google was the main driver behind the disappearance of Flash. They first turned off Flash animation in Google chrome and then dropped Flash ads in their search advertising services in favor of HTML5.

Ways to create HTML banners
The development of a banner begins with the creation of a separate page and is embedded into the site through an "iframe". There are several development methods advertising banners to the site, we will consider the most popular.

1. Create a frame with CSS3 and JavaScript
The frame allows you to load any independent documents into an area of ​​specified sizes. It can be a different HTML-code using styles and scripts for decoration. It is also possible to implement a banner through the "canvas" area, in which animations, drawings, graphics and even games are developed using JavaScript. To speed up development, it is allowed to use third-party libraries, for example CreateJS.

Advantages:

• The functionality is not limited by any programs, you can implement anything.

Flaws:

• This process is quite complicated and requires special layout skills.
• Large labor costs in terms of time relative to other methods.

2. Adobe Edge Animate
For those who know Adobe After Effects, the Adobe Edge Animate interface will feel very familiar. Adobe Edge Animate has more limited functionality aimed at developing simple animated content using HTML5, JavaScript, and CSS3. The program supports import of such formats as.svg, .png, .jpeg, .gif, HTML; support for video and audio formats.

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

Advantages:

• There are many available video tutorials on the Web on using the program.
• Simple functionality, most of the processes are automated.
• The program does not require knowledge of HTML5, JavaScript and CSS3.
• Upon completion of the work, we receive all the necessary documents for placing the banner on the site. Images - folder with banner graphic elements, several JavaScript files, html and file of An format - for subsequent editing of the file in the program.
• Ready banner is supported by everyone modern browsers and mobile apps, meets all the technical requirements for advertising campaigns in Yandex and Google.

Flaws:

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

3. Adobe Animate CC
Animate CC is a renamed product Adobe flash Professional. Recently, Flash technology has lost the confidence of users, the program needed a name change and several improvements. Essentially, it's the same Flash program Professional, but in which the files are additionally saved in HTML5 and JavaScript.

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

Advantages:

• The ability to create three-dimensional graphics. There is a camera tool that allows you to capture the depth of the frame for real animation.
• Unlike Edge Animate, Animate CC has big choice vector brushes and the ability to work with raster graphics.
• The program is relatively new, so Adobe is actively developing the project, releasing updates and improving Animate CC.
• There is a Russian-language version.
• Extended options for exporting a file to formats: JavaScript / Html, jpeg, png, oam, svg, mov, gif. By pressing one button, the elements of the banner are saved in the sprites, thereby reducing the loading time of the banner.

Flaws:

• The novelty of the program is also a disadvantage. There are not as many animation tutorials in Animate CC as there are in Adobe Edge Animate. Therefore, the work of some functions needs to be studied independently, which is not easy. The program is complex enough for self-study, but you can figure it out.
• Some features are not automated as in Edge Animate, which also increases banner creation time.

4. Google Web Designer
Google made us happy free editor specially created for the implementation of html banners. Google Web Designer is completely geared towards implementing advertising, the main bias of which is directed towards AdWords.

If we look at the window for creating a new file, we will notice that the ad template sizes are already built into the program.

Advantages:

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

Flaws:

• The functionality of Google Web Designer is narrow enough to create masterpieces of animation. The program is heavily limited by templates.
• Lack of training programs. Google help is not enough to fully teach the functionality.

All the methods presented above are not new, but they are proven. This means that there is a guarantee that the created html-banners will be moderated on most advertising platforms, since their technical requirements correspond to general standards.

HTML5 Banners

from 2 299 rub.

RUB

To order

Currently, HTML5 banners are the only actual format for full-fledged animated banner ads. This versatile cross-platform format replaced Flash banners, which had a number of limitations and disadvantages.

The main reasons for such a refusal are the following:

• claims have accumulated against Flash technology in the field of computer security and increased consumption of processing power of mobile devices;
• some browsers have started blocking Flash by default;
• Flash display on iOs mobile devices (iPhone, iPad) was not provided by the manufacturer;
• popularity of Flash banner ad blockers;
• refusal from further support and development of Flash-technology by its owner, Adobe.

Animated HTML5 banners can be displayed without restrictions in any browser, on the screen of any device, including smartphones, tablets and media TV. This is their cross-platform and versatility.

For the customer, the use of HTML5 banners means, first of all, expanding the reach of the audience without loss.

What can an HTML5 banner do?

Much. After all, this is the most advanced format that attracts the user's attention and even interacts with him (interactive banner).

In terms of animation, such a banner can show vector animation (lossless scaling), animation of characters, photos, logos, graphs and diagrams, text, and even 3D animation. From an interactive point of view, an HTML5 banner can react to user actions and offer additional content and features. From a media perspective, an HTML5 banner can play videos, slides, and audio recordings. In terms of responsiveness, an HTML5 banner can stretch to the full width of the page, reveal additional panels, or expand to full screen.

Let's take a look at the main types of HTML5 banners.

Fixed size animated HTML5 banner.
The most popular format on most ad networks. The width and height of the required banners are selected from the list of banners accepted for placement. We will always show you the most common sizes.

Stretching HTML5 banner (responsive, fluid).
This is a banner that can stretch to fill the entire width (sometimes height) of the screen. (More details can be found in this article)

Fullscreen HTML5 banner.
Full screen banner. As a rule, it contains a display timer and a “Close” button. Especially popular for display on mobile devices.

Often, such a banner needs to be responsive to suit different orientations and resolutions of the mobile device.

Expandable HTML5 banner (expand).
At first, only the start panel of such a banner (teaser) is present on the screen. When the specified algorithm is executed (mouse hover or click, timer or other events on the page), the second part of the banner opens with additional extended information.

HTML5 Video banner.

Depending on the settings and requirements of the advertising platform, it can show a video, both with auto start, and after pressing the “Play” button. May contain control and mute buttons. The video file is usually hosted on an external hosting and uploaded when displayed.

Game interactive banners.
Banners urging the user to join the game by performing simple actions.

Such banners attract the attention of the target audience, arouse keen interest, but at the same time have a number of limitations (for example, the absence of a mouse hover event on mobile devices or restrictions on the use of additional scripts). We will always tell you about these features in case you are thinking of creating a game HTML5 banner.

Smart HTML5 banners (calculators).
Used to engage and interact with the user, offering him immediate settlement on the required parameters and a formula set by an internal algorithm (for example, calculating a loan, mortgage, consumption of building materials and other simple operations).

Editable HTML5 Banners- in some cases, the customer needs to promptly make changes to the banners without resorting to the developer's help (for example, frequently changing prices, percentages or quotes). We can cope with such a task and output the necessary parameters directly to the HTML-code of the banner, where the customer can independently make changes. You can offer another convenient solution for outputting the data used by the banner to external files.

HTML5 banners that work with external data and API loading.
On the this moment many ad networks prohibit the banner from accessing external sources... However, if a banner is placed on a site that provides such an opportunity, an HTML5 banner can request the necessary information (text, numbers, quotes) through the site's API and, after processing them according to a given algorithm, show it to the user.

3D HTML5 banners.
Such banners attract the user's attention by creating three-dimensional models of images on the page.

HTML5 3D banner can be implemented as a rotating object, the edges of which contain banner frames, as a drop-down book, or using other 3D effects.

Note that an HTML5 banner can include several of the described features at once. For example, a video banner can be stretched across the entire width of the page, and a three-dimensional animation can unfold on the page based on user actions.

If you want to order an HTML5 banner on our website, and a creative idea requires combining different formats, our specialists can always do it.

HTML5 banner - what is it technically?

It is best to think of an HTML5 banner as a mini website. No exaggeration.

HTML5, which gave its name to this banner format, is a markup language for web pages, in other words, layout. And it is typeset according to the same laws as any modern site. It can contain div containers, pluggable fonts, css styles and js scripts. The main element is the canvas animation container. The animation itself is implemented using a java script, more often using js libraries specially designed for animation.

What's inside? Why in the archive? Why are there so many files?

That's right, because we are used to the fact that a banner is one JPG image file or a "gif" or "flash drive". But remember, as we wrote above, an HTML5 banner is, in fact, a mini-site. It contains many files and comes in a zip archive from the ad site. Inside the archive is the main HTML file, java script files, libraries, stylesheets and used images.

Note. In some cases, an advertising platform may require you to provide the entire banner in one file, including all used scripts and images in base-64 format. This is not a problem for an experienced developer. However, such a requirement increases the term for making the banner and making changes to it. Fortunately, this requirement is not common.

How can I view the sent HTML5 banner on my computer?

Very simple. Unpack the zip archive and open the HTML file inside in your browser.

How can I check that the correct HTML5 banner has been rendered to me?

If a banner is created for advertising Google services, then at your service is an excellent tool for checking the quality of a designer's work - the on-line HTML5 validator from Google. It's easy to use: download your zip archive with a banner and see if it passed the checklist. Errors will be marked with red icons. If they are not there, your developer did not work in vain and the banner is ready to be placed in Google adWords or Double Click.

In the advertising networks Yandex, Mail.ru, Rambler, adFox, adRiver and others, the banner is also checked for compliance with the technical requirements after it is uploaded to the system's website. In case of problems, you can get a comment from the moderator describing the error. Some sites provide the advertising customer with the opportunity preview banner on the test page.

Still, the best guarantee of correct HTML5 banner production is the developer's experience, his knowledge of the technical requirements of advertising platforms and his readiness to quickly correct errors.

Is a banner with animation in Java Script different?

Don't be confused. "Java Script banner", "Canvas banner" - these are exactly what is usually called "HTML5-banner". Depending on the developer's tool, js libraries or layout rules may change, but the general assembly scheme remains the same.

How to create an HTML5 banner?

The most popular HTML5 animation editor among designers - Adobe program Animate.

Google offers its own development tool - Google Web Designer. Among its advantages are the presence of many built-in templates and the ability to publish a banner directly for Google advertising services: adWords and Double Click. Among the downsides is the limited animation capabilities.

Some designers, more often American ones, use the Green Sock Animation Platform editor and libraries. However, they have not received significant distribution in our country.

Considering that all the necessary components are open source, a good specialist can create an HTML5 banner even in the simplest text editor... However, this method is not efficient compared to using professional animation programs.

Technical requirements for HTML5 banners.

Requirements concern:

• total weight of HTML5 banner in kb;
• zip archive structure, number of folders and files;
• list of allowed file formats;
• how to enable URL-links by clicking on the banner (banner firmware);
• list of allowed js-libraries on external hosting;
• procedure and restrictions for connecting video and audio files;
• requirements for the design of the frame, disclaimers, frequency and number of animation cycles, load on the device processor.

And this is not a complete list of requirements that our developers have to take into account in order to provide the customer with an HTML5 banner ready to place and start an advertising campaign without delay.

What should I do with my previously created Flash banners?

See for yourself - the largest advertising networks no longer accept Flash banners for placement, Flash components are blocked in browsers and on iOs devices, Swiffy (the only adequate on-line Flash banner to HTML5 converter) has stopped working.

Automatic conversion of Flash-format to HTML5 is almost impossible - it requires, in fact, a complete manual rebuild in HTML5-editor. In such a situation, the right decision would be to order the creation of a new set of animated banners in a modern and universal HTML5 format.

But what about the "gifs"?

You need to understand that any GIF animation is a sequential set of frame pictures, just like in video files. A GIF file can contain information about the frame rate and the number of repetitions. This limits his possibilities.

GIF banner can't work with vector graphics, create animation programmatically, adapt to the desired size and much more, which an animated HTML5 banner can easily handle.

What does this mean for the advertiser?

The problem of excess weight. Yes, even banners are subject to it. All major advertising sites set strict limits on the weight of the banner in kilobytes.

A GIF banner is good for showing multiple static frames, perhaps with a little animation of text, buttons, or photo changes. In this case, the total weight of the GIF banner does not go beyond the requirements of advertising platforms.

If the animation involves the change of several hundred frames, then the weight of the gif-banner increases, as they say in English, “dramatically,” that is, dramatically. A 20-second GIF, weighing several megabytes, is common. And I really don't like it ad networks who are rightly concerned about how much traffic the user will have to download to view the banner.

So, if you need a banner with a variety of animation effects, character animation, an interactive, responsive or video banner, the choice is made in favor of ordering an HTML5 banner.