HTML5 Ads Guide

What are HTML5 Ads

HTML5 ads, also known as rich media ads, include advanced features like animations or other elements that encourage viewers to interact and engage with content. These ads are formatted using HTML5 language, which allows developers to add animations directly into the source code of a page.

These types of ads are like mini web pages and contain multiple file types that can combine HTML, Javascript, CSS, Web Fonts, shared javascript libraries, SVG, WebGL, and other standard assets, such as images. This eliminates the need for plugins like Adobe Flash, which is no longer supported by RollWorks or any of its partners.

Picture1.gif

 

What sizes are supported for HTML5 Ads

Placement Size
Web Video 0x3
Vertical Banner 120x240
Tiny Rectangle 120x60
Skyscraper 120x600
Square Button 125x125
Wide Skyscraper 160x600
Small Rectangle 180x150
Mid Square 200x200
Square 250x250
3:1 Rectangle 300x100
Inline Rectangle 300x250
Half-Page 300x600
Mobile Leaderboard 320x50
Large Rectangle 336x280
Email Banner 400x80
Email Banner 500x100
Leaderboard 728x90
Billboard 970x250

Mobile ad sizes

Please know that the possibility of showing a certain ad size on mobile depends on the publisher. Some publishers may allow certain sizes on mobile and others don't. The most common mobile ad sizes are 320x50, and 300x250.

 

HTML5 Ads Specifications

Field Ad Copy Specs
Supported File Types
  • zip
Maximum File Size
  • Limited to 150KB
Zip compression
  • Each HTML5 ad must be its own zip file that contains all code and assets (including public, commonly used JavaScript libraries). It must contain all files referenced from the HTML document:
    • The root of the folder should be a single, well-structured, and complete HTML document
    • The ad must be loadable into an iFrame (when being served).
    • Supported Shared Libraries: Adobe Edge, CreateJS (Easeljs, Movieclip, TweenJS, SoundJS, and PreloadJS), JQuery, Angular JS, Tumult Hype, Swiffy, GSAP (TweenLite, CSSPlugin, and EasePack).
Links
  • Links must reference file locations.
Secure loading
  • Assets must be loaded securely using https.
Not Permitted
  • Code references to external domains are not permitted (no cross-domain scripting).
  • Local storage or session storage libraries are not permitted.
  • CDN calls are not allowed within the creative's HTML file due to security reasons.
Animation Limit
  • The animation limit for an HTML5 ad is 30 seconds. Looping the animation is not allowed.

 

Technical requirements

  • Use the <!DOCTYPE html><html>, and <body> tags

  • Use the <meta> tags to identify the size of the ad:

    • <meta name="ad.size" content= "width=300, height=250">
  • Declare a clickTag variable. ClickTag is a click-through URL: a shortcut to set the click-through URL in the platform.

    • <script type="text/javascript">
      // Change the value of this string to your URL
      var clickTag = "https://www.adroll.com";
      </script>
    • This must be passed as a parameter to any window.open event in the ad code.

      <div id="clickArea" style="width: 300px; height: 250px" onclick="window.open(clickTag ,'_blank');">

 

Create HTML5 ads

We recommend working with a graphic designer who can satisfy the technical requirements in this article to create your HTML5 ads. Once you have created your HTML5 ad we recommend using this validator tool to ensure the asset is good to go.

If you have a contract with RollWorks our team can assemble HTML5 ads for you after you provide the required assets, the amount of ad assembly requests you can submit depends on your contract. Click here to learn the type of creative services available by package, including HTML5 ad assembly.

 

Upload HTML5 ads to RollWorks

You cannot upload HTML5 ads to the RollWorks platform directly. Please contact RollWorks Customer Support via chat or email and we will upload the ads on your behalf.

 

Creative Best Practices

  • Clear Message: Ensure the message is concise, clear, and tailored to the desired audience. Avoid or minimize using jargon or acronyms where possible.
  • Minimal Text: Keep text minimal and focused, delivering the key message efficiently. Maximum character count of 60-70 is recommended.
  • Professional Design: Maintain a professional appearance with clean design elements and consistent corporate branding.
  • Brand Visibility: Maintain consistent branding throughout the ad for brand recognition.
  • Alignment with Landing Page: Ensure the creative messaging and branding aligns with the landing page it directs users to, providing a seamless experience.
  • Relevant Imagery: Use high-quality images or graphics relevant to the B2B industry or target audience. Select images with a center focus to allow cropping for different ad sizes.
  • Strong Call-to-Action (CTA): Include a clear and compelling CTA that prompts users to take action.
  • Compliance with Ad Standards: Adhere to industry standards and guidelines for ad sizes, formats, and file types outlined in this article.
  • Subtle Animations: Use animations sparingly and strategically to draw attention to key elements without overwhelming the viewer (simple “build-in” animations where elements slide into place are commonly effective). Avoid animations that are purely decorative and add no value.
  • Conservative Timing: Be mindful of animation timing, ensuring that animated elements are on screen long enough for viewers to digest the information but not so long that they become impatient or lose interest.
Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Chat with an agent
Mon - Fri 10am - 6pm EST
Send a support email
Mon - Fri 10am - 6pm EST