HTML5 for Digital Advertising Resources

(Difference between revisions)
Jump to: navigation, search
m (JavaScript Libraries)
(HTML5 mobile rich media)
Line 51: Line 51:
 
''Celtra AdCreator'' <br>
 
''Celtra AdCreator'' <br>
 
http://www.celtra.com/adcreator <br>
 
http://www.celtra.com/adcreator <br>
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. <br>
+
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. <br>
  
 
''Crisp Engage'' <br>
 
''Crisp Engage'' <br>

Revision as of 15:41, 13 February 2013

Contents

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

The HTML5 Tools section is an industry attempt to bring clarity on the different types of tools available to both designers and developers in HTML5 ad creation. Designers will need tools that focus on producing the creative assets, developer’s tools for the CSS, JavaScript and HTML5 files. This wiki page is open to any contributor wanting to suggest applicable HTML5 tools for designers or developers. To suggest a tool for this Wiki, please include the following criteria:

  • Tool Name
  • Tool Audience (Designer/Developer)
  • Tool Category (as listed in doc, depends on audience)
  • Tool Purpose & Best Practice


For Designers

Image Creation Tools

Adobe Photoshop
http://www.adobe.com/products/photoshop.html
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

Adobe Edge
http://html.adobe.com/edge/animate/
HTML5 animation tool has familiar Adobe UI. Relies heavily on external JavaScript libraries that generate output which can be too heavy for mobile.

Sencha Animator
http://www.sencha.com/products/animator
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.

Tumult Hype
http://tumult.com/hype/
Key frame-based animation tool that generates HTML5 content for desktop and mobile. Compatible only with Mac.

Flash converters

Adobe Flash Professional Toolkit for Create JS
http://www.adobe.com/products/flash/flash-to-html5.html
Convert SWF files with core animation, classic tweens, and sounds to HTML5 using Flash Professional. Intended to “jump-start” your designs for HTML5.

Google Swiffy
https://www.google.com/doubleclick/studio/swiffy/
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
http://html.adobe.com/edge/
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

Celtra AdCreator
http://www.celtra.com/adcreator
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.

Crisp Engage
http://www.crispmedia.com/content/crisp-engage
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.

InMobi Studio
http://www.inmobi.com/studio/
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.

For Developers

Browser Reference

Can I Use
http://caniuse.com/
Extensive reference on browser support for HTML5 and CSS3 features

JavaScript Libraries

jQuery
http://jquery.com/
JavaScript library for simplifying requirements on event handling, Ajax interactions, DOM manipulation, and animation. jQuery is part of many desktop websites with large support community and plugin creators. Limited in mobile capabilities/usage.

GreenSock JavaScript animation library
http://www.greensock.com/tag/javascript/
Commonly used for JavaScript-based animations, familiar to ActionScript developers in Flash.

modernizr
http://modernizr.com/
JavaScript library to detect HTML5 and CSS3 features in the user’s browser. Provides conditional resource loading to build experiences that downgrade gracefully.

Code compression

YUI Compressor
http://developer.yahoo.com/yui/compressor/
Command-line tool to compress and obfuscate JavaScript and CSS. Can be incorporated with build tools or online versions are available.

JSMin
http://www.crockford.com/javascript/jsmin.html
Command-line tool to compress JavaScript. Can be incorporated into build tools or online versions are available.

Image compression

Yahoo! Smush.it
http://www.smushit.com/ysmush.it/
Online lossless optimization tool that analyzes a web page and provides compressed images.

PunyPNG
http://www.punypng.com/
Online lossless optimization tool that creates compressed images from uploaded images.

Sprite Generators

SpriteMe
http://spriteme.org/
Online and bookmarklet tool to create a sprite image and corresponding CSS from an HTML page.

CSS Sprite Generator
http://spritegen.website-performance.org/
Online tool to create a sprite image from a .zip package of images.

SpritePad
http://wearekiss.com/spritepad
Web application with drag-and-drop features to create a sprite.

Spritemapper
http://yostudios.github.com/Spritemapper/
Command-line tool to create sprite images from a folder.

Web fonts technology

fonts.com
http://www.fonts.com/
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.

Adobe Typekit
https://typekit.com/
Commonly known foundry of web fonts, but limited tool support.

Video

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.

Browser Support

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:

Desktop:
FireFox: Theora/OGG, VP8/WebM (possible future plans for H.264/MP4)
Internet Explorer:
IE8 - No HTML5 Video support use Flash
IE9+ - H.264/MP4
Safari: H.264/MP4
Opera: VP8/WebM, Theora/OGG
Chrome: H.264/MP4, VP8/WebM and Theora/OGG (possibly dropping support for H.264/MP4 in future releases)
Mobile:
iOS - H.264/MP4
Android*: H.264/MP4 and VP8/WebM (2.3+)
Blackberry - H.264/MP4
Windows Phone - H.264/MP4

Notes: Android's HTML5 video support is highly fragmented between OS versions and devices. WebM will work in IE9 and Safari provided the user has the WebM codecs installed. H.264 for older mobile devices requires special video transcoding properties, such as a Baseline profile.

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.

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

Animation

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.

Canvas
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

Explorercanvas
The only browser currently without Canvas support is IE versions 6-8. To provide Canvas support to users with older browsers, a workaround called, Explorercanvas (excanvas.js) can be implemented which is an open source JavaScript library that implements the canvas API in Internet Explorer. To use it, we must include the following
<!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]-->

The JavaScript file can be downloaded here: http://code.google.com/p/explorercanvas/
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
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox