Scott

Awesome work, Jack! This is the single best example of shape tweening I've seen, regardless of platform or application (looking at you, flash). I bet you'll get a lot of new memberships because of this feature alone.

I'm now at a point where I'm looking to set up our own 3rd party ad server so that we can handle all of the hosting / tracking ourselves. I've reached out to DoubleClick, Atlas, Sizmek, and Adform, expressing my interest in opening an account and have yet to hear back from any of them. The signup process for all of them involves filling out forms and hoping to hear back. It's strangely archaic and exclusive. Are most of you using DCM or is there another company you would recommend? I need to get banners hosted and tracking in the next 72 hours.

I was in the same situation, unsure whether to utilize tools like Edge / GWD and risk being stuck in their eco-system, or take the plunge and just hand code everything to have full control. Long story short, I'm now wrapping up my second set of hand coded HTML5 banners, and I'm really happy I took on the challenge of dealing with the HTML / CSS / cross browser issues. It's comforting and confidence inspiring to be completely in control and I'd highly recommend taking on that small challenge up front as it will continue to pay off down the road. So how did I start? Watch a tutorial First, I sat down and watched this great tutorial series from Lynda.com on HTML5 banner development with GSAP. For me, it really helped to watch someone else start with a blank canvas and turn it in to a fully animated banner to give me that 1000ft perspective on the steps I would later have to follow. Use modern, helpful tools Before I began coding, I decided I needed to take a look at my options for code editors and plugins—anything to make my life easier. I ended up selecting brackets as my editor of choice. Their live preview feature, which instantly shows updates to your banner in addition to highlighting the elements you're currently working on has made HTML/CSS development so much less tedious. Also, I've installed a few plugins for it that I'd highly recommend: Image dimension extractor - Allows you to get dimensions of images in your CSS with just a right click. Ternific - Code hinting (Because I'm not an HTML/CSS wizz, it helps a ton to see hints) Insert Codehint With Tab - Makes it quicker to insert the above hints (I fell in love with this in XCode and can't go back) colorHints - Show colors you've used in your CSS file before as code hints Past and Indent - Properly indents code that you've pasted, one more minor annoyance squashed Emmet - Opens up the doors to tons of shorthand ways of writing HTML Start developing Rather than using the Lynda.com files to start with, I chose to use some sample files from Google that already implemented enabler.js, which allows for 'polite loading' and some more advanced tracking methods. I wasn't sure if I would need to actually use enabler.js for my banners, but I thought it'd be helpful to get familiar with it and have it baked into my banner before I got too far into development. Throughout my first dry run, I frequently referred back to the lynda.com tutorial I mentioned earlier. It gave me a pretty great foundation for all of my major questions, and I didn't have to google much. While the tutorial uses inline CSS and Javascript for the sake of simplicity, I'd suggest having separate files for your own sanity as the project grows. I personally like having a split view in Brackets. HTML on one side, and CSS on the other. This lets you have that separation while still seeing everything at once. I must have spent 80-90% of my time just getting all of the elements positioned correctly. I couldn't tell you how happy I was when I finally got to start animating with GSAP—finally, something I'm familiar with! Cross browser testing The part of the process that I dreaded the most; cross browser debugging. As I mentioned earlier, I used brackets 'live preview' feature during development, which meant I was only checking in Chrome. I use a mac for development, so I needed to setup Parallels to run Windows so I could properly test all browsers and OS's at the same time. I had the banner open on Windows in Firefox, Chrome, and IE8 (yes, some people at our company still use IE8). On the mac, I tested in Firefox, Chrome, and Safari. I also opened the banner in the iOS simulator to check mobile devices. The results: not too bad! GSAP did a great job of translating the animations across all browsers. Some browsers seemed to handle the animation more smoothly than others, but that's to be expected. The only headache was IE8 (surprise!). Simple things like gradients and opacity required stupidly complex css. Scaling, even with GSAP, didn't seem to work at all, and fading opacity of elements in or out resulted in hideous black outlines showing up. I also had to come up with workarounds for the lack of SVG support. Result The very first banner took me a while. I'm certain it would have been much faster to use Edge or GWD for that one, but the subsequent banners have taken a fraction of the time now that I'm familiar with the workflow, and have a basic template to start from. I'd highly recommend taking the plunge and hand coding your banners. I'm far from an expert, but if any of you have questions please don't hesitate to ask.

That's exactly what I'm doing now, Dipscom. I went through the steps of signing up for DoubleClick for Publishers (DFP), which first requires you to sign up for AdSense, and once I got through all of that I came to realize that DFP doesn't support HTML5 banners that consist of multiple files. Apparently I need DCM for that... doh! So now I'm waiting on a response to my request for access to DCM. If for some reason I can't get access to DCM, my last resort will be following this guys direction and hosting the banner on a CDN, which I point DFP to, and then provide the DFP URL to the vendor. Sounds like a headache when dealing with tens of banners. I really wish there was some sort of HTML5 banner validator to simplify this whole process. Something like this tool for flash banners.

Thanks, that's reassuring to know. Yes, I've used the following meta tag: <meta name="ad.size" content="width=300,height=250">

Thanks for the feedback. Yes, you're right, I have a large image of a face that I'm panning across slowly. In order to achieve the effect, the image must be larger than the dimensions of the banner, I don't see how this animation would be possible otherwise. Unfortunately, the vendor doesn't seem very motivated to troubleshoot. Their answer is "I cannot upload the creative into a DCM placement because of the size."

So I've just wrapped up development of my first banner, and I'm now working with a vendor that is trying to upload it to DCM. Unfortunately, they're saying they can't use the banner because the reported dimensions are 394x255 instead of 300x250. Setup: I have an image within the banner that's sized 394x255, but this image, along with all of the other elements of the banner are wrapped in a div that's sized 300x250 with overflow:hidden. So from my understanding, the size of the child elements should not be considered because they are clipped by the parent elements bounds. I've also used inspector and see that the top most element is sized 300x250. Does this mean HTML5 banners cannot contain images that exceed their dimensions, even when wrapped in a properly sized div with overflow:hidden? Or am I doing something wrong? Thanks in advance for any pointers, this community has been a huge help.

Great timing, I can see this forum becoming the 'go-to' source for banner development in the coming months and years. Thanks!

Thanks for the additional input, somnamblst. That will likely be helpful for me when I meet to talk with this vendor.

Joe, thank you so much for taking the time to put together this great write up.Your first guess was absolutely right. After researching the various ad serving platforms available, I was ready to go with DoubleClick to serve the HTML banners if required. The funny thing is, after a few more emails with this media agency, they revealed that they use DoubleClick. So they really have grossly misunderstood google's new guidelines and the capabilities of their platform if they think it doesn't support HTML banners. Their new recommendation, in case I couldn't acquire third party hosting, was to "embed HTML5 backup code in the flash code", and they linked me to this page: https://support.google.com/dfp_premium/answer/6263155?hl=en . Too funny, they really are hopeless! Thanks again for your help and dose of sanity. This is just one of many vendors that have misinterpreted googles guidelines this week.

A little off topic from GSAP specifically, but I'm reaching out to my fellow banner developers to see what your experience is— With this sudden rush to convert flash banners to HTML5, we've also been told by some of our vendors that these HTML5 banners need to be served by '3rd party ad servers'. In the past, I've always created swf's with a 'clickTag' and sent that over to the vendor. The hosting of the banners and tracking of impressions was always handled by the vendors. It seems that by requiring a '3rd party ad server' that they now want us to handle this portion as well? Is this something the rest of you are seeing, or am I dealing with lazy vendors that don't know how to handle HTML5 banners? If you could share your general workflow or shed some light on your typical responsibilities as the banner developer in this HTML world, that would be greatly appreciated also. Thanks for any insight!