Can Rich Media Expanding and Lightbox Ads be responsive?

[Kiere]

I have been tasked with building essentially a micro site inside a banner ad. The expanding banner ad seems to be the solution to hold enough content for what I need but how does one tackle responsiveness inside an expandable or lightbox? I understand the functionality of how it works on desktop but what about mobile?

Am I creating an UX nightmare like I often experience with expanding ads on mobile? To give you an idea of size, closed would be 1250x550 open would be 1250x3300 (giant I know, our worst case size).

Do scroll bars and animations work the same in expanded size?

I am a newbie when it Rich Media ads as far as what you can and can't do in them. Any thoughts or insights would be helpful for me to take to leadership since they are just big idea folks and not the ones doing the work. 

Thanks!

[Oliver16Years]

I have noticed that they intended to mean "scaleable" when they ask for "responsive" ad. This is simplifying the solution, which is already not an easy one when You have to make an expanding rich media banner.
 

/**
 * @global W {Nubmer} - Width of the ad
 * @global H {Nubmer}
 * @global Stage {DOMElement} - Main containeer of the ad
 */

function resizer() {
  var scaleFactor = Math.min( window.innerWidth / W, window.innerHeight / H );
  TweenMax.set( Stage, {
    scaleX: scaleFactor,
    scaleY: scaleFactor,
    transformOrigin: '0% 0%',
    left: ( window.innerWidth - scaleFactor * W ) / 2,
    top: ( window.innerHeight - scaleFactor * H ) / 2
  });


}
window.onresize = resizer;
setInterval( resizer, 100 );

Setinterval is needed because one of the contraptions can't do it's job.

I would require a working solution/example + an expanding template from the media agency to reverse engineer them before starting the task.

[somnamblst]

The first question for Rich Media is always, which Rich Media vendor. For expandables you use that vendor's method.

 

DCRM expanding templates

 

https://www.richmediagallery.com/tools/template-database#filterTplDb:424~

[Kiere]

 

I have noticed that they intended to mean "scaleable" when they ask for "responsive" ad. This is simplifying the solution, which is already not an easy one when You have to make an expanding rich media banner.

 

/**
 * @global W {Nubmer} - Width of the ad
 * @global H {Nubmer}
 * @global Stage {DOMElement} - Main containeer of the ad
 */

function resizer() {
  var scaleFactor = Math.min( window.innerWidth / W, window.innerHeight / H );
  TweenMax.set( Stage, {
    scaleX: scaleFactor,
    scaleY: scaleFactor,
    transformOrigin: '0% 0%',
    left: ( window.innerWidth - scaleFactor * W ) / 2,
    top: ( window.innerHeight - scaleFactor * H ) / 2
  });


}
window.onresize = resizer;
setInterval( resizer, 100 );

Setinterval is needed because one of the contraptions can't do it's job.

 

I would require a working solution/example + an expanding template from the media agency to reverse engineer them before starting the task.

 

I knew transform was probably part of the answer, there is a whole can of worms that I am trying to contain on this project. One being a sticky that jumps to the bottom of the iframe using javascript on mobile devices which I am learning is not an easy feat. I think my problem is that I am the lucky one trying to create a working solution/example. Your answer helps point me in the right direction.

The first question for Rich Media is always, which Rich Media vendor. For expandables you use that vendor's method.

 

DCRM expanding templates

 

https://www.richmediagallery.com/tools/template-database#filterTplDb:424~

I got that far already! I am getting stuck with all of the special needs these ads require for compliance that are my big hurtles. But I will build what I can because I have to show them why something won't work and is a bad idea otherwise they will never let it go.