HTML5 for Digital Advertising Resources
- 1 HTML5 for Digital Advertising Resources Page
- 1.1 HTML5 Tools
- 1.1.1 For Designers
- 1.1.2 For Developers
- 1.2 Video
- 1.3 Animation
- 1.1 HTML5 Tools
HTML5 for Digital Advertising Resources Page
This resources page is intended to supplement the HTML5 for Digital Advertising document and other future developments from the IAB HTML5 Working Group. This page has been seeded with suggestions from the HTML5 Working Group, with participation from web and mobile ad creation practitioners. It is the Working Group’s goal to establish a common ground for HTML5 ad creation and optimization while also offering general guidance to designers and developers transferring skillsets.
This resource page provides a starting set of information and tools for developers and designers of HTML5 ads, across three core sections: HTML5 Tools, Video, and Animation. The contents of this page will be updated as the industry adoption of HTML5 evolves and the HTML5 Working Group creates and shares new guidance.
This wiki page is open to any contributor wanting to suggest or update content relevant to the available sections, and it should be considered an open space for industry knowledge share. The IAB does not intend to promote any product or services over another within this resource, and we recommend each company research and evaluate which products and services work best for their own organization.
- Tool Name
- Tool Audience (Designer/Developer)
- Tool Category (as listed in doc, depends on audience)
- Tool Purpose & Best Practice
Image Creation Tools
Photoshop is used for layered image creation. Creatives should be saved as PNG, JPG or GIF and other tools may be required for sprite creation or size optimizations. Note that Animated GIF images are not supported on many mobile devices.
- Note: Android supports bitmap files in a three formats: .png (preferred), .jpg (acceptable), .gif(discouraged)
- Source: http://developer.android.com/guide/topics/resources/drawable-resource.html
HTML5 Animation Tools
Adobe Animate CC
Formally known as Adobe Flash Professional, this familiar ad creation tool allows ad creators to produce interactive and animated ad experiences and publish them to multiple platform including HTML5 Canvas, which enables the ads to reach viewers on virtually any desktop or mobile device. The tool contained a large collection of ad-specific features that make the ad creation process extremely efficient and easy to master especially for ad creators with previous Flash experience. Designers can also use the tool to convert existing SWFs over to HTML5 format (http://www.adobe.com/products/flash/flash-to-html5.html). There is also an informative Adobe Animate Team Blog that features tutorials and useful references for ad creators: http://blogs.adobe.com/animate.
Standards-based HTML5/CSS3 animation tool with key frame control and strong cross-platform support. Extra attention given to mobile ad creation including MRAID-compliant output.
Key frame-based animation tool that generates HTML5 content for desktop and mobile. Compatible only with Mac.
Google Web Designer
Cross-platform keyframe-based HTML5/CSS3 animation tool with 3D animation, prebuilt and custom components, and direct integration with DoubleClick, AdMob, and Adwords platforms
Adobe Animate CC
Designers can also use the Animate CC tool to convert existing SWFs over to HTML5 format
Convert SWF files (SWF 8 and AS 2.0) to HTML5. Output includes images as Base64 so further optimization is limited.
HTML5 website tools
Adobe Creative Cloud
Adobe’s suite of designer and developer products includes tools for creating animations, responsive layouts, hand-coding, mobile device previews, web fonts, and hybrid app building. Many tools of the tools are well suited for designer-developers building HTML5 websites and ads alike, with good support for ad creation best practices.
"Google Web Designer"
Cross-platform tool for designing HTML5 and CSS3, including visual and code based tools for keyframe-based animation and 3D transforms
HTML5 Creative Platforms
Cloud-based creative optimization and media buying platform for video and content-based HTML5 mobile rich media ads. Aarki Encore allows brand marketers, agencies, app developers and publishers to quickly create, flight and optimize high performing mobile ads. Aarki Encore comes with drag-and-drop widgets, top-of-the-line animation, retail inventory feed integration, dynamic distance, high performing ad templates, automatic encoding, dynamic optimization and more.
Web-based platform for creating, trafficking, and tracking HTML5 mobile rich media ads. AdCreator is an OS and device-agnostic tool with drag-and-drop interface, pre-built components, custom JS to develop on top that lets users create an ad once and run it across many media owners. Offers dynamic ads and a wide array of platform-based, pre-tested formats and features, including location based and social media features.
Web application to build, manage, and measure multi-platform rich media ad campaigns. Generates HTML5 ads from templates or from scratch with an emphasis on mobile. Includes MRAID support, ad validator and tester, importers for animation tools, video encoding, and image editing. Creative wizards leverage a library of ad features including web fonts, retina support, geo-location and social APIs. Provides pre-tested universal ad tags for desktop and mobile ad servers
Platform to build, run, and measure mobile rich-media ads. Drag-and-drop interface with library of components for common ad-based features like video, geo-location, and gestures. Generates output for smart phone and tablet devices that is MRAID compliant
PointRoll's Composer Ad Builder"
Currently in development, build and output interactive, multi-device digital display ads in both Flash & HTML5 via a single tag — without using Flash authoring software & without writing a single line of code. For both designers & developers who want to dramatically cut production time
Sizmek Ad Builder for HTML5
A rapid, codeless HTML5 interactive and animation tool for authoring standard and rich media experiences across desktop and mobile. With point and click components and responsive capabilities, HTML5 ads can either be built from scratch or created from included or user-defined templates. Integrated directly into the Sizmek MDX platform, Ad Builder for HTML5 also benefits from over a decade of robust ad serving features, including dynamic creative, sequenced messaging, and granular creative analytics
Google Web Designer
Cross-platform tool for creating rich media and dynamic ads, using keyframe-based HTML5/CSS3 animation, 3D tools, prebuilt and custom components, and direct integration with DoubleClick, AdMob, and Adwords platforms
Platform for building fully responsive creative in HTML5
The Responsive HTML5 creative design studio, cloud-CMS and dynamic element-server to maximize creativity and produce the most pixel-perfect premium ads that can STRETCH dynamically into any ad slot. STRETCH Creatives are the lightest possible and dynamically optimized cross-screen. Included is a gallery for different code snippets, media assets-fonts, brand impact formats and templates to make it easy for the non-techie, designer or developer to quickly produce one Responsive Ad that will work on any screen (e.g. wearable, mobile, tablet, desktop,TV, signage) efficiently and sequentially dynamic.
Can I Use
Extensive reference on browser support for HTML5 and CSS3 features
Reference on browser support for HTML5
Reference on browser support for CSS3
Reference to test your web content against current HTML5 compliance
Reference on mobile support for HTML5
CreateJS is a suite of four modular libraries that accelerate the production of rich interactive experiences such as games, ads, data visualizations, and micro-sites. The four libraries in the suite can be used together or completely independently, and are focused on specific areas of functionality that enable rich interactive content on open web technologies via HTML5. The EaselJs library in particular, makes working with the HTML5 Canvas element easy and will be familiar to developers who previously worked with ActionScript. It is very useful for creating ads, games, generative art, and other highly graphical experiences.
Zepto is an open source jquery compatible library. If you know jquery, it is easy to use zepto. Zepto offers a very lightweight (~5-10k) library download and fast execution. It may be limited in functionality
ImageOptim & ImageAlpha
ImageOptim/Alpha is a free app that makes images take up less disk space and load faster, without sacrificing quality. It optimizes compression parameters, removes junk metadata and unnecessary color profiles.
TinyPNG/JPG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size.
Online lossless optimization tool that analyzes a web page and provides compressed images.
Online lossless optimization tool that creates compressed images from uploaded images.
Online and bookmarklet tool to create a sprite image and corresponding CSS from an HTML page.
CSS Sprite Generator
Online tool to create a sprite image from a .zip package of images.
Web application with drag-and-drop features to create a sprite.
Command-line tool to create sprite images from a folder.
Web fonts technology
Foundry and tool provider for web fonts. Provides Photoshop plug-ins and HTML building and font-download-optimization tools to incorporate web fonts into creatives.
Commonly known foundry of web fonts, but limited tool support.
Our goal is to create a directory of web fonts for the world to use. Our API service makes it easy to add Google Fonts to a website in seconds. The service runs on Google's servers which are fast, reliable and tested. Google provides this service free of charge.
The HTML5 Video section is a resource for finding the updated browser support and streaming delivery technologies available for browsers and devices. Although the working group will periodically update content within these topics, this section is open to any contributor seeking to provide any new or known updates not yet posted.
While the HTML5 video element is widely supported among the latest major browser vendors, the video asset itself needs to be transcoded into a few different formats to ensure cross browser functionality. The following section allows you to check the most updated browser support:
The following website allows you to check the most updated browser support:
MPEG-4/H.264 is most widely supported format for all browsers except IE8
MPEG-4/H.264 is most widely compatible format for all mobile phone browsers except for Opera Mini and partial support for Android browser 4.3 and below
Other formats to consider are:
WebM/ Vp8 or VP9
Streaming delivery technologies
There may not be a standard just yet but there are a few technologies we encourage to use when target ads to specific browsers and devices. The following video delivery technologies intended to reduce the video file weight through transport, but not all are supported by all browsers and devices. Delivery specifications are set to evolve in the coming years with the promise of an industry standard. Since most video delivery through the HTML5 video element is a progressive download from server to client, it's encouraged to keep this information in mind when serving video with higher file size to users on devices tied to a cell carrier, as they're often restricted to a limited bandwidth data plan.
HTTP Live Streaming (HLS)
Delivery specification by Apple used to segment a video file into smaller transport streams and deliver it to an end user by way of an .M3U8 file. The M3U8 file is a description file instructing the HTML5 video player on how to playback the video segments. Supported in iOS, Safari and Android 3.0+
MPEG-DASH (Dynamic Adaptive Streaming over HTTP)
Delivery specification similarly as HLS but its instruction file is an .MPD (media presentation description file). Although not supported in any major browser, it does show promise as a ubiquitous streaming solution in the near future as public support ranges from Microsoft, Adobe and Akamai. While not supported in any major browser just yet. More information is available here: http://dashif.org/software/
HTML5 Adaptive Bitrate Streaming
Emerging video delivery technology that sends segments of a video to a user without incurring the extra overhead of progressively loaded content, it also detects bandwidth constraints of the user and adjusts video playback quality accordingly. Support exists with Apple's HTTP Live Streaming (HLS) specification, and in Safari and iOS
Feature Detection for Canvas
Feature detection is used to detect whether features built into an HTML ad are supported in the browser, and if not supported, offer an alternate experience that is executable based on supported features. This section provides guidance in the feature support for Canvas in select browsers. Please note that it is not the exact code to run this function, but the practice to perform the feature detection check that is the recommendation within this resource section.
If Canvas is not supported by the user’s browser, the feature detection should provide a fallback user experience. This feature, as well as all new web technology features and functionality can be checked for compatibility on this site: http://caniuse.com/#feat=canvas
<!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]-->
- Note Please be aware that this script does not support all Canvas features that may be utilized within any given ad unit and performance can be slow and should be used cautiously