Creation of adaptive HTML5 FullScreen banners. HTML5 Banners Guide to creating a FullScreen banner according to all the rules

HTML5 Banners

from RUB 2,299

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

The main reasons for this refusal are the following:

• Claims have accumulated against Flash technology in the field of computer security and increased consumption of processor power of mobile devices;
• some browsers have started blocking Flash by default;
• on iOS mobile devices (iPhone, iPad), Flash display was not provided by the manufacturer;
• popularity of Flash banner ad blocking programs;
• refusal of 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 audience coverage without loss.

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

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

Animated HTML5 banner of a fixed size.
The most popular format in most advertising networks. The width and height of the required banners are selected from the list of those accepted for placement. We will always suggest the most common sizes.

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

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

Often such a banner must be adaptive, taking into account different orientations and resolutions of the mobile device.

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

HTML5 Video banner.

Depending on the settings and requirements of the advertising platform, it can show a video either with autostart or after pressing the “Play” button. May contain control and mute buttons. The video file is usually located on an external hosting and is downloaded when shown.

Gaming interactive banners.
Banners that encourage 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 mouseover event on mobile devices or restrictions on the use of additional scripts). We will always tell you about these features if you are planning to create a gaming HTML5 banner.

“Smart” HTML5 banners (calculators).
They are used to involve and interact with the user, offering him an immediate calculation according to the necessary parameters and a formula specified 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 quickly make changes to the banners without resorting to the help of a developer (for example, frequently changing prices, percentages or quotes). We can cope with this task and output the necessary parameters directly into the HTML code of the banner, where the customer can independently make changes. You can offer another solution that is convenient for you to output the data used by the banner to external files.

HTML5 banners that work with loading external data and API.
At the moment, many advertising networks prohibit banners from reaching external sources. However, if the banner is placed on a site that provides such an opportunity, the HTML5 banner can request the necessary information (text, numbers, quotes) through the site’s API and, having processed 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 image models on the page.

An HTML5 3D banner can be implemented as a rotating object whose edges 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 stretch across the entire width of the page, and a 3D animation can expand on the page depending on user actions.

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

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

HTML5, which gives this banner format its name, is a web page markup language, or, in other words, layout language. And it is laid out according to the same laws as any modern website. It can contain div containers, plug-in fonts, css styles and js scripts. The main element is the canvas animation container. The animation itself is implemented using a java script, often using js libraries specially designed for animation.

That’s right, because we are used to the fact that a banner is one JPG image file or a “gif” or a “flash drive”. But remember, as we wrote above, an HTML5 banner is essentially a mini-site. It contains many files and is supplied to the advertising platform in a zip archive. Inside the archive there is a main HTML file, java script files, libraries, style sheets 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 time it takes to produce a banner and make changes to it. Fortunately, this requirement is rare.

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

If a banner is created for Google advertising services, then an excellent tool for checking the quality of the designer’s work is at your service - Google’s on-line HTML5 validator. It’s easy to use: upload your zip archive with a banner and see if it passes the checklist. Errors will be marked with red icons. If they are not there, your developer’s work was not 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 technical requirements after it is uploaded to the system website. In case of problems, you can receive a comment from the moderator describing the error. Some sites provide the advertising customer with the opportunity to preview the banner on a test page.

Still, the best guarantee of the correct production of an HTML5 banner is the developer’s experience, his knowledge of the technical requirements of advertising platforms and his willingness to promptly correct errors.

Don't be confused. “Java Script banner”, “Canvas banner” - we are talking about exactly what is commonly called an “HTML5 banner”. Depending on the developer tool, js libraries or layout rules may change, but the general assembly scheme remains the same.

The most popular editor among designers for creating HTML5 animations is the Adobe Animate program.

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 disadvantages are limited animation capabilities.

Some designers, often American, 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 a simple text editor. However, this method is not effective compared to using professional animation programs.

The requirements relate to:

• total weight of the HTML5 banner in kb.;
• zip archive structure, number of folders and files;
• list of allowed file formats;
• a way to enable URL links by clicking on a banner (banner firmware);
• list of allowed js libraries on external hosting;
• procedure and restrictions for connecting video and audio files;
• requirements for frame design, disclaimers, frequency and number of animation cycles, load on the device’s 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 that is ready for placement and the start of an advertising campaign without delays.

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 converter of Flash banners to HTML5) has stopped working.

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

You need to understand that any GIF animation is a sequential set of frame images, just like in video files. The GIF file may contain information about the frame playback speed and the number of repetitions. This limits his capabilities.

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

The problem of excess weight. Yes, even banners are susceptible to it. All major advertising platforms set strict restrictions on banner weight in kilobytes.

A GIF banner is good for showing a few static frames, perhaps with a little animation of text, a button, or changing photos. In this case, the total weight of the GIF banner does not exceed 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 this is extremely disliked by advertising networks, which are rightly concerned about how much traffic the user will have to download to view the banner.

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

Banner HTML5 is a banner that displays custom HTML content or an image. The HTML code can be a regular HTML page with styles and scripts. It is placed 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. Having prepared only the image. The presence of a link to go to in the banner parameters regulates the clickability of the image.
2. Having prepared the HTML creative in the editor according to the instructions: or.
If both HTML code and an image are added to the banner, the HTML code will be shown.

Parameters configurable when added to ADFOX:
- Width, height of the banner.
- Own css styles for the banner container.

1. Review the HTML code requirements

• The maximum allowed HTML file size is 65,000 bytes.
• It is preferable to place JavaScript and CSS inside the banner HTML code. If the resulting HTML code exceeds the maximum allowed size, then you need to reduce the code by moving JavaScript and CSS into separate files:
  - save the js and css code into separate files with the extension .js or .css;
  - files should not exceed 300Kb in weight;
  - upload the files to the “Files” tab of the advertising campaign and include the resulting links to the files in the HTML code.

  Example of connecting js and css files:

  HTML code does not allow the use of relative file paths.

• A project can only contain one file with the .html extension.
• The maximum allowed 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 applies to files inside the archive):
  - 300Kb;
  - 1MB for video files.
• File names must contain only numbers or letters of the English alphabet, and the underscore character. It is not allowed to use Russian letters, spaces, quotes and special characters in the file name;
• You cannot use Russian letters in the names of variables and objects.
  The only exception is the text on the banner.
• The format of the finished project is a zip archive.

Use high-resolution images, this will dramatically 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, which means they will look better on all devices - mobile and desktop. They also have a small file size and can be animated.

Acceptable image formats: png, gif, jpg, svg.
Maximum weight of one file: 300Kb.

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

Adobe Animate CC Editor - Single Button Banner

Adobe Animate CC Editor - Banner with Multiple Buttons

1. Download a template for a banner with several buttons

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

3. When adding buttons or movie clips embedded in a scene, it is important to give them an instance name so that you can then add a click to the desired buttons. We recommend using names button1 - button9.

See also:

Instructions for adding a button and assigning an instance name

1. Create some object on the scene, for example, using the Rectangle Tool.
Then select it and select "Convert to Symbol..." from the context menu

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

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

4. Write the code for this button in Actions:

Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning this.button1 //End of the space for the buttons);

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

2. Double-click 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 the this in which it is nested:

Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning this.name.button1 //End of the space for the buttons);

Instructions for creating transparent buttons

1. Select the desired element and convert it to a symbol

2. Enter a name and select Type: Button

3. Double-click on a symbol to go to it:

4. Insert keyframe into hit frame

5. Remove contents of up, over, down frames

6. Transparent button is ready:

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

5. Open a window to write code

Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning //End of the space for the buttons); setAdfox();

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

This.button1

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

This.scene_instance_name.button2

Example of final code in the Actions layer:

Window.buttons.push(//Write the paths of the buttons separated by commas, adding this at the beginning this.button1, this.scene_instance_name.button2 //End of the space for the buttons); setAdfox();

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

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

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

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

Google Web Designer Editor

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

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

2. Click processing.

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

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

In the "Custom Code" tab, specify a call to the click function.

2.1 If one jump button is used:

CallClick();

2.2 If there are several transition 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 is the number of the event that should be called.

Feature of the implementation of a stretching (rubber) banner.

So that the banner stretches across the width of the container in which it will be located on the site, on the panel Properties For position and dimensions, specify percentages instead of pixels.

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

4. Publication of 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 write its own link to navigate to, which will then be passed into the banner code using a variable.

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

Other editors

1. Counting clicks on a banner

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

%banner.reference_user1%

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

Example HTML code for counting banner clicks:

Advertiser's website

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

2. Counting clicks from several links in a banner

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

First link Second link

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

First link Second link

The correspondence of links and variables must be reported to the manager who adds the banner to ADFOX. Since when adding a banner, you will need to specify the first link for Event 1, and the second link for Event 2.

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

Specify banner parameters:

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

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

If there are several links in the banner, add them in the Events tab of the banner, in the transition URL fields.
Please check with the HTML creative developers for the correspondence of link numbers and events.

Link to the measuring pixel - by default the ADFOX pixel is used //banners.adfox.ru/transparent.gif, if you need to keep track of impressions in a third-party system, delete the ADFOX pixel and specify another link.

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

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

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

Banner container class attribute name - specify a name (or several names separated by a space) for the class attribute of the banner container.

Use SafeFrame (yes|no) - safeFrame is a technology that wraps advertising in a special iframe that has a strict API. SafeFrame prevents ads that are rendered within it from collecting data and interacting with the rest of the page outside of 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.

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

Description:

banner with built-in graphics, HTML forms, several links.

Code type:

frame, Poster, Ajax, Extension.

More details:

HTML banners implement graphic objects and interactive mechanisms for interacting with users. An HTML banner can consist of several objects. These can be images (simple pictures), Flash animations, HTML code fragments. For example, one banner may contain several links, depending on where the visitor clicks, he ends up on different pages of the site.

Note: If you need to show a banner when scrolling to a banner location, you can use the Poster code or a special code. Otherwise, use standard Ajax or Extension codes.

Prepare the banner HTML code. This can be any HTML code, including HTML 5, which is an HTML layout of a banner with CSS styles and JavaScript code. It is preferable to place JavaScript and CSS inside the banner’s HTML code, rather than including them as separate files. However, if necessary, the use of separate files is also permitted. You can use both absolute links to files loaded into the banner (various images and Flash files) and relative ones.

Important: When using relative paths to files, it is necessary that all banner files must be located in the same folder as the HTML file being prepared. Those. There should be no additional folders for images, js files or media files. The names of all banner files must match .

Note: For banners based on IFrame code (dimensional), the HTML file of the banner must be called index.html .

Note: If the banner uses additional scripts, their name must be different from script.js . The name script.js is reserved for the banner control script.

By default, clicks in an HTML banner are not counted. To count clicks, you must make changes to the banner HTML file according to one of the following instructions:

• Click-to-click firmware for HTML creatives
• Open the HTML banner file with a text editor. Include the html.js file:

  If the banner is located on a third-party server, specify the full path to the html.js file:

  Note: There is no need to download the html.js plugin or create it yourself. This plugin is hosted on AdRiver servers and you can simply connect it in the prepared file.

• To count clicks and follow the link specified in the system when loading a banner (Banner Link field), use the ar_callLink function. The function can be called upon any event for any tag in the banner code, for example: Go to the site

  Go to website

  Possible parameters:

  event object (click, mousedown, etc.). When passing this parameter, the click coordinates inside the IFrame with the banner will be added to the click link

  All parameters are optional.

• to count clicks on links in an HTML banner using the AdRiver click link

You can also use the instructions. However, in this case, clicks are counted in a separate banner and are shown in advanced banner statistics, but are not shown in campaign or script statistics.

The size of the uploaded files must match .

Note: For HTML banners on codes together with a control script. Read more.

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

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

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

And given the fact that mobile devices are increasingly used to view Internet resources, this is very important.

I already described the main one and its placement on the site in the previous article. So today I’ll pay attention to creating a 3D effect and cyclic (repeat) settings. We will also look at several settings for “events”.

It is quite difficult to describe this entire process in detail, so I offer you a video tutorial. This will make it much easier to master the material. Also, download the archive with my banner project as a visual example.

The final look of the banner ultimately 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 assemble everything correctly in the visual editor.

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

As an example, I 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 blanks, write about it in the comments.

It is also important to think about the overall composition of the banner and the script. This determines how the banner will be perceived as a whole.

So, by analogy with the previous article, launch the editor and create a new project.

The 3D effect implies 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 will be correct. But, it’s more convenient for me to work with the DIV side.

So, to create a DIV block, in the left panel select "Tagging Tool (D)".

Be sure to assign an ID. And adjust the sizes using the section "Properties" in the right panel.

Now you need to select the block. To do this, in the left panel select "selection tool (V)" and double-click the left mouse button on the frame of the DIV block. It will change color to red.

And now the most painstaking process begins. You need to expose all the elements of one single image.

I have the following items at my disposal:

- Top side.

— Side (consists of three separate parts).

First, place the reverse (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 shift along the Z axis.

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

Note: see the screenshots for exact displacement numbers.

Next, add the side, all the parts separately. For ease of placement, use the tools "3D rotation of work area" And "Scale". They will help you accurately adjust all the details.

To begin with, I suggest that you 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 line up the upper left corner.

Now the central part of the side.

And the bottom corner on the left side.

Be sure to align all side elements at 90 0 along the Y axis.

Now you need to copy the desired layer and paste it again, renaming it 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 the duplicate CTRL + V.

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

Upper right cover.

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

The hardest work is over. Now you can start setting up the animation. As a visual demonstration, let's rotate the image.

The first step is to exit the DIV block, which contains all the image elements. That is, we worked inside a block with specific images, and now we will need to work with all images simultaneously, managing the DIV block.

To begin, click on the DIV button in the bottom panel.

So, on the time chalet, by clicking the right mouse button, you create two key frames. It should look like this:

The location of the original frame on the Y scale is set to -90 0 .

We set the first key frame (the second one) on the Y scale to 0 0 .

Set the second key frame (third in a row) to 90 0 on the Y scale.

You can check the results. To do this, click on the button Play.

True, our image will make only one revolution. In order for the image to rotate constantly or make several revolutions, you need to configure the cycling parameters.

The program allows you to configure several cyclicity (repetition) options. This way you can set up a repeat for all banner elements or for each element separately.

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

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

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

I chose to repeat the animation endlessly. Because in the future I want to configure "Events" so that the rotation will stop when the mouse is hovered and will continue after the cursor is removed.

First of all, we set a shortcut on the first key frame (the second in a row). To do this, right-click 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 you select as a receiver « Page1". There will be no other options there.

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

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

To ensure that the rotation continues after moving the cursor to the side, set up another event.

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

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

Event - mouse retraction

And as an action "Timeline" — « togglePlay".

Action - Continue

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

Just don’t forget to set an event for a mouse click and opening a link. The banner wasn’t created for the sake of beauty, right?

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

That's all for me 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.