HTML5 for Digital Advertising Resources
- 1 HTML5 for Digital Advertising Resource Page
- 1.1 HTML5 Tools
- 1.1.1 For Designers
- 1.1.2 For Developers
- 1.1 HTML5 Tools
HTML5 for Digital Advertising Resource Page
This IAB Wiki is intended to be a supplemental resource to the HTML5 for Digital Advertising 1.0 document and other future developments from the IAB HTML5 Working Group. Initial content listed on this page are suggestions from the HTML5 Working group which is comprised of participants from web and mobile ad creation practitioners. It is the working group’s goal to begin establishing a common ground for HTML5 ad creation and optimization while also offering general guidance to designers and developers transferring skillsets.
Although not comprehensive, the resource page provides information for developers and designers of HTML5 ad creation, and is currently broken out into three topics: HTML5 Tools, Video and Animation. As the industry adoption of HTML5 evolves and the working group continues to create and share its guidance, so may the content within this resource page change.
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.
- HTML5 Tools for Developers
- HTML5 Tools for Designers
- Video Browser Support
- Video File Size Limit
- Animation Feature Detection
- 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.
HTML5 Animation Tools
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.
Adobe Flash Professional Toolkit for Create JS
Convert SWF files with core animation, classic tweens, and sounds to HTML5 using Flash Professional. Intended to “jump-start” your designs for HTML5.
Convert SWF files (SWF 8 and AS 2.0) to HTML5. Output includes images as Base64 so further optimization is limited.
HTML5 website tools
Abode Edge Tools
Adobe’s HTML products includes tools building animations, responsive layouts, hand-coding, mobile device previews, web fonts, and hybrid app building. Intended for designer-developers building HTML5 websites, limited in ad creation best practices.
HTML5 mobile rich media
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 and custom JS to develop on top. AdCreator offers a many formats and features, including location based and social media features.
Web application to build, manage, and measure multi-platform rich media ads. Generates HTML5 ads from templates or from scratch with an emphasis on mobile. Includes MRAID support, ad tester, web-font components, animation importers and creation wizards. Provides universal 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.
Can I Use
Extensive reference on browser support for HTML5 and CSS3 features
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.