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

[cwiens 23 Likes (Newbie)]

I feel like sprite sheets add this additional layer of work to sort through. Its great for making one server call compared to 8 if that is an issue but its an awkward way to design for me. I am so use to coding my animations with GSAP in Flash that is not the problem. Using the Copy CSS functionality is a great way to get those top, left coordinates quickly while being able to visually design in PS.

[alwayzambitious 54 Likes (Contributor)]

  Oh! and one more thing ive been using the trial version of MACAW to layout elements copy the css which is the cleanest ive seen then start editing... that MACAW app is the best wysiwig app ive seen. Ive been willing to try out edge but there too much code one doesnt need. that was last year though. its prob worth giving it anther shot

[chrislund 5 Likes (Newbie)]

Hey guys, lengthy post here, but wanted to weigh in:

 

Our company does lots of banners. We’ve enjoyed them throughout the years. Like everyone, we’ve been scrambling as the full-on switch to HTML has been happening. Fortunately we have been expecting it for a while, so it isn’t a surprise.  Collectively we also have the HTML skills needed, from doing websites.  Anyone who hasn’t picked up those skills in the past few years is going to have a tough transition.

 

Throughout this process, we’ve executed banners in almost every way imaginable:

 

- Google Web Designer

Found this to be INCREDIBLY limiting for any kind of timeline animation. Your only hope is to load in GSAP and code your animations. It was quite buggy as well. Apparently, it has some useful time-saving templates for certain kinds of ads, but as it relates to doing standard banners, their timeline was pretty useless. It is also very unlikely that their templates will work for us. Clients always want something custom.

 

- Adobe Edge Animate

A better timeline then GWD, for sure. Almost After Effects-y in terms of how the timeline works, though obviously much more limited. A decent visual tool, but definitely doesn’t give you access to all of the HTML properties, so feels pretty limited overall. 

 

- Hand made Banners with GSAP

Definitely the best way to do it, we’ve found. You have the most control and flexibility. For rich media units, this is definitely the best option. If you run into an issue you can implement work arounds that might not be possible in a timeline tool like GWD or Edge.

 

 

But, no matter how we go about it, the same problems continually come up:

 

- Fonts

It’s too big of a file size to embed your fonts. There are legal issues, as well. So, if it’s a custom font, we end up saving out SVGs from Illustrator. Not the worst thing, but feels sort of redundant to relay out PSDs in Illustrator to save out. And, of course, if any of the copy changes (it always does), it’s more time consuming to update versus just typing out the new copy.

 

- Masking

It’s crazy how much this comes up, but doing any kind of masking other than a square is a problem. And it’s consistently surprising how much we took this for granted in Flash and now doing something as simple as a diagonal mask is a huge issue.

 

- Filters

Again, something we took for granted, but adding directional blurs or glows or drop shadows are all seeming so simple, but problematic now.

 

- Blending Modes

Overlays, screens, multiplies. Doing things like smoke or fog are also almost impossible now in the way we might have done it with flash.

 

- Browser Compatibility

If you manage to figure a way to do some of the above (for example, use CSS masking) you’re then hit with issues of not working across browsers and devices.

 

Anybody doing html banners right now is probably very familiar with the above issues. It’s really painful to try to explain to clients why you can’t do things in 2015 that you were doing in 2005.

 

The limitations are annoying, but so too is the lack of any clear timeline tool to allow visual designers and animators a WYSIWYG interface.

 

When it comes to standard banners, one thing that seems to be overlooked to an extent is Swiffy. https://developers.google.com/swiffy/?hl=en

 

We can make banners the way we’ve been doing (and maybe not appreciating) for years in Flash, via a timeline or use GSAP. And then simply publish it out and convert the SWF. We did a few tests… These all spit out just one HTML file, are all under 100k, zipped and use (relatively) advanced effects, such as filters, blend modes, custom masking, particles, blurs, glows, etc. AND seem to work the same in every browser we’ve tested (save ie8). Here’s a few examples that we’ve converted:

http://www.silktricky.com/clients/html_banners/html_gray_matters_300x250.html

http://www.silktricky.com/clients/html_banners/html_selfie_300x250.html

http://www.silktricky.com/clients/html_banners/madden_300x250.html

 

Something about this feels a bit like “cheating” but we’re wondering why this isn’t more of an accepted practice. Swiffy output does load in some code via a CDN (about 100k) but that seems like it’s going to be the new accepted norm with the new specs. So, then what is the problem and why aren’t more people doing this? Seems a lot easier to give clients what they’re used to than try to tell them why we can’t achieve simple things.

 

In our experience, the time it takes to make a standard banner in the Flash timeline is around 10% to 60% (depending on complexity) of the time it takes to do the same thing in HTML using various methods.  

 

Additionally: Why wouldn’t Adobe adapt Flash to output something similar to what swiffy does? You then have a single html file, just like you would have one .swf file. They would undoubtedly have the best banner creation application from day one since it would allow all the effects that Flash .swf output does.

 

What about Flash + CreateJS?

It is nice in theory, but the output is not retina friendly.  If you look at this banner on retina http://greensock.com/forums/topic/12289-flash-professional-html5-canvas-export-with-gsap/ everything is blurry. Swiffy output is retina friendly as it seems to keep vectors intact. It is also more limiting working in the Flash timeline when in HTML mode.

 

Thanks for reading. Would love any thoughts on this. 

 

Thanks.

[OSUblake 9,990 Likes (Superhero)]

PIXI.js can do all the stuff you love about Flash right down to MovieClips. The only thing it doesn't have is a GUI, so you're going to have to do it the old fashioned way.

 

Color and blending filters...

http://www.goodboydigital.com/pixijs/colorMatrix/

 

Some more filters...

http://www.goodboydigital.com/pixijs/examples/15/indexAll.html

 

And some more filters...

http://jsdo.it/konma/afE8/fullscreen

 

It's crazy fast

http://www.goodboydigital.com/pixijs/bunnymark/

 

Blend modes

http://pixijs.github.io/examples/index.html?s=demos&f=blendmodes.js&title=BlendModes

 

Masking different shapes

http://pixijs.github.io/examples/index.html?s=demos&f=masking.js&title=Masking

 

Alpha mask

http://pixijs.github.io/examples/index.html?s=demos&f=alpha-mask.js&title=Alpha%20Mask

 

Flash vs HTML5 - A couple of years old, but still pretty cool. 

http://flashvhtml.com/

 

Put an outline around an image. I think this is actually part of the filters plugins now, but I just found it a couple of days ago.

See the Pen eNwjOO by osublake (@osublake) on CodePen

 

 

[chrislund 5 Likes (Newbie)]

That is a good point.  Pixi.js looks pretty awesome and we’ve evaluated it for websites and rich media.  We hadn’t looked at it for standard banners before because of file size limits, but the direction things are going, possibly it could be loaded off a cdn and not matter.

 

In your experience, how is it with browser compatibility?  I looked at a few of the examples in IE9 and they were not working. Possibly they were not set up correctly to deal with it, but it would suck if only some features were supported.  We can probably get by without IE8 at this point, but we will still have clients asking for at least 9 and above.

 

That said, the swiffy solution still seems quite nice for standard banners you need to quickly bang out on the timeline.  We are still trying to figure out if there are any downsides with the swiffy approach.

[OSUblake 9,990 Likes (Superhero)]

Pixi is setup to render using WebGL, but it has a canvas fallback for older browsers like IE9. If it wasn't working in IE9, it probably wasn't setup correctly or it was using the WebGL renderer.

 

For Pixi to run, the environment needs to have 3 things available: Object.defineProperty, the Canvas API, and JS image objects. There's polyfills for all those, so you could even get it to work with IE8. Here's a list of supported browsers.

 

https://github.com/pixijs/pixi.js/wiki/FAQs#what-browsers-are-supported

 

Pixi is a pretty big file. About 75kb gzipped, but it's also on most CDNs. However, you can create a custom build and gut most of that. There's a lot of stuff you probably wouldn't need for doing banner ads.

 

All I can say is that Pixi is pretty darn awesome. It's used by several game engines like Phaser, and if you look at the GreenSock examples/showcase page you will find that a majority of those projects are also using it.

 

I don't make banner ads, but to me it seems like it would be a great solution. Instead of dealing with a bunch of SVGs, images, layouts, and fonts that need to be loaded and adapted to different sizes, I would just use Pixi to manage as much as possible. Being able to cache stuff as a bitmap or generating textures on the fly makes it pretty versatile and can handle most things including graphics editing.

 

For example, the other day I needed some different colored stars, but instead of using a graphics editor I just created them in Pixi. This made it much easier and faster to tweak and fine tune how I wanted them to look, ultimately saving me a bunch of time. From start to finish it took me about 45 minutes to create 5 different spritesheets of stars that go BOOM.

 

See the Pen avbPON by osublake (@osublake) on CodePen

[alwayzambitious 54 Likes (Contributor)]

Yes, I forgot about Pixi. It really is just like flash, it's very very promising. Thanks for reminding me about that.

[OSUblake 9,990 Likes (Superhero)]

Ha ha. I just saw a couple of your posts on their forum a couple of hours ago. Here's a little tip. Don't put code inside a function called "noop", which means "No Operation".

 

As you already know getting started with PIXI can be pretty tough because their documentation is just the API, and that's still pretty hard to understand. They are going to release a book, but that doesn't come out till later this year. In the meantime if anybody needs help getting started with PIXI and GSAP, I'll try to help out as much as possible.

[Carl 9,066 Likes (Superhero)]

Hi Chrislund,

 

Welcome to the forums. Thanks a lot for sharing your experience here!

Great stuff in there. 

 

Blake, 

 

Thanks for all the Pixi info. Everything I've seen done in Pixi is absolutely amazing. I'm surprised I don't hear more about it. Really hoping it takes off and more people get into the Pixi / GSAP workflow. I wish I had more practical experience with it.

[somnamblst 183 Likes (Specialist)]

chrislund I too was very frustrated by Edge Animate coming from Flash. I just wanted to load sub SWFs!

 

Until I realized I can load anything into an iFrame in Edge. Any slider, flipbook, accordian, google map, etc. that you can create just load it.

 

sym.$("Box").html("<iframe width='600' height='380' src='http://somedomainName.com/edge/parallaxSlider.html' scrolling='no' border='0' border='no' frameBorder='0'></iframe>");

 

 

Regarding the font issue, Edge does have an advantage. Use a screencap of your custom font and just paste that text in Illustrator CC, select copy, then paste into Edge. Edge automatically creates an SVG of your text and it is very light from a k weight perspective.

[DAEVERD 0 Likes (Newbie)]

Hey yo.

 

Interesting feedback here, i've learnt a lot.

 

I am perhaps coming from a different angle from the rest of you here.  I am a Graphic Designer who has only very recently started doing html5.  I have no coding background and had never used Flash.  

 

The first program I tried was GWD and, despite it's similarities to PS, I found it awkward and buggy.  Text editing is a nightmare and I was not able to transfer or convert banners to other sizes.  SO I got Edge Animate.  Which I feel is a lot easier and less buggy, so far.

 

However I can't seem to bring up the timeline of the html files I saved in GWD in Edge.  The timeline doesn't load, just a loop of the banner.  SO In Edge I am unable to edit all the previous banners I had done in GWD... without once again using the frustratingly limited GWD.  Plus some of the text animations have got worse (wiggling unnecessarily) and it is replacing the fonts I used in GWD.  Any ideas? Or are the programs just not fully compatible?

[fastasleep 1 Likes (Newbie)]

By the way, if you replace the src callout in the index file for the edge.5.0.1.min.js with https://animate.adobe.com/runtime/5.0.1/edge.5.0.1.min.js then that should take care of any large file size limitations you're experiencing with Edge files. 

 

404 on that link, FYI

[fastasleep 1 Likes (Newbie)]

 get CSS positioning in Photoshop really easily. Just right click on the layer (has to be rasterized for bitmaps) and copy CSS. That way you can continue to visually layout ads in PS. Also you can use PS generate image assets in the same psd to auto export in png or jpg and the compression you need. This all came together for me this week. I created this simple ad quickly using the above. I had the HTML,CSS and JS shell already built. cwiens.com/curt/html5728x90/728x90.html 

 

Even better is CSS Hat — check this out: https://csshat.com

 

Also similar from the same company is Avocode which is a standalone app and also a PS Plugin that sync, I'm not sold on that one yet but have been using it and CSS Hat which I do like to select layers in PS and then view/grab CSS from a pane. Works much better than the built-in CSS function.

 

They also make PNG Hat for quickly outputting layers for web.

[fastasleep 1 Likes (Newbie)]

I'm in the process of figuring out what works for me, but for now it's by hand for sure. Did my first round using Sublime Text 2, but have just switched to Coda as I can open a preview pane below my code that auto-refreshes every time I edit the CSS which means no window or app switching to refresh.

 

I had tried previewing in Dreamweaver which I usually use for coding (but never the wysiwyg features at all) and that was a disaster. What a goddamned mess Adobe's software always is, so if this forces me to get friendly with Coda and move away from DW then great. Haven't messed with Edge Animate as I was guessing it was also going to be a mess. Haven't touched GWD or Tumult Hype (another app option I haven't seen mentioned here, no idea how flexible it is).

 

Currently using CSS Hat (see above comment) to grab CSS in Photoshop for bits of the design. Now looking for something that will output the basic HTML markup to save one more step and at least have some basic markup to start with. Not sure exactly how that would work efficiently enough to save time but looks like there are a few tools out there that might be worth a look.

 

For now though it looks like Coda, GSAP, & CSS Hat will get me most of the way there. 

 

I tried Swiffy to convert a SWF and was fairly impressed with the results, but even Google says that it's a temporary solution, so I wouldn't expect that to stick around in the long term. 

[Carl 9,066 Likes (Superhero)]

Thanks for the info, Fastasleep. CSS Hat looks pretty cool.

 

DAEVERD, there is no compatibility between GWD and Edge. They use completely different techniques for generating their layout and animation code. 

[Schoopie Doo 1 Likes (Newbie)]

Can someone explain to me the process of laying out a banner in a tool like photoshop or macaw, copying the css and then bringing it into a text editor and using GSAP to animate. I'm just a bit unsure. 

 

Thanks in advance.

[Dipscom 2,815 Likes (Superhero)]

Hi Schoopie Doo, there's another thread already talking about it. It is aptly named: Banner layout workflow have a check there. I know I wrote some words relevant to your question and there are other suggestions there as well

[BLarson 26 Likes (Newbie)]

If your looking to get the most out of your banner file size wise, hand coding is by far the best.  Program's like Edge, and GWD are great for people who want to prototype or aren't worried about file size.  They typically add a lot of unnecessary ( and heavy ) code.  Making something with high efficiency and performance, every bit matters, when you are pushing that limit right up to the file size boundary.  Hyper optimizing your Images, naming conventions of your css, and even how your GSAP animation code is written can save you important kilobytes here and there.

 

Some of the same tricks we used in the flash days can still be applied, with clever image cropping and masking etc.  Eventually they may increase the cap or improve these GUI's so using them is more feasible.  However if you ever compare them with hand coding in the file size category hand coding always wins in my opinion.  Right now that seems to be the most important aspect of banner development.

[somnamblst 183 Likes (Specialist)]

Newbie I was not liking Edge coming from Flash until I realized I could animate with Edge and insert interactive content with iFrames. Cross domain is not an issue unlike Flash with its really strict sandbox security.

 

sym.$("Box").html("<iframe width='770' height='360' src='http://**********/flipbook/' scrolling='no' border='0' border='no' frameBorder='0' ></iframe>");

 

So Google maps, flipbooks, sliders, scrollers, anything you can build with HTML, CSS and JS can be placed via an iFrame.

 

As far as jQuery, only when I use DCRM's Studio enabler.js does jQuery get published with my banners, at least in Edge CC 2015.

 

While I can modify existing GSAP banner animations through trial and error, which was how I learned actionscript, my art brain needs that idea of a timeline.

 

My first Edge published banners included a very large poster.png for backup, that I am no longer doing as it is redundant, and I did not get dinged for being over 200K

[Scott 9 Likes (Newbie)]

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.

[alwayzambitious 54 Likes (Contributor)]

that cool brackets has that feature to preview instantly....for those whouse sublime txt with live reload installed...to achieve something similiar so that it updates on save... if i really wanted instantaneous feedback, its possible to save sublime every millisecond or on keystroke. then livereload would update...

[wintermute 1 Likes (Newbie)]

Did someone was able to test Adcade ?

http://l.aunch.us/7gfn7 ?

 

wainting list on a beta is not engaging, but i really hope to use something else than full hand-code, and GWD is only good for some simple thing.

[somnamblst 183 Likes (Specialist)]

I have heard good things about Flite, and actually looked at it for coworkers who did no actionscript beyond stop();

 

http://webdevinthecloud.com/2013/11/12/a-brief-look-at-flite-design-studio-html5/

[Noximus 0 Likes (Newbie)]

Most Banner companies are rejecting Adobe Edge!  This is great news!  The Banners they are sending overseas are being rejected by The Media Buyers.  600k plus file size with adobe edge crap.  

On another note... I am noticing some companies not accepting GSAP because of the file size...  15k + 9k is a little much.  I found another animation engine that is 5k.  http://lvivski.com/anima/ .  I have used Greensock since forever!  AS1, 2, and 3... and I do not want to relearn another animation engine!  I'm a TweenMax til I Die!  

Is there a GSAP plugin that only has the essentials needed for Banners!  If not please please please make one! Or will I have to go into the APi and strip out only what i need from the JS file... Then we can't have Bower syncs... AAAHHHHH,... Just Make one!

 

www.pixelrockstudios.com

 

www.bmwusa.com/m  < They asked me to make a flash website in HTML.  When all other developers turned this project away... I did this **** with ease knowing I had GSAP!  

[Noximus 0 Likes (Newbie)]

Adobe Edge will be rejected by Media Buyers!  < Job Security!