Jump to content
Search Community

IAB New Standard

Web Dizajner test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

That 50k is for 300x50. Otherwise I don't se any interresting changes at first glance.

Since the first IAB standard I had to make 3 ( Three ) IAB 'format' ads, because the media agency didn't provide the exact format. I thought if I make something which is standard, then they can't complain.

So this is a ghost, exists on paper but ( at least in my region ) noone using it.

 

Link to comment
Share on other sites

I just read through some of this.  I'm all for getting rid of the disruptive experiences that make people hate ads, but I don't like this flexible size stuff that they have planned.  For animated banners, it seems like it would over-complicate the development process.

 

 

Flexible ad sizing: Ad units are defined by aspect ratios and minimum and maximum size range so the ad can adjust based on the screen size it is being displayed on

 

D6ewtEC.png

Link to comment
Share on other sites

Well, the most major change is the flexible ad sizing. There's no longer a unit that stays the same size, they'll all need to scale up or down now or at least be able to (Animate CC can do this easily though, just need to select responsive scaling). The main thing to take note of is the MIN and MAX sizing. It's not like we need to create a 100x100 ad that also needs to work at 1000x1000. The min and max sizing isn't that far off from each other, so you can probably just use assets that work at the largest size (or worst case, scale up and get slight blurriness). The only caveat with this is, of course, saying goodbye to pixel-perfect designs, and perfect antialiasing but as we move more towards devices with higher resolutions, this becomes less of an issue.

The other one is how external libraries are counted. If it's on a CDN, only the first 50k does NOT get counted. After that you need to include it into the file size limit. However, file size limits have been bumped up quite a bit, so that's good news (just need to make sure TweenMax doesn't get too heavy, or make a TweenNano again *cough cough*)

The other major change to take note of is the INITIAL and SUB-LOAD file size specs. They can be completely different between sizes and can be easily missed. So that needs to be factored into lowest common denominator and how you structure the ad to take that into account.

  • Like 2
Link to comment
Share on other sites

As far as I understand...

 

... on example 1:1 vertical portrait in Edge Animate:

 

Size: 300x300

Min-width: 300

Max-width: 450

Responsive Scaling: Width

Images: HD retina support (all images are in double size) - enough for normal quality for 450x450

 

or

 

Size: 450x450

Min-width: 300

Max-width: 450

Responsive Scaling: Width

Images: HD retina support (all images are in double size) - enough for best quality for 450x450

 

1:1 vertical portait will be scalable from min 300x300 to max 450x450 depend of available space for banner on site.

Link to comment
Share on other sites

  • 2 weeks later...

For flexible scalable GSAP banners can work this code:

 

<script>
  function makeResponsive(isResp, respDim, isScale, scaleType) {
  var lastW, lastH, lastS=1;
  window.addEventListener('resize', resizeStage);
  resizeStage();
  function resizeStage() {
   
  // custom maximum dimensions
  var w = 450, h = 450;
   
  var iw = window.innerWidth, ih=window.innerHeight;
  var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
  if(isResp) {
  if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
  sRatio = lastS;
  }
  else if(!isScale) {
  if(iw<w || ih<h)
  sRatio = Math.min(xRatio, yRatio);
  }
  else if(scaleType==1) {
  sRatio = Math.min(xRatio, yRatio);
  }
  else if(scaleType==2) {
  sRatio = Math.max(xRatio, yRatio);
  }
  }
   
  // custom wrapper div e.g. stage
  stage.style.transformOrigin = '0 0';
  stage.style.transform = 'scale(' + (pRatio*sRatio) + ',' + (pRatio*sRatio) + ')';
  }
  }
  makeResponsive(true,'both',false,2);
  </script>
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...