Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
cerulean

HTML5 Banners w/GSAP & jQuery: best practices? file sizes?

Recommended Posts

I'm a seasoned flash developer who's done a lot of flash banner.  Have been asked to look into doing an HTML5 banner, and since I know a fair amount of Javascript, some jQuery, GSAP, etc, I think I can do it.  

 

This is a concept banner, the ad agency doesn't really know what they're doing, so I don't know if what they want is possible. I also must admit, I don't see the forest for the trees as far as creating HTML5 banners, never having done it, so any help on how to best-practice it would be helpful.  Specs are: "One 300x250 unit, does not expand, HTML5, 40k initial load (we can do 50k if it helps), 61k subsequent load (polite), 30 max animation, 24 fps, 3 loops max."

 

* the animation they want originally was a flash animation, a little cartoon with many moving images, text — a typical flash banner ad — including little action figures hitting each other (it's an advertisement for an online game).  Obviously the animation would be fairly crude, I told them that, but what does one do?  Just set up divs and tween around?  Would one want to use canvas at all?  Can GSAP work with canvas?

* what does file size mean in the HTML5 world?  All the HTML, JS, CSS files plus images?  I assume GSAP will do fine, but jQuery too?  Coming from Flash, I really don't want to worry about browser issues (I know nothing about them), so jQuery keeps it nicely abstract.

* they asked if HTML5 allowed video and suggested layering that in to show the figures fighting. This seems needless complex and size-intensive, no?

 

In any case, I've done a zillion flash banners with GSAP, but am not too clued in how to make an HTML5 banner work the best way.  There are a lot of tutorials out there, and I've looked at some, but they all seem very different in their approach; and the client wants this done very quickly, so I'm keen to leverage my Flash knowledge and make the transition to HTML5.  Any help much appreciated.

Link to post
Share on other sites

Hi

 

Its definitely a bit of the "wild west" when it comes to HTML5 banner ads.

 

Are you familiar with the Interactive Advertising Bureau (IAB)? Its basically a collective of industry big wigs from a wide range of media companies. They are making efforts to help developers, agencies and networks establish some guidelines for HTML5 ads.

 

Part of their efforts is this document http://www.iab.net/media/file/HTML5_DAv1_0_Draft_05-06-13.pdf 

 

It is a version 1 draft of what they consider guidelines (NOT official specs). 

 

Please note the following text about file size:

 

 

2.2 File Size 
HTML5 did not become an official recommendation until December 2012, nearly a year after the IAB Display 
Advertising Guidelines: The New 2012 Portfolio was released. As such, file size limitations were not taken into account for ads developed using HTML5. Current file size limits for ads developed with Flash are sufficient because Flash files can be compiled, compressed, and packaged to accommodate smaller file sizes. 
 
However, HTML5 doesn’t have these compression and packaging capabilities, and with high-density displays permeating the market, larger creative assets are necessary in HTML5 to produce crisp visuals. Until IAB Display Advertising Guidelines is renewed to accommodate HTML5 and high-density displays, the following guidelines are set forth for HTML5 ads. 
File Size Measurement Definitions for HTML5 Ads 
• File size limit of 75-100 KB, measured after compressing the ad (all code and assets) to a .zip file 
• The .zip file must include all referenced code such as Javascript libraries 
• Once the .zip file is uncompressed, the ad (an .html file) must be viewable without a network 
connection (all code and assets used in the ad is contained in the .zip file)  
 
File Size Limits 
All assets and code for an HTML5 ad should be zipped and delivered together as one file to be unpacked and 
processed by the publisher. Some files such as Javascript libraries and Web fonts can be called from another 
location, but the file size of any external files should be considered as part of the initial overall file size because they contribute to ad load performance. Exceptions exist, such as for user-initiated videos, which may be excluded from the initial ad load file size. The maximum file size for additional files should be negotiated with the publisher. 
 
Well-accepted Javascript libraries, such as jQuery, must be included into the total file size. While this 
requirement may prove challenging, the limitation was defined to encourage improved ad load performance 
despite the larger file size. Improvements in library innovation and library version mismatching should help 
reduce library file size so that more of the maximum file size can be devoted to creative imagery. 
 
The total file weight, including the Javascript libraries, must be known to the ad server in order for it to guarantee a certain level of ad drop-off rate to both advertisers and publishers as well as ensure that the file weight stays under the publisher threshold. 

 

 

 

In summary, the specs you were given (50kb) are from an ancient age. Its completely unrealistic to expect someone to create an add that competes with the quality of a Flash ad without taking on the weight of an external js library. Also a majority of Flash imagery was low-weight vectors. Yes we have svg, but if you want to match the ubiquity of Flash... you need to load larger images. If retina displays are important you need even more wiggle room.

 

Again, that document  contains guidelines not specs and now is even a little out-dated. Its ultimately up to the ad network to determine what is allowed. I'd urge you though to use this opportunity to get loosened up with the HTML5 side of GSAP. If you're good with the Flash stuff... you will be WAY ahead of others in no time.

 

Let this agency and the clients see what is possible without Flash. I'm betting they will be impressed. If you have 100kb to play with, I'm confident a lot can be accomplished.

 

 

--- other libraries ---

 

Although you really don't need all the weight of jQuery. You can use Sizzle() which allows you to easily select DOM elements for animation. Sizzle() is basically jQueries selector engine. It weighs less than 6kb I believe.

 

Here is an example of using Sizzle for a banner style animation: http://codepen.io/GreenSock/pen/Fqmsa

 

FWIW we discuss in depth how to create that banner in our GSAP class and course book.

 

As for showing figures fighting... i won't lie, that could be tricky but its certainly possible.

Frankly, I would go for the "move a bunch of divs around" approach over canvas or video.

  • Like 4
Link to post
Share on other sites

Thanks very much — I came across the IAB guidelines, but wasn't sure what weight it carried, what it 'really' meant — as you said, it seems a bit wild west out there.

 

Thanks, too, for the Sizzle rec -- very useful --

 

I'll check out the other links

Link to post
Share on other sites

This is a great post.  I'm also looking into creating HTML5 banners by trying to match it with my Flash Banner experience.

Has anyone come up with an HTML5 and CSS template to start with?

What browsers should you shoot for? (Specially on the IE spectrum). This is the Doubleclick recommendation:

Ad serving and previews for mobile web and desktop HTML5 creatives (In-page, Expanding, or Floating) Supported operating system versions Supported browsers

Note: The rich media backup image is served if unsupported browsers are detected. Windows (Windows XP/Vista/Windows 7) Mozilla Firefox (4+), Safari (5+), Chrome (9+), Internet Explorer 10 Mac (OS 10.5.x+) Mozilla Firefox (4+), Safari (5+), Chrome (9+)

Safari (6.1+) running on the Mavericks Mac OS: If both HTML5 and Flash creatives have been uploaded for the ad, the HTML5 creative will serve instead of the Flash. This is because Safari's Power Saver feature pauses Flash content. iOS (7.0+) Safari Android (4.0+) Browser

 

How important is to have a Selector engine anyways? Isn't document.getElementById() be enough and then leave the rest of the work to GSAP?

Some reading from the Doubleclick folks: https://support.google.com/richmedia/answer/2672512?hl=en

Link to post
Share on other sites

Hi Emmanuel and welcome to the GreenSock forums.

 

I've never worked on ads so I can't give you any advice beyond Carl's great reply.

 

What I can tell you is that the DoubleClick's advice on not relying on jQuery is an advice to not use jQuery for the animations, you can still use it as a selector and to do all the stuff it does with the DOM elements, so in that case you came to the right place. Furthermore, if you're intending to use jQuery merely as a selector engine, it'd be better to use Sizzle or other selecting engine, using jQuery just as a selector tool is like watering the plants with an industrial hose, sure it gets the job done but it's kind of too much :). In this point consider that if you're pointing to browsers that support the querySelector methods (http://caniuse.com/#feat=queryselector) you can rely on GSAP that has a tiny selector engine inside, like this:

//select a single element by it's ID
TweenLite.to("#elementId", time, vars);

//select one or more elements by class name
TweenLite.to(".elementClass", time, vars);

Rodrigo.

  • Like 2
Link to post
Share on other sites

Hello emmanuelulloa, instead of jQuery for a selector engine. You could just use:

var elements = document.querySelectorAll(selectors);
// or use
var element = document.querySelector(selector);

:

GSAP now uses document.querySelectorAll() since version 1.3.1: ( see Rodrigos code example above )

 

http://greensock.com/gsap-1-13-1

 

I personally use jQuery for a selector engine.. but for smaller code projects i just use querySelectorAll().

 

If i were going to target an ID .. i would just use getElementById() since it is faster than its jQuery equivalent $("#element")

Resource:

https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll

 

:)

Link to post
Share on other sites

@Jonathan, can you clarify implementation of using document.querySelectorAll() ?

You suggest to use the following instead of jquery selectors:

var elements = document.querySelectorAll(selectors);
// or use
var element = document.querySelector(selector);

Then do you just need to do the following? Is this it?

//select a single element by it's ID
TweenLite.to("#elementId", time, vars);

//select one or more elements by class name
TweenLite.to(".elementClass", time, vars);

Also doing things this way, how would you suggest preloading image assets (other than using sprite sheet)?

Link to post
Share on other sites

Hi,

 

I'm also fighting the filesize problems and I found something that can help a little: tinyPNG: https://tinypng.com/

my spritesheet went from 300 to 100kb, it still doesn't fit in the 60kb polite banners but it's closer

they have a photoshop plugin too

Link to post
Share on other sites

Hey guys,
 
I don't make banner ads so I've never really looked into issues like image size before. I use pngout and pngcrush to optimize my images, but you can only compress an image so much. If you are still having problems getting the file size down, you are probably going to have to get a little creative and use something like the canvas to fill in some gaps. With the canvas it's relatively easy to create, copy, and manipulate images using nothing but vanilla JavaScript.

 

I've been thinking about ways to do this, and got to thinking about how video games during the 8 and 16-bit eras used some pretty interesting techniques to overcome memory and graphical limitations.
 
For example, a lot of spritesheets used in older games are actually a bunch of smaller, separate tiles that don't form a complete image. To form a complete image, the game would piece these smaller tiles together to form a complete image. Using this technique could drastically reduce your image sizes if there are a lot of similar or shared features on your different images. 
 
If the only difference between some of your images are colors, you might be able to do a palette swap. Video games use this technique a lot to create different characters, like the first Mario and Luigi. I think one of best examples of this is in the older Mortal Kombat games when they used to use digitized actors. The developers didn't have enough memory to create a bunch of unique characters, so they just changed the color palette on the clothing to create new characters.

 

Some of the palette swapped characters.

HwuRwRG.jpg
 
@fripi, I think you could probably have just one image and do a palette swap to create all the different pieces of luggage, even the image with all the different suitcases sitting next to each other. You would just create a composite image from all the other palette swapped images.
 
Another interesting thing you can do with a palette swap is create the appearance of motion. This is used a lot to create background animations like water moving. Here's a great collection of canvas animations that show this technique off.

 

http://www.effectgames.com/demos/canvascycle/?sound=0

 

Again, I'm no expert in banner ads so I don't know if it's even worth trying anything I suggested, but it might be worth a shot if you are in dire need of reducing your images.

  • Like 2
Link to post
Share on other sites

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.

×