Jump to content
GreenSock

Chris

Creating html5 banners in Adobe Edge, Google GWD or by hand?

Recommended Posts

Hi Noximus,

 

It would be more helpful if you would mention which companies are not allowing GSAP and Edge Animate.

Its probably the first we've heard about GSAP being denied.

 

Hopefully the companies you are dealing with will read the IAB's recommendations for 200kb file sizes for standard display ads.

With GSAP hosted on CDNs many networks / publishers are not counting it against file size.

 

Our article explains all this and also why making a TweenNano doesn't make a lot of sense right now

 

http://greensock.com/html5-banners

Link to comment
Share on other sites

I have uploaded Edge banners  to Doubleclick Studio, and AdOps has uploaded Edge banners to DCM. If you do not use DCRM Studio enabler.js, Edge 2015 is not even using jQuery. If your banners are 600K the images are not optimized, they might be 300 dpi and and not saved as optimized JPGs, or the ads are high impacts that are really large dimensions such as 1320x743 for a responsive pushdown.

 

On the Google Hangout last week it was publishers that were mentioned as not really getting it quite yet, so I would not be surprised if certain sites were clinging to the idea of 40K in the post Flash world..

Link to comment
Share on other sites

To add in choices, I've managed to get GSAP working in GWD. So there is a huge choice in development tools. I don't know if GWD is a better tool to get HTML5 add easier into DoubleClick and Adwords..

Link to comment
Share on other sites

mstrhans from the standpoint of getting ads to their final destination GWD probably does have a more hassle free approach, at least until the agencies and AdOps people figure out the new workflow.  I have not been able to try out GWD at work (Enterprise security) but have noticed you can just edit some GWD ads in a code editor without using GWD

 

From yesterday's DC QA Hangout it sounds like Google is putting a lot of resources into GWD.

Link to comment
Share on other sites

Hello...morning...

 

I'm also in the banner-ing...

first i've made them in Adobe Edge en put the .oam in our own (wordpress) site...

But now we'd like to put them on google...

 

While the Edge files are to big, i've started with codepen to do it by hand...

at the end, i zipped it to a folder, and tried to upload it on google.

 

Lots of warnings or errors...

to big, http's forbidden...and at the end the link to greensock libraries...

you may not link to external files

 

 

so i had to put in the tweenmax.min.js and sizzle.min.js files...in the js-folder...

 

;-( to big again....sad enough....

 

lots of problems, so i'm gonna look at google web designer....with his (probably) limitations..

Link to comment
Share on other sites

cartamundi our AdOps person was able to figure out how to upload Edge published banners to DCM. I think a lot of issues in the early stages will be AdOps user errors, as it is very different for them. We are lucky that we had DC people assigned to us for the transition, and support from DC.

 

I had a down level stage poster image in my first set, which was because it was a PNG created by Edge, quite heavy, so it put my 300x600 and 320x480 over 200K. AdOps simply had to book those two as enhanced banners which everyone was upgraded to at no extra charge.

 

i stopped doing the poster.png in Edge because it is redundant. AdOps must upload a backup banner image anyways and JPG or GIF will be much smaller..

 

My second set of banners which was versioned by 11 different logos, had all 11 logos plus my other files in my zips and they were fine. Half of my banners were absolutely pathed to the Adobe Edge CDN using https. And that was fine.

 

It seems the most restrictive situation is AdWords, which I have no idea what makes AdWords different.

 

 

The only thing I ran into was I had created my zips on a network drive, and the zips had thumbs.db in them , which DCM flagged.

 

Because I am not using DCRM's studio enabler.js, jquery was not even part of my published files.

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I dont understand negative propaganda from some people about the best application for HTML5 animation Adobe Edge Animate.

 

1. IAB recommends 200 kb zipped and biggest ad servers between 150-200 kb zipped.

2. From Adobe Edge Animate CC 2014.1 release, application use only Edge Runtime JS API which is 30 kb zipped.

3. For images of banner stay free between 120-170 kb zipped.

4. Using compressed tiny PNG which preserve quality and transparency and reduce size by 50-80% can have over 20-30 pictures for those 120-170 kb zipped.

 

Take a look what kind of banners is posible with 100 kb zipped and only timeline work without any coding for only 1h work per banner.

http://www.marjantrajkovski.com/html5-banners.html#adobe-edge-animate-html5-banners

Link to comment
Share on other sites

Google Web Designer is different story mostly based on CSS3. Those banners are very slow and arent that powerful like JS based banners.

Link to comment
Share on other sites

Hi Web Dizajner,

 

Thanks for sharing those banners. You do very good work!

 

From what I understand, Adobe has been completely silent for months regarding the future of EA and that has caused a lot of suspicion. People don't want to invest in tools that they feel will be abandoned. A lot of developers were burned by the way Flash has been handled and what happened to Fireworks. 

I know folks find it troubling that here is no mention of EA at Adobe Max, and yet there are 8 sessions on Flash CC (very good). 

https://www.adobe-max.com/connect/search.ww#loadSearch-searchPhrase=flash&searchType=session&tc=0&sortBy=&p=&i(10041)=

 

If you have any info on EdgeAnimate 2015, please share it. I think it would do a lot to get people excited about Edge again.

  • Like 1
Link to comment
Share on other sites

Hi Web Dizajner,

 

Thanks for sharing those banners. You do very good work!

 

From what I understand, Adobe has been completely silent for months regarding the future of EA and that has caused a lot of suspicion. People don't want to invest in tools that they feel will be abandoned. A lot of developers were burned by the way Flash has been handled and what happened to Fireworks. 

I know folks find it troubling that here is no mention of EA at Adobe Max, and yet there are 8 sessions on Flash CC (very good). 

https://www.adobe-max.com/connect/search.ww#loadSearch-searchPhrase=flash&searchType=session&tc=0&sortBy=&p=&i(10041)=

 

If you have any info on EdgeAnimate 2015, please share it. I think it would do a lot to get people excited about Edge again.

Wow, interesting!  A few years ago I went to the "Create The Web" event at Adobe SF where they unveiled Edge, and they were practically pretending Flash didn't exist anymore at that point.

Link to comment
Share on other sites

I dont understand negative propaganda from some people about the best application for HTML5 animation Adobe Edge Animate.

 

1. IAB recommends 200 kb zipped and biggest ad servers between 150-200 kb zipped.

2. From Adobe Edge Animate CC 2014.1 release, application use only Edge Runtime JS API which is 30 kb zipped.

3. For images of banner stay free between 120-170 kb zipped.

4. Using compressed tiny PNG which preserve quality and transparency and reduce size by 50-80% can have over 20-30 pictures for those 120-170 kb zipped.

 

Take a look what kind of banners is posible with 100 kb zipped and only timeline work without any coding for only 1h work per banner.

http://www.marjantrajkovski.com/html5-banners.html#adobe-edge-animate-html5-banners

Hi,

really nice work, I noticed you have a mobile icone as well next to these banners, did you manage to get your adobe edge formats accepted on mobile?

Link to comment
Share on other sites

Hi,

really nice work, I noticed you have a mobile icone as well next to these banners, did you manage to get your adobe edge formats accepted on mobile?

Thanks. Try page on mobile.

Link to comment
Share on other sites

Adobe has been completely silent for months regarding the future of EA and that has caused a lot of suspicion.

Adobe release new version in June 2015. We now have version 3,5 months old and a lot suspicion? At Adobe Max they fight to bring in life Flash Professional and save employers.

Link to comment
Share on other sites

Thanks. Try page on mobile.

Yeah the page will work on mobile, what i ment is, does publisher / ad servers accepts +100kb file size?

I got a Adobe Edge format rejected (by Smart ad if i recall) and have been doing them by hand since then.

Link to comment
Share on other sites

hello...( dizajner ) your work looks like what i have i mind... ;-(

 

Would you saying is... try the new Edge?

and work in code or just the UI...together with Greensock?

 

I'm an adobe fan, and tried first Edge...but wen my files become to big...

i've tried to use Edge for placing and did the rest in code ( in Edge, together with Geensock ) 

 

Those animations where must quicker and smoother then by the Edge UI...., but still to big.

 

I've jumped to codepen and learn to do it in code...which was working...but at te end still to big.

no external links to greensock libraries...so i had to put everything in the zip folder.

 

So i stepped to GWD...which was working, but a terrible UI and not very smooth..

 

I'd like to go back to Edge...

but what i have to do, or i how must i do it...to get similar banners, and no bigger files then 150kb??

 

ps. i want to use them in Google Adwords..

Edited by cartamundi
Link to comment
Share on other sites

Yeah the page will work on mobile, what i ment is, does publisher / ad servers accepts +100kb file size?

I got a Adobe Edge format rejected (by Smart ad if i recall) and have been doing them by hand since then.

I think that this depend of particular publisher. With new IAB standard this field will be more standardised. Many websites ban any kind (jpg, png, gif, html5) of banners for mobile view of their websites because of small space on mobile display.

Link to comment
Share on other sites

I'd like to go back to Edge...

but what i have to do, or i how must i do it...to get similar banners, and no bigger files then 150kb??

It is all depend on images. All zipped HTML and JS files are max 35 kb. Everything is like in Flash + 35 kb . It is all depend on number and level of compessing images.

Link to comment
Share on other sites

Oke thanks,

before the switch form Edge to codepen/Gwd, i was already using tiny png....

 

Are you also using the greensock libraries....?

I hadd Tweenmax (105kb) and Sizzle (18 kb) in codepen...so not much left ;-(

Link to comment
Share on other sites

Oke thanks,

before the switch form Edge to codepen/Gwd, i was already using tiny png....

 

Are you also using the greensock libraries....?

I hadd Tweenmax (105kb) and Sizzle (18 kb) in codepen...so not much left ;-(

I use Greensock libraries but not for banners, only for other type of website animations developed with Edge. Problem is in adding necessary extra kb for banner when developing in Edge and I dont have good knowledge of JS for by only hand developing. I dont know can I use only Greensock libraries in Edge without including Edge Runtime.

Link to comment
Share on other sites

oke thanks, i'm gonna try Adobe Edge step 2.0 ;-)

 

Maybe you have your export settings?

 

or just for publish for Web/Optimized Html

 

v Host runtime files on Adobe CDN??

v Publish content as static HTML

Edited by cartamundi
Link to comment
Share on other sites

ps. Dizajner....

 

the major things why i was working with greensock was that animations become more smoother...and quicker...don't you have problems with that?

Link to comment
Share on other sites

If you do choose host runtime on Adobe CDN, you will have to change http to https. DCM will acccept external links as long as they are SSL complinat, either //adobe.com/******* or https://adobe.com******

 

The problem is AdWords.

 

So your  files that do host runtime on Adobe CDN will be accepted some places, but not AdWords. As designers we are not media buyers and may not even realize where our ads are going to go. I usesd to work for a Publisher and knew exactly where my ads were going, with few exceptions, like providing different spec files for a different publisher.

 

This AdWords strictness sucks, because  hosting runtime on Adobe CDN, is best practices from a cached by browser perspective. As is any CDN caching.

 

I highly recommend last week's Google Hangout on hand coding as they reallly got into the pros and cons of all the choices and did talkk about cache, and the the role of publishers in the "but can I use" ambiguity

 

https://plus.google.com/+DoubleClickRichMediaTraining/posts/1fPjS24ji2g

 

This week's Hangout is Advanced GWD. So with Edge you have no idea what Adobe is up to, and then the free GWD where Gooogle is clearly putting a lot of resources judging by the nnew GWD templates that are constantly showing up in the template gallery.

 

All the Hangouts including a link for tomorrow's

 

\https://support.google.com/richmedia/answer/1343040#hangout

 

This came up in my search. AdWords and HTML5

 

https://plus.google.com/+GoogleAds/posts/VocHSn9rHo4

Link to comment
Share on other sites

aaaagh...so quit Edge and go back to GWD or Hangout (never heard of)

 

i must make adwords compatible ads... ;-)

Link to comment
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.
×