THE DUBS

FSI Investment
Dynamic Ads

CREATIVE TECH
DESIGN
MOTION
CODE

CONCEPT • DESIGN • MOTION • CODE

The Dubs needed help in creating and managing HTML5 Dynamic Banners that would display different sets of messages depending on the target audience and time of the year.

From designing and animating the assets, building the HTML5 Dynamic function and also managing the dynamic content using DoubleClick, we were able to offer a full support to a quite successful HTML5 Dynamic campaign.

Master Animations

The HTML5 Dynamic Ads had two main custom animation routes, that were created with the assets provided.

The Cityscape animation was done in After Effects and exported as a Gif, and this allowed it to have a great number of detail and style added to it.

The HTML5 Dynamic Ads had two main custom animation routes, that were created with the assets provided.

The Cityscape animation was done in After Effects and exported as a Gif, and this allowed it to have a great number of detail and style added to it.

The Railway animation was done with the assets in code, first using CSS, then TweenLite. Once the client approved the animations, it was time to tackle the common issues of Dynamic Ads.

Usually, when using dynamic copy, you have to take in consideration that the design might not be as good changing the text only, so for that we added font-size options and more extra configurations, to make sure that if the client wanted to add or change the content, they would be able to do it themselves.

DYNAMIC HTML5

Setting the content and rules

In this case it was set up that the client could adjust the font-size and line-height, and with knowledge of line breaks, the layouts got much better.

The dynamic content also had a Reporting label, unique url and keywords. So you could access certain message with a keyword.

Coding the dynamic component

Most of the times, the complexity of changing the content of a dynamic ad requires a lot of effort.

For this campaign we helped The Dubs craft 6 messages and they would ask us to prioritize one or other message.

The Master Dynamic Shell

The shell was done in a way that now serves as a template for new campaigns, where it is only needed some extra work on new animations etc.

The advertiser was quite happy with the results, and in the end selected the two better performing messages to run, and for that all that was needed was to make the rows Active:False.

Selected Works