HTML5 for Digital Advertising Resources

Jump to: navigation, search
(Animation)
(HTML5 for Digital Advertising Resource Page)
Line 1: Line 1:
== HTML5 for Digital Advertising Resource Page ==
+
== HTML5 for Digital Advertising Resources 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.
+
This resources page is intended to supplement the [http://www.iab.net/html5 HTML5 for Digital Advertising 1.0] 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.
  
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 resource page provides a starting set of information and tools for developers and designers of HTML5 ads, across three core sections: [[#HTML5 Tools|HTML5 Tools]], [[#Video|Video]], and [[#Animation|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.
 
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.
 
'''Content topics:'''
 
* HTML5 Tools for Developers
 
* HTML5 Tools for Designers
 
* Video Browser Support
 
* Video File Size Limit
 
* Animation Feature Detection
 
 
  
 
=== HTML5 Tools ===
 
=== HTML5 Tools ===
Line 28: Line 20:
 
http://www.adobe.com/products/photoshop.html <br>
 
http://www.adobe.com/products/photoshop.html <br>
 
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.
 
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) <BR>
 +
:Source: http://developer.android.com/guide/topics/resources/drawable-resource.html
  
 
===== HTML5 Animation Tools =====
 
===== HTML5 Animation Tools =====
Line 59: Line 54:
 
''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>
http://www.crispmedia.com/content/crisp-engage <br>
+
http://www.crispmedia.com/engage <br>
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. <br>
+
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. <br>
  
 
''InMobi Studio'' <br>  
 
''InMobi Studio'' <br>  
 
http://www.inmobi.com/studio/ <br>
 
http://www.inmobi.com/studio/ <br>
 
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.
 
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"" <br>
 +
http://www.pointroll.com/ad-builder/ <br>
 +
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.
  
 
==== For Developers ====
 
==== For Developers ====
Line 74: Line 73:
 
''Can I Use'' <br>
 
''Can I Use'' <br>
 
http://caniuse.com/ <br>  
 
http://caniuse.com/ <br>  
Extensive reference on browser support for HTML5 and CSS3 features <br>  
+
Extensive reference on browser support for HTML5 and CSS3 features <br>
 +
 
 +
''HTML5 Please'' <br>
 +
http://html5please.com/ <br>
 +
Reference on browser support for HTML5 <BR>
 +
 
 +
''CSS3 Please'' <br>
 +
http://css3please.com/ <br>
 +
Reference on browser support for CSS3 <br>
 +
 
 +
''HTML Test'' <br>
 +
http://html5test.com/ <br>
 +
Reference to test your web content against current HTML5 compliance <br>
 +
 
 +
''Mobile HTML5'' <br>
 +
http://mobilehtml5.org/ <br>
 +
Reference on mobile support for HTML5 <br>
  
 
===== JavaScript Libraries =====
 
===== JavaScript Libraries =====
''jQuery''
+
''jQuery'' <br>
 
http://jquery.com/ <br>  
 
http://jquery.com/ <br>  
 
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. <br>
 
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. <br>
  
''GreenSock JavaScript animation library''
+
''GreenSock JavaScript animation library'' <br>
 
http://www.greensock.com/tag/javascript/ <br>  
 
http://www.greensock.com/tag/javascript/ <br>  
 
Commonly used for JavaScript-based animations, familiar to ActionScript developers in Flash. <br>
 
Commonly used for JavaScript-based animations, familiar to ActionScript developers in Flash. <br>
  
''modernizr''
+
''modernizr'' <br>
 
http://modernizr.com/ <br>
 
http://modernizr.com/ <br>
 
JavaScript library to detect HTML5 and CSS3 features in the user’s browser. Provides conditional resource loading to build experiences that downgrade gracefully. <br>
 
JavaScript library to detect HTML5 and CSS3 features in the user’s browser. Provides conditional resource loading to build experiences that downgrade gracefully. <br>
Line 139: Line 154:
 
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: <br>
 
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: <br>
  
'''Desktop:''' <br>
+
::'''Desktop:''' <br>
FireFox: Theora/OGG, VP8/WebM (possible future plans for H.264/MP4) <br>
+
::FireFox: Theora/OGG, VP8/WebM (possible future plans for H.264/MP4) <br>
Internet Explorer: <br>
+
::Internet Explorer: <br>
IE8 - No HTML5 Video support use Flash <br>
+
::IE8 - No HTML5 Video support use Flash <br>
IE9+ - H.264/MP4 <br>
+
::IE9+ - H.264/MP4 <br>
Safari: H.264/MP4 <br>
+
::Safari: H.264/MP4 <br>
Opera: VP8/WebM, Theora/OGG <br>
+
::Opera: VP8/WebM, Theora/OGG <br>
Chrome: H.264/MP4, VP8/WebM and Theora/OGG (possibly dropping support for H.264/MP4 in future releases)<br>
+
::Chrome: H.264/MP4, VP8/WebM and Theora/OGG (possibly dropping support for H.264/MP4 in future releases)<br>
  
'''Mobile:''' <br>
+
::'''Mobile:''' <br>
iOS - H.264/MP4 <br>
+
::iOS - H.264/MP4 <br>
Android*: H.264/MP4 and VP8/WebM (2.3+) <br>
+
::Android*: H.264/MP4 and VP8/WebM (2.3+) <br>
Blackberry - H.264/MP4 <br>
+
::Blackberry - H.264/MP4 <br>
Windows Phone - H.264/MP4 <br>
+
::Windows Phone - H.264/MP4 <br>
  
 
'''Notes:''' Android's HTML5 video support is highly fragmented between OS versions and devices.
 
'''Notes:''' Android's HTML5 video support is highly fragmented between OS versions and devices.
Line 177: Line 192:
 
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 <br>
 
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 <br>
  
:::'''Explorercanvas''' <br>
+
:'''Explorercanvas''' <br>
:::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 <br>
+
: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 <br>
::: <pre><!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]--></pre> <br>
+
: <pre><!--[if lt IE 9]> <script src="excanvas.js"></script> <![endif]--></pre> <br>
::: The JavaScript file can be downloaded here: http://code.google.com/p/explorercanvas/ <br>
+
: The JavaScript file can be downloaded here: http://code.google.com/p/explorercanvas/ <br>
  
:::'''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
+
:'''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

Revision as of 13:32, 23 July 2013

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox