HTML Ad Markup

This document provides general best practices on serving ad-markup and creatives through the MoPub Marketplace. These best practices are ad-format agnostic and apply to all ad types supported on MoPub.

1. Is it possible scale an image to fit the full-screen size?

  • No, it is not possible
  • Attempting to stretch an image to fit a device screen may lead to unintended distortion
  • Instead, we suggest the following alternatives:
    • Serve HTML creatives that fill the entire space regardless of its size. For example, center the main image (see below on centering CSS) and provide a full-screen background image that is consistent with and matches the main image.
    • Use media queries for responsive design

2. Should our ad-markup be a full HTML document or snippet?

  • Ad-markup should be snippets of raw HTML (or JS) code

  • Ad-markup should not be full HTML documents

    • full HTML document: (incorrect)

        <html>
          <head>
            <title>nike.com</title>
          </head>
          <body>
            <a href="https://www.mopub.com/nike.com">
              <img src="http://nike320x50.jpg">
            </a>
          </body>
        </html>
      
    • HTML snippet/fragment: (correct)

        <a href="https://www.mopub.com/nike.com"> <img src="http://nike320x50.jpg"> </a>
      

3. Should our ad-markup be escaped?

  • Yes, all ad markup should be escaped as it is sent from the bidder or Server-to-Server partner.
  • Ad-markup should not be complete HTML documents/pages
<script src="mraid.js"></script>

4. Should our ad-markup be URL-encoded?

  • No, we strongly advise against URL-encoding your ad-markup.
  • URL-encoding your ad-markup may result in unexpected ad-rendering behavior.
  • If any link used in the ad-markup requires to be encoded, you should do so.
  • It’s best practice to Self-Test your creatives before running on MoPub.

5. What will happen if I serve a creative sized differently than the intended ad-slot (eg. serving a 320×480 in a 480×320 slot)?

  • Depending on the creative size and the slot size, the creative might be cut off or render in the wrong orientation
  • MoPub relies on the DSP and Server-to-Server Partner:
    • target the correct inventory (ie: serving portrait creatives to portrait ad-slots)
    • confirm that the ad has been built properly (ie: creative assets are hosted properly and accessible)
    • ensure the creative rendering is up to par by using the SimpleAdsDemo testing process (ie: the creative’s functionality and behavior satisfies the end-advertiser’s expectations)
  • MoPub is in the business of delivering ads as dictated by our Demand Partners partners; we fully trust that a DSP and Server-to-Server partner has properly targeted and thoroughly vetted their ad-markup when serving an ad through MoPub

6. Will MoPub automatically “center” creatives?

  • No, MoPub will not center or apply any positioning as we render your ad-markup within webview. We rely on the DSP and Server-to-Server partner to either:
    • a. Ingest device-specific height/width parameters in the request and serve appropriately sized creative assets
    • OR
    • b. Insert your own CSS markup that is able to center your creative assets within a webview when the webview’s dimensions are not known at the time of auction

7. Will 300x250s be automatically centered within interstitial webviews?

  • No, you will need to add in your own CSS markup to center a 300×250 within a 320×480 webview. If no CSS markup is provided, the default position of the 300×250 creative will default to the top-left corner.

8. Can you provide example CSS centering markup?

  • Sure! Below is a simple CSS example that would center a creative of arbitrary size within any ad-slot of arbitrary size. All you have to do is add in your own creative markup after the <body> tags.
  <style type='text/css'>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    html {
      display: table;
    }

    body {
      display: table-cell;
      vertical-align: middle;
      padding: 20px;
      text-align: center;
      -webkit-text-size-adjust: none;
    }
  </style>

  <img src="http://www.fictionalCDN.com/example300x250.png">

9. How do ‘density’, ‘resolution’ and ‘size’ relate to various device screen-sizes?

  • Density is how many pixels appear within a constant area of the display; resolution is the actual number of pixels available in the display; size is the amount of physical space available for displaying the interface.
  • For example, a device with a display size ratio of 320×480 can also render a 640×960 image (i.e., 2x density) in that space, resulting in a higher resolution image, and a better end-user experience.
  • For better end-user experience, you should serve higher density versions of your creatives to mobile devices that have high density displays. No tagging or ad-markup changes are required.
  • To do this, DSPs and Server-to-Server partners will need to ingest the specific device-type at the time of auction to determine whether they should serve a standard-density creative or a high-density creative (retina).

11. Do you have examples of standard, medium and high-density devices?

  • Yes! The below table lists a few device-examples for each density-type but is by no means a complete list.
Density Example Devices
Standard density (1x) iPad Mini, iPhone 3GS
Medium Density (1.5x) Midrange and older Android phones; ie: Nexus S, DROIDs
High Density aka Retina (2x) iPhone 4+, iPad 3+, Nexus 4, Nexus 10

12. Are there any file size restraints on MoPub?

  • Below are our best practice on file sizes for various creative formats (including MRAID):
Creative Type Optimal Ok Suboptimal
HTML/MRAID 200-300kb 700kb 1mb+
VAST/MRAID Video 2-3mb 5mb 10mb+
Native 200-300kb 700kb 1mb+

13. What creative asset sizes should I send for standard or high density devices?

  Standard Density High Density
Phone Banner 320×50 640×100
Phone MRect 300×250 600×500
Phone Interstitial 320×480 640×960
Tablet Leaderboard 728×90 1496×180
Tablet Interstitial 768×1024 1536×2048

14. What image/creative file types does MoPub support?

  • PNG
  • JPG/JPEG
  • GIF

Animated GIFs are supported in Banners and Interstitials but not for the Native ad format.

15. Does MoPub support http -> https redirects and vice versa?

Any http -> https (or vice versa) redirect may fail on Android, resulting in trackers not firing or content not loading. It’s recommended that you use the https:// protocol consistently whenever possible.

Last updated October 10, 2018

TWITTER, MOPUB, and the Bird logo are trademarks of Twitter, Inc. or its affiliates. All third party logos and trademarks included are the property of their respective owners.

© 2018 MoPub Inc.