HTML5 Guidelines

OVERVIEW

HTML5 is an internet markup language used for structuring and presenting content on the Web. In 2014, the World Wide Web Consortium (W3C) formally sanctioned revision 5 of the Hyper Text Markup Language (HTML) standard, its core aim to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). Ads created in HTML5 offer the benefit of working across devices and platforms.


BENEFITS

  • Based on a well-established programming language that many authoring tools and developers can produce.
  • Allows for rapid testing infrastructure that all browsers and devices should be able to process.
  • Can be served into standard iFrame or Safeframe.
  • Preserves HTML standard methods of layering content such as positioning, layering, and opacity.
  • Responsive ad design (when required, specific sizes can be defined in the ad code using standard methods).

GENERAL SPECS

Must be an HTML Document that follows W3C standards.
Supported Image Types: GIF, JPG, PNG, and SVG
Video Format: MP4/H.264, WebM/VP8, OGG/Theora (optional)
Autoplay Video: Audio must be off until user-initiated. Autoplay not permitted on mobile devices.
Audio: Must be user-initiated.

RESTRICTIONS


For security reasons, cross-domain file loading and .json file extensions are not permitted.
All creative is subject to approval by Gawker Media.

DELIVERY


All creative assets (images, code, etc.) should be submitted in a single .zip file. There should be only 1 .html file at the root of the package that starts the ad. The total file weight will be determined by the weight of all zipped assets.

CODE + ASSET COMPRESSION


HTML text or webfonts should be used whenever possible to reduce file weight, improve readability, scalability and accessibility. Fonts may be stored in the ad package as an asset.
Code minifiers should be used to remove extra spaces and unnecessary characters from the code. (e.g., http://minifycode.com/)
Use PNG “crushers” that losslessly compress images to balance image quality with file size. (e.g., http://tinypng.com)
Scalable Vector Graphics (SVG) may be used to reduce file weight. SVG images may be resized without impacting quality and every attribute and element may be animated.
Minimize file count within the zip document to decrease the overall deliverable file size. The more files a creative needs to load in order to render will lead to increased user-perceived latency.
Use CSS Image Sprites.

FILE SIZE

File Size Measurement for HTML5 Ads File weight is measured after all code and assets are stored to a .zip file The .zip file must include ALL assets and reference code such as JavaScript libraries Once the .zip file is uncompressed, the ad (an .html file) must be viewable without a network connection (all code and assets used in the ad are contained in the .zip file) User-Initiated files will not be considered as part of the initial load ad size. File Weight Limits (see individual format pages for additional information)

STANDARD BANNER

Max File Load: 200 KB

RICH MEDIA BANNER

Max File Load: 200 KB
Subsequent Max Polite File Load: 300 KB
Subsequent Max Polite Video Load: 1.1 MB
Subsequent Max User Initiated File Load: 2.2 MB

clickTAGs

All required clickTAGs and interaction calls must be placed within the HTML file without minification or obfuscation. Variables must be included in the first .html file that loads to aid the ad server in locating the variable to substitute the correct value. All clicks and interaction buttons must be instrumented before delivery of the completed ad. When multiple .html files are included, the variable must be present in the first .html file that loads.  

The JavaScript code for clickTAGs is as follows: var clickTAG=“http://www.mylandingpage.com”;

 

Click Destination Methods:

 

  • Use the clickTAG variable for the click event, regardless of the method of navigating within the browser.
  • If using an anchor tag, set the target attribute to “_blank” to ensure that the click destination opens in a new page or a tab: <a href=(the URL of the clickTAG) target=“_blank”> </a>

A typical method is to give the anchor tag a unique ID and assign the href dynamically after page load via JavaScript:

  • HTML
    • <a id=“clickArea” target=“_blank”></a>
  • JavaScript
    • var clickArea = document.getElementById(“clickArea”);
    • clickArea.href = clickTAG;

 

Multiple Clickthrough URLs:

 

  • In instances of multiple clickthrough URLs within the same ad, enumerate click tags as follows: clickTAG0, clickTAG1, clickTAG2

 

DIMENSIONS

For Display Ads, Ad Dimensions must match the placement dimensions in the page where the ad will display unless specifically defined to be responsive.

 

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”.

 

BROWSWER SUPPORT

HTML5 is supported in all modern browsers (Chrome 40 and above; Firefox 35 and above; Internet Explorer 10 and above (including Edge); Opera 20 and above; Safari 7.0 and above).

 

Browser Support Matrix http://html5test.com/results/desktop.html.

 

Browsers automatically handle unrecognized elements as inline elements and older browsers can be “taught” to handle “unknown” HTML elements. However, Internet Explorer 8 and earlier does NOT support styling of unknown elements (so a backup image needs to be served).

 

HTML5 defines eight new semantic, block- level elements. To secure correct behavior in older browsers, set the CSS display property to block. For example:

 

     header, section, footer, aside, nav, main, article, figure {
          display: block;                    
     }

 

BACKUP IMAGE

HTML5 ads must be compatible with the browser to display as intended and API adoption varies by product. It is in the interest of the advertiser and user alike that something is rendered when the ad is served, regardless of the browser compatibility.

 

  • <noscript> tag must be applied to serve a backup image to users who have disabled JavaScript or using a browser that does not support client-side scripting.
  • As noted above, if the browser is unable to render the ad, a backup image should be served.
  • “Graceful Fail” is recommended if a feature is not available. For example, if the geographic location is not available, the ad can fall back to providing text box for the user to enter the Postal Code.

 

IN-BANNER VIDEO

Implementing an HTML5 Video Element

Define the video within the HTML5 code using the following tags: <video></video>

 

Defining the video includes providing the source filename and setting the width and height. You can also indicate default video player controls, style your own in the CSS file, or leave them out altogether. Attributes can be included to customize the video experience for your particular use case.

 

To ensure proper functionality across both HTML5-supported and non-supported browsers, use code to detect browser and device details. When HTML5 is not supported as needed to play the video, design the ad to “degrade gracefully.”

 

Video In Mobile Devices

 

Many mobile devices only support full-screen video playback, and in cases where video is rendered in the native video player at full screen, custom controls do not apply. Only video plays and completed views may be tracked for mobile video.

 

Transparency

 

Alpha transparency is not supported in any codec or wrapper format using the HTML5 video element. There are ways to achieve this effect using JS canvas and video alpha channels. For mobile, use the fallback to a clickable link to view the video.

 

ANIMATION

Avoid CPU intensive animation effects and consider proper use of JavaScript time controls (e.g., setInterval, setTimeout, requestAnimationFrame), animation loops, or DOM element manipulation, then optimize accordingly.

 

CSS or JavaScript may be used for animation. Wrap JavaScript and CSS in closures or namespaces to reduce potential conflicts. Contain JavaScript or CSS in a unique namespace or wrap in a closure to make ad code portable and prevent issues with the page code .

 

CSS3 animation uses GPU which minimizes impact to CPU for rendering animations.

 

JavaScript animation can be used to move and manipulate DOM elements or by using the Canvas element. Creative should contain code that checks browser support for Canvas element. When Canvas is not supported as needed to play the animation, design the ad to “degrade gracefully.”

 

In general, follow industry-established and widely accepted JavaScript best practices. Consider the following suggestions:

 

  • Optimize loops and timers.
  • Minimize DOM access.
  • Ensure performance.
  • Use Feature detection versus Browser detection for efficiency.
  • Do not using ‘eval ()' functions due to security risks.
  • Avoid global variables as they may result in naming conflicts and cause code to break.
  • Account for syntax differences and requirements between browsers (particularly IE).

Frame Rate does not impact performance in HTML5 in the same way it does with Flash. Use one of two methods to run animation at the allowable pace of the browser:

 

  • requestAnimationFrame (use whenever possible as an alternative to setInterval)
    • creative should contain code that checks browser support for requestAnimationFrame feature.
  • setInterval (use as a fallback for older browsers (IE9 and earlier))
    • setInterval is code and computer resource intensive and should be avoided.