Rich Media developer's guide

Developer best practices

DoubleClick strongly recommends that you gather site-specific specifications before you build any Rich Media creatives. However, sometimes you need to build creatives or mockups before a final media plan or site specs are available. You can avoid potential live issues with creatives by meeting best practice and lowest common denominator (LCD) requirements.

Best practices and LCDs are generated based on what's acceptable on most sites. There's always a possibility that the website where an ad is running has specs that are different from the ones in this article.

See also the DoubleClick Studio Templates, tags, and previews Help Center article.

For all creatives
  • 40K size limit for initial load
    If your file is over 40K:
    • Create a parent file and use the Polite Load component to load larger files. Subsequent loads should be 60K, for an overall total load of 100K.
      Note: Do not use the Polite Load component with floating or takeover creatives.
      See the Set up a polite load Help Center article for more information.
    • Delete unused components, images, video, etc. from your Flash library.
    • Remove embedded video from your SWF and use the DoubleClick Studio Video component to play FLVs. See the Basic video build guide for more information.
  • 15-second auto-play animation time limit
    Publishers usually don't budge on this point. No one wants to visit a site where ads are blinking and moving all over the place. It's distracting and annoying. Don't let your animation loop.
  • 30-second total auto-play video and animation time limit
    Animation longer than 30 seconds? Stop the animation or add a click-to-continue to the video. Sites won't budge on this point either.
  • On exit, all creatives should:
    • Stop all videos (if creative includes videos).
    • Stop all sounds (if creative includes sound).
    • Resolve the ad to end-frame graphics.
  • Exit conventions for click-through ads
    • Collapse method + exit:If the user is on the expand panel and exits (clicks through), then the ad should collapse at the same time.
    • Expansion timer + exit: The expansion timer should stop at the same time as the user clicks through.
    • Video mute + exit: Sound should mute when the user clicks through from a collapsed or expanded panel.
    • Video timer + exit: The video and the timer should stop when the user clicks through from a collapsed or expanded panel.

    See the click-through exit issues and collapse and video mute upon exit issues articles in this Help Center.

  • Rich Media basic QA checklist
    Be sure to follow QA guidelines in the Rich Media QA guidelines Help Center article to meet basic Rich Media Quality Assurance requirements.
Standard HTML5 creative guidelines

In addition to the guidelines that pertain to all creatives, keep the following in mind for Standard HTML5 creatives:

Standard HTML5 display ads are made up of an HTML file and a file of images. The 40K weight limit should be measured by adding together the sizes of the HTML file and image file.

HTML5 Rich Media creatives include polite loading by default. This means the initial load size of the creative includes only the main .html document (which works sort of like a parent .swf file that loads all of the assets). The enabler and external .js libraries/style-sheets are considered subsequent load and are not included within QA test script.

DoubleClick HTML5 Rich Media creatives are supported only on Internet Explorer 9+ by default (QA test script goes on IE9+). Therefore, in order to fully allow IE8 to render an HTML5 creative, your client requires .css and .js workarounds to make the browser recognize HTML5 correctly.

Video creative guidelines
  • 30-second auto-play video time limit
    If a video exceeds 30 seconds, add a click-to-continue at 30 seconds and add a custom event.
  • 30-second total auto-play video and animation time limit
    Combined animation and video longer than 30 seconds? Stop the animation or add a click-to-continue to the video. Sites won't budge on this point.
  • Host- and auto-initiated video
    There should be no more than 30 seconds of non-user initiated or interacted video. If you're using animation and video, the total should be no more than 30 seconds as well.
  • Audio and video initiation
    All video and audio should be click-initiated (after 15 seconds for audio and 30 seconds for video) with video controls (play/pause, stop, mute/unmute, and replay).
  • To provide an optimal user experience:
    • Always add video controls such as play, pause, mute, and replay.
    • Drag and drop video component controls to manage playback and track all video interactions on your creative. See the article about video component controls for more information.
    • It's best practice to hide the video controls, except for a replay button on video complete.
  • Include a replay button on video complete that replays the video with sound
    This isn't required, but it's considered best practice for Rich Media video creatives.
  • Sound on video should be click-initiated
    • Most sites forbid auto-play video with sound.
    • Auto-play video creatives should include a replay-with-sound/unmute option.
    • Videos that are click-to-play can play with sound. (The click-to-play action makes the sound click-initiated.)
    • For click-to-expand creatives, video that you've included on click-initiated expanded panels can auto-play with sound.
  • Rich Media audio/video QA checklist
    Be sure to follow QA guidelines to meet Rich Media audio/visual quality assurance requirements.
Expanding creative guidelines
  • Expansion size and direction
    • 300x250 creatives should have maximum expansion of 500x250 left and right.
    • 728x90 creatives should have maximum expansion of 728x180 up and down.
    • 160x600 creatives should have maximum expansion of 300x600 left and right.
    • 120x600 creatives should have maximum expansion of 300x600 left and right.
  • Close button required on the Expanding panel
    For all types of expanding creatives: masthead, pre-expand, floater, etc.
  • Hit area/hot spot size for expansion can be no more than 25-33% of the unexpanded area of the creative.
  • Close button shouldn't overlap the expansion hit area.
    This best practice prevents the creative from immediately re-expanding after a user clicks the close button.
  • Expand/collapse methods should match
    If an ad is click-to-expand, then it should be click-to-collapse. If an ad is rollover-to-expand, then it should be roll-off to collapse.
  • Pre-expand creatives must auto-collapse after 15 seconds
    • This follows the same 15-second animation guidelines.
    • If a user interacts with the ad, the ad may remain open.
  • If pre-expand creatives don't trigger the Rich Media expansion timer:
    • Remember: The Rich Media expansion timer can only be called on an expansion triggered by a user interaction.
    • Use the startExpanded() call to pre-expand your creative. See the Expanding build guide for more information.
  • The div layer of a webpage must collapse on your creative's collapse
  • On exit, an expanding creative should:
    • Stop all videos (if creative includes videos).
    • Stop all sounds (if creative includes sound).
    • Resolve the ad to end-frame graphics.
    • Collapse (if creative is expanded).
  • Expanding creative QA checklist
    Be sure to follow our tests as listed in the QA test script for expanding creatives to meet expanding creative quality assurance requirements.
Interstitial Floating creative guidelines
  • Floating creatives must have a close button
    For all types of expanding creative: masthead, pre-expand, floaters, etc.
  • Floating creatives must collapse after 15 seconds
    • After 15 seconds the creative should auto-close.
    • Use the closeCompanion(); call to close the floater.
  • Floaters should never use Polite Load
    Floaters should appear right away. Otherwise a user might go elsewhere before the ad appears, providing a poor site experience, which publishers try to avoid.
  • Floating creative QA checklist
    Be sure to follow the QA test script for floating creatives to meet floating creative quality assurance requirements.
Masthead guidelines
YouTube guidelines are specific, and the site won't approve ads to run until the guidelines are met. It is highly recommended that you visit the Display Specs Help Center to make sure your units meet all of their site requirements before submitting assets to QA.
  • All mastheads should use Polite Load
    Include a starter (backup image) in the parent shell that loads in the polite content.
  • The initial masthead load can't exceed 50K
  • Polite Load SWFs + video can't exceed a total of 1MB
  • Total video assets must be under 10MB
  • All creatives must include a YouTube close button component in the top-right corner
    This button must be placed in the parent file of the creative.
  • The ad unit must have a border
  • No audio, video, action, or motion inside a masthead ad unit can be initiated on mouse-over
  • Expandable mastheads must include an X Close Expanded
    Per YouTube guidelines, place it in the top left of the ad and use the exact wording X Close Expanded.
  • On close or exit, the masthead should:
    • Stop all video.
    • Stop all sounds.
    • Resolve the ad to end-frame graphics.
    • Collapse, if the masthead is expanded.
  • All videos require controls
    This includes play, pause, mute, replay, and progress bar.
  • Masthead technical requirements
    Be sure to follow the technical/site requirements specific to YouTube mastheads, as listed on the YouTube Help Center.

See also the masthead templates on the templates, tags, and previews Help Center article.

Android-style image of the author of this page

Sarah is a DoubleClick Studio expert and author of this help page. Help her improve this article by leaving feedback below.

Was this article helpful?
Yes
No