Moving from Flash to HTML5
Flash will be deprecated this September when Chrome will release its newest version which will prevent Flash from automatically playing. Firefox is planning to do the same, this means that Flash will cease to be a viable option for advertising from mid of September. We did a blog post around this: The Decline of Flash and the Rise of HTML5
In shortly, this means that it's about time to move from Flash to HTML5 and here are main things you need to know.
Adform has a special tool for building HTML5 ads specifically for Adform platform - Adform Studio.
Here is short intro: Adform Studio Intro
Other HTML5 building tools
Adform accepts banners made with other HTML5 building tools (such as Adobe Edge, Google Webdesigner, etc). However they must have clickTAG implemented according our specs. They can be "Adformified" in two ways:
There are many Flash-to-HTML5 converters online, however mostly all of them are still limited so we don't recommend to use them:
- usually works only with simple standard Flash banners with basic animation
- banner edit (making banner modifications) becomes very complicated
- possible increase of banner weight
If you have banner converted with Google Swiffy, please check our specs of how to add clickTAG in Swiffy banners .
HTML5 banners made by other converters must also have clickTAG added according general Adform clickTAG specs.
Standard HTML5 vs. Mobile in-apps (MRAID)
If banner is going to run specifically in Mobile in-apps placement - then they must be made using special concept called MRAID. More info can be found here: Create a mobile HTML5 banner
In all other cases, when banner needs to run on Desktop or mobile web sites - use Standard HTML5 banner specs.
Once again, Adform HTML5 Studio can save your time and help to build banners according Adform specs in smooth way.
1. The biggest part of banner weight consists of Image weights (especially if you want to use 2x images for them to look good on retina displays). Some tips in regards to reducing weight of images:
- Use proper image formats. JPG is good for photos, PNG is good for graphics (uniform colors, texts on uniform color backgrounds, logos and etc.).
- Adjust JPG quality and size. Sometimes lesser quality but bigger dimensions JPG could look better and weight less than smaller higher quality JPG (it can be more important to have more pixels to show e.g. landscape on retina screen, than have better JPG quality (as e.g. sky is all uniform color so JPG artefacts will not be so apparent)).
- Compress PNGs – use tinypng.com, pngoo, PS “save for web” or similar tool. 24bit PNGs weigh a lot. However if they are not huge compressing them to 8bit (256 colors or even less) will not be visible, however image size can be 50% and more smaller. 2X size 8bit PNG logo can look very good on mobile screen.
- Moreover use SVG for graphics like logos http://caniuse.com/#feat=svg . If you have .ai files or similar it is easy to export them as svg – weight savings ca be dramatic depending on particular case. It will also look super crips on mobile screens as it is vector format.
2. Another big thing in banner can be fonts. Use some tool like fontie https://fontie.flowyapps.com/home to only include needed characters, include only needed font files (it looks like woff can be used everywhere now - http://caniuse.com/#feat=woff).
3. Don’t use unneeded libraries for simple animations and similar. E.g. using jQuery in mobile banner for things like animate() adds a lot of weight while same animation can be done with CSS3. We encourage using native JS and HTML5 features instead of just throwing in helper libraries.
4. Regarding banner performance – not only weight of files matter but also requests made to various servers (especially on mobile) so it is a good idea to put all your code in single file (all css, js and etc). Sometimes it is a good idea to include small images or font files as data URIs to save requests to server and etc.
Do HTML5 banners need a backup?
Backups used to be for Flash banners so no need of a backup for HTML5 banners. However, pay attention that some older Internet Explorer banners don't support some CSS animations and inside banner should some extra code added for such browsers.
Do you have any recommendations on how to embed the font?
Which video files and formats to use in HTML5 banners?
For proper video banner displaying on all browsers you will need to have the following video formats - .mp4 and .webm. If banner will be shown and on mobile devices then you also need to have correctly converted .mpg video format. More information how .mpg video format should be converted you can find here
How to optimize your banner and decrease the banner weight?
This can be done with Adform Studio - when exporting project, select option "Optimize banner and Export". However, HTML5 ads will always have bigger weight than the same type Flash ad.