Introduction to HTML5 Banners
How can you simply create a dynamic banner for your company without a deeper knowledge of the HTML5 language?
The easy years when creative departments of digital and media agencies, graphical studios or specialized client departments used Adobe Flash to create dynamic web banners are gone forever. The twilight of this technology has become well apparent. We can speculate about and discuss what caused the technology's progressive decline (possible reasons include e.g. the rise of mobile devices not supporting this technology, security risks, etc.), but one thing is certain. There is and will be a need to find an adequate replacement. HTML5 is a currently hot candidate and a potentially strong solution in the field of banner advertising, although even this technology faces many initial problems. Nevertheless, the potential HTML5 offers is huge.
HTML5 represents a combination of the already established HTML, CSS and JS languages, which were improved to bring major new features and changes. Furthermore, we can rely on a relatively large support in the most popular web browsers (Internet Explorer, Chrome, Firefox, Safari) and therefore nothing prevents us from starting to use the HTML5 technology while respecting certain minor rules and restrictions.
In the wide range of available new tools – whether they are independent desktop programs or web applications that can be used to create HTML5 banners – we decided to select the hottest candidate, Google Web Designer (GWD). Google offers a beta version of this tool for free download together with many related materials and manuals. Since Google itself operates one of the largest advertising systems, everybody would rightly expect that the program will be debugged so that its outputs are as compatible with the Google AdWords advertising system as possible. However, as mentioned above, the program is still in beta, which means there are still some imperfections. You will reveal them in the course of your work or you can read about them in posts on online forums where developers often try to help desperate designers solve their possible problems. That is another limited form of support available for you.
You can create more than simple banners and animations in GWD. The program also allows for the use of sophisticated responsive functions you can simply choose in the created banner's settings. You can choose among these types of advertisements: “banner” (a simple or animated banner), “expandable banner” (a banner which expands its size when a user rolls over it), and “interstitial banner” (a banner displayed in mobile applications and games). In addition, you may create even simple websites in GWD, but the program is not fully suitable for this purpose yet. Another thing a designer can set and which suggests the applicability and versatility of the program is the possibility to choose the environment to use the banner in (Doubleclick, AdMob, AdWords and a universal non-Google ad).
The possibilities to work with animations are quite limited, which may satisfy beginners. An experienced animator may be a little disappointed, but it should be noted that the functionality was tailored to what the HTML5 technology stably provides and can do.
Predefined types of “easings” (starts and finishes of animations) will make the users happy. It is also worth mentioning that the program allows you to work with 3D objects and offers a lot of interesting components you can easily place into your banner using the “drag and drop” function (buttons, gestures, swipeable gallery, gallery navigation, carousel gallery, maps, calendar, street view, etc.).
We tested the program and concluded that it was the best tool inexperienced designers, animators, web front-enders or web administrators could use at the moment. Adobe Edge Animate (AEA), part of the Creative Cloud software family, may be an alternative solution. The program is fairly sophisticated and more focused on working with animations than other competing tools. The output is, however, not as neat and compact (the HTML code) as it could be – GWD is more effective and efficient in this case. Moreover, unlike AEA, GWD is available for free.