HTML5 Guidelines

Must be an HTML Document that follows W3C standards:

• Web browsers should render the ad like a web page
• Content must be preceded by the HTML tag and contain at least and tags

Relative references to assets are preferred, however, if a remote reference to a file is required, please ensure that it is included using the HTTPS protocol. Please see the restrictions section for additional information on remote references.

• Must be SSL compliant
• Must be compatible with SafeFrame
• Animation length cannot exceed 15 seconds
• Define Ad Dimensions:

<meta> tags can be used to identify the size of the ad creative

For example: <meta name='ad.size' content='width=300, height=250'>

Restrictions

• Loading files from cross domains is not permitted for security reasons (except for Whitelisted Public Libraries (see Tools and Libraries below for more information
• JSON: Files with the .json extension are not allowed for cross-domain security reasons.
• All creative is subject to approval by Yahoo
• Local and Session Storage Policy

As per the standard, content in an iframe is forced into a unique origin and is prevented from accessing content from the top-level origin if they are different. This prevents access to cookies and localStorage.

Tools and Libraries

When using common, public JavaScript libraries, please do not customize the framework as customizations may not transfer when the ads are ported.

Mobile

• Rollover code may cause user experience issues when included in mobile/tablet creative
• For highest quality images it is best to provide retina size assets

Code and Asset Compression

• HTML5 does not automatically provide optimizations for code and assets. Several methods exist for compressing the code and assets within HTML5:

1. HTML text should be used whenever possible to reduce file weight, improve readability, scalability, and accessibility
2. Code minifiers should be used to remove extra spaces and unnecessary characters from the code.
3. Use PNG “crushers” that losslessly compress images to balance image quality with file size.
4. Use CSS Image Sprites