From September, Flash will no longer be supported by Chrome. Prepare for the shift towards HTML5 by visiting our Flash to HTML5 help page

Check it out!

Making a responsive banner

Why responsive?

Mobile is already big and getting bigger, the time people spend on their mobile devices is increasing and we are not expecting this to change anytime soon. Mobile is taking over and we need to adapt. One of the main problems is that there is a wide variety of mobile devices available, with different operating systems and screen sizes. So it is critical to make sure that the content is top quality on all of these devices.  Not only the apps and websites need to be made responsive, but also the banners.

How to be responsive.

Making responsive banners is not that hard and here we will point out the things you need to do in order to achieve that goal.

1. Do not use pixels when defining sizes in your CSS.

The most important thing is to make the banner adapt to the placement/screen it is being served, this is difficult to achieve when all of the sizes are being defined in pixels.

Using pixels makes your banner layout static so in order to make the layout responsive it is highly recommended to use percents when defining the layout size. This way you make the banner adjust to the placement/screen size. CSS support a wide variety of measurement units for responsive design, one alternative being the vw (viewport width) and vh (viewport height) units, but these are still new and support is a bit limited. It's also worth mentioning min-width and max-width (the same goes for height), which allow you to set maximum/minimum width or height to an element. A great banner not only has a responsive layout, but the typography as well. Although it is a bit more difficult to make great responsive typography, CSS also has support for it, like em and ex, which are used mainly for typography, and elements related to it (margins, for example). Sometimes it is not really worth investing in responsive typography, but it is good to know that it is possible to do it.

Too keep it short, instead of using pixels

		#defaultUnit {
			position: absolute;
			width: 320px;
			height: 50px;
			overflow: hidden;
		}

Use percents.

		#defaultUnit {
			position: absolute;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}

Another alternative worth looking into is CSS media queries. They allow to define different CSS styles for different screens.

2. Making the Adform container responsive.

All of Adform banners are served in an iFrame with a static size. It's no use if the banner is responsive, but the container has a static size (320 pixels wide and 50 pixels high, for example). Luckily it is really easy to make the container responsive, just by changin the banner size to 1x1, either in the manifest or the asset settings. It is also possible to have only the width or height responsive by setting one of the properties to 1. So the manifest, for example, should look like this:

{
    "version": "1.0",
    "title": "Standard MRAID HTML banner",
    "description": "",
    "width": 1,
    "height": 1,
    "events": {
        "enabled": 0,
        "list": {
        }
    },
    "clicktags": {
        "clickTAG": "http:\/\/www.adform.com"
    },
    "source": "index.html"
}

Note: Mobile Interstitial banners will always expand to 100% width and 100% height of device's screen (banner will be displayed fullscreen). Please use 320x480 dimensions (default business size) for Mobile Interstitial banners.


3. The banner size is defined by the placement.

We have made the banner and the container responsive. But somehow the correct size must be decided, in essence this responsibility falls to the publisher. The website or the app must define its placement size and the banner just should cover all this place. This is a bit different for fullscreen ads as they just try to expand to fit the whole screen. Although the publishers need to make sure that the site or app allows such behavior.