Creating responsive banner ads

Frequently, you want to target multiple screen sizes and devices with the same banner ad, and you want the result to be great across all platforms. TweenUI can help you accomplish just that.

Building responsive Html5 banner ads with TweenUI is easy. Start off by using our editor to create a banner ad and select “Download” or “Publish” from the File menu. If you selected “Download”, open the index.html file in a text editor and you will see the javascript code block used to display your banner. Here is an example of what it looks like:

<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300"
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
These are the default settings and this code will produce a normal 300×300 banner. If you used our Cloud Publish feature, the embed script will look slightly different, but the instructions in this article still applies.

To make this banner responsive, all you have to do is add the text in red below:

<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300","scale":true
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
This means that your banner will now scale to fill 100% of the available width. The banner proportions will be kept so the height will be a function of the width. Below is a simple example, try resizing the browser window to see the results!

In a content management system like WordPress, this is most usually the behaviour we want. The banner will scale to the full width of the column.

Sometimes however, you may want to set the maximum width of a banner and not allow it to fill all the available space. You can do this by wrapping the banner in a div with a max-width css property. For instance, if you want the banner to be responsive but never wider than 450 pixels, this is the code you would use:
<div style="max-width:450px">
<!-- TweenUI block start -->
<script id="tui-xxlo">
(function(t){t.xxlo={
"file":"tweenui/banner.html",
"width":"300",
"height":"300","scale":true
}}(window.tweenui=window.tweenui||{}));</script>
<script src="tweenui/tui.js" async></script>
<!-- end -->
</div>


And here is the result. Again, resize the browser window to see the effect.