HTML5 Banners
from RUB 2,299
RUB OrderCurrently, HTML5 banners are the only relevant 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 against Flash technology have accumulated in the area computer security and increased consumption of processing power of mobile devices;
- some browsers have started blocking Flash by default;
- on mobile iOS 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.
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 (an interactive banner).
In terms of animation, such a banner can show vector animation (without scaling losses), 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. From the point of view of adaptability, an HTML5 banner can stretch across the entire width of the page, revealing additional panels or expand to full screen.
Let's look at the main types of HTML5 banners.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 such a task and derive required 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.
On this 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 through the site API necessary information(text, numbers, quotes) and having processed them according to a given algorithm, show them 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 various formats– our specialists can always do this.
HTML5 banner - what is it technically?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.
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 file JPG pictures or “gif” or “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.
How can I view the sent HTML5 banner on my computer?Very simple. Unpack the zip archive and open the one inside HTML file in your browser.
How can I check that I have received the correct HTML5 banner?If the banner is created for advertising Google services, then at your service is an excellent tool for checking the quality of the designer’s work - the on-line HTML5 validator from Google. 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 for placement 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.
Is a banner with animation in Java Script different?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.
How to create an HTML5 banner?The most popular editor among designers for creating HTML5 animations is 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 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 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.
Technical requirements for HTML5 banners.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.
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 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 situation the right decision will be - order the creation of a new set of animated banners, in a modern and universal format HTML5.
What about “gifs”?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.
GIF banner cannot work with vector graphics, create animation programmatically, adapt to right 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 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.
1. Banner cardDescription:
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 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.
2. Banner preparationPrepare 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, use separate files also allowed. 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. should not appear 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.
3. Accounting for clicks in the bannerBy 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 text editor Banner HTML file. 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 just need to 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.
4.2. Loading HTML banners using Extension / Poster / Ajax codes as Generic banners 4.2.1. HTML banner on Poster / Extension codeVariables:
banner width. Enter your value
banner height. Enter your value
calling a third-party counter. If not required, leave the value empty
The Internet is filled with advertising. On many sites this is an eye-catching advertisement for slimming brushes, on others it is Yandex.Direct or Google AdSense. And only on some you can see beautiful banners that do not irritate users by their mere appearance. From my review you will learn how to create a beautiful HTML5 banner yourself without any initial skills.
bannersnack is an online service for creating HTML5 and Flash banners of various formats, which does not require knowledge of code or skills in working with image editors.
The service offers to create two types of banners: a regular banner or a random banner when the page loads. You can also launch your advertising campaign on Google or Facebook using banersnack. But first things first.
banner makerIt is in this section that you can create your first banner. The service offers banners in HTML5 or Flash format. Since everyone is trying to kill Flash, I will describe the HTML5 editor.
When you launch the wizard, several ready-made templates are immediately offered:
Of course, the opportunity to create a banner from scratch never goes away. At the top of the wizard the size of the future banner is indicated:
When choosing a size, the patterns will also change. It is best to give preference to a predefined size rather than specifying your own, as bannersnack may ultimately refuse to generate such a banner.
When you create your banner, the following editor opens:
On the left is a list of all the banner slides, each of which will have its own picture and text. At the top are the tools for creating a banner, and on the right are the layer properties.
You can add your own picture, text, button, shape or video as a banner. I added an image and a button:
When you select any element, several templates will be offered, but, as always, the final say is yours:
Each layer has three property tabs. Position on the page, color, shape, etc.:
Action by clicking on a layer:
You can specify a transition to the next slide or a link.
Animation properties when changing a slide:
When you've finished editing your banner, simply click Save and choose a name for your banner:
Then a list of all your banners with codes for inserting into the site will open:
It is important to note that when you change a banner on the bannersnack site, it will also update on your site. There is no need to copy the embed code again.
banner rotatorHere, static banners are created that load randomly when the page loads.
The wizard offers to choose from already created banners or create a new one:
When adding your own image, you can only specify the transition URL:
Then all that remains is to get the embed code on the site again:
This is how, with the help of bannersnack, even an inexperienced user can create their own beautiful cross-browser banner.
The contents of the __MACOSX folder and .DS_Store files will be ignored in archives. They are created when archiving on Apple platforms Mac OS X and advertising materials are not required for operation.
-._~, numbers and Latin alphabet.
// after declaring the tags " "
// assign click handlers for them like this:
Transitions in the banner should use the linkN parameter value from the get parameters of the URL to the HTML document as follows: link1 for the first click, link2 for the second, etc. You can use this code:
In order for external links to be valid in a banner, they must lead only to the website of the library manufacturer.
- deformed images and images with noise (artifacts) due to file compression,
— low-resolution images (pixels are visible in the image), images with low graphics clarity.
The call to the videos must be a URL JS call starting from 1. For example, for video 1
var url_video1 = yandexHTML5BannerApi.getVideoURLNum(1);
Playback must be explicitly initiated by the user. It should be possible to stop and resume playback at any time. The video file size must be specified. It is not allowed to play audio separately from video. For security purposes and to speed up downloading, the video file will be hosted on Yandex servers.
An advertiser can count video viewing starts; to do this, when the video play button is clicked, the following javascript call must be processed:
For video 1: yandexHTML5BannerApi.reportVideoStart(1);
For video 2: yandexHTML5BannerApi.reportVideoStart(2);
During such testing, the banner should not consume more than 50% of the processor resources according to the data in the Performance tab in the Task Manager (UpdateSpeed is set to High).
A banner is considered to be consuming too many resources if it uses more than 50% of the CPU resources for a noticeable amount of time (fractions/units of seconds) or the maximum CPU load at its peak is more than 70%.
Optimization of use random access memory is not produced, additional utilities or resident programs are not loaded at startup. After logging in, the amount of memory occupied by various system processes, is about 62-63 MB according to Task Manager.
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.
Preparing to create a banner with a 3D effect.
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 banner composition and script. This determines how the banner will be perceived as a whole.
Creating a 3D object in Google Web Designer.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.
Step 1: Create a DIV block.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 left mouse button click 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:
- Upper 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.
Creating a rotation effect in Google Web Designer.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 chalet of time clicking right button mouse, 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.
Setting up cycling in Google Web Designer.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.
Stops rotation when you hover the mouse over the banner.First things first key frame(second in a row) install a shortcut. 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 on next step choose as 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.
Resumption of rotation after moving the mouse cursor away.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 was not created for the sake of beauty, after all.
Initially, this process may seem complicated, but after a couple of banners, you won’t think so anymore.
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.
Loading...
