HTML5 animations

By: Steven Cotroneo

March 5, 2019banner advertisements, design, HTML5, marketing, sales

PART TWO (of five): A Guide to Great Animation

Over the last 8 years or so there has been a lot of discussion on the best way to create animation on the web, Flash or HTML. But, recently we learned some sad news that Adobe announced that Flash will officially be no longer by 2020.

Review of the top 3 HTML5 animation tools and our process in creating them

It seems like Flash met its fate when the CEO of Apple, Steve Jobs, wrote his  “thoughts on Flash” letter back in 2003 and why Apple would no longer support it. The letter mentioned a few contributing factors why Apple was dropping Flash and moving towards HTML, CSS and Javascript which included a higher performance level and lower power implementations without relying on any 3rd party plug-ins. And just like that HTML became the new standard that was adopted by Apple, Google and many others in developing animations.

SO WHAT IS HTML5 EXACTLY?

HTML5 is the current version of HTML. One of its great new functions is its animation capabilities, but that is not all. Today we use HTML5 for animation, application development, music, movies and more, and not just in theory. We use these functions everyday. Whether you’re using a computer, tablet, phone or TV, any HTML5 browser will support all of these features.

HOW TO CREATE HTML5 ANIMATIONS?

There’s many ways to create HTML5 animations, from programming it from scratch, to using an online application without knowing any programming at all. There are so many animation tools popping up every day that it’s hard to keep up with them all. I have chosen the top 3, in my opinion, and wrote a brief description of the pros and cons below.

Animate is a visual application in which you can create fully customizable HTML5 animations for website development, animated banner ads, games, cartoons etc. and publish them on any platform. Animate allows you to create your own custom code and animations and exports .JS and .HTML files. If you are an Adobe user you will find that the interface is very similar to the other applications such as Photoshop and Illustrator. I would recommend Animate for anyone who has Flash knowledge or Adobe users with beginner to intermediate knowledge of HTML animation.

This is our favorite application since it’s very similar to Flash and we have so much experience in that application.

Pros

• If you’re familiar with Flash you will have no problem working with Adobe Animate.
• Works flawlessly with all the Adobe products so you can easily import entire PSD files directly into the application and animate them with ease.
• The interface is similar to the other Adobe products.

Cons

• Unless your creating HTML5 animations on a regular basis or if you don’t have an Adobe Cloud subscription it could be difficult to learn and costly
• You need to know some basic HTML for publications or interactive ads
• You Should have some knowledge of design and programming

Web Designer is similar to Adobe Animate in that allows you create HTML5 banner ads as well as other web content. Despite its name, it does not allow you to create websites. This seems to be one of the biggest complaints by users. If you are familiar with other Adobe applications, Google Web Designer should not take much time to get use to. Although I found it a little more cumbersome than it needs to be. Though, it seems to have great Google support. With links and forums for anyone with issues or questions. Since this is a free application, I would suggest this for beginners wanting to learn more about HTML5 animations. Once you have a better understanding you can move to the paid version.

Pros

• It’s free
• Tons of support, tutorial and forums
• Easy drag and drop features to create a quick banner

Cons

• It’s still fairly new and has some random bugs
• Unable to open other HTML files not created by Google Web Designer
• Difficult to create complex banners
• Should have some knowledge of design and programming

Unlike the Adobe Animate and Google Web Designer, you do not need to have any design or programming experience. Banner Snack is an on-line application that would be perfect for a company that doesn’t have a budget to hire outside resources. It has hundreds of templates to choose from, preset transitions, button libraries and many other resources to choose from. Although the minute I signed up I had a chatbot asking me to sign up for a premium membership, but when I asked a question I never received a response.

Pros:

• A good choice for anyone working on a tight budget
• No design or programming knowledge necessary
• Create multiple size banners at once

Cons:

• Although you can customize your design to an extent, you can not customize the tween or movement of the animation
• Lack of fonts
• Difficult to create complex banners

---

OUR PROCESS

It’s been about 18 years since we first started creating banner ads and although the technology has changed, our process… not all that much. We create a wide range of banner types and it’s super important to have a good process in order to stay on a tight schedule. Our process consist of:

• Storyboards
• Animation
• Preparations for publication

And all of our processes are intertwined with client reviews. In the description of our process below we will be only talking about using Adobe Animate, since this is our preferred application.

Storyboards

A storyboard is a series of still images with text descriptions to describe the animation style. Usually with banner ads are between 2-3 messages, with a call to action at the end of the banner directing the user to sign-up for something or to get more info at a website.

We create these storyboards to help our clients visualize the messages. Storyboards are almost always created in photoshop. The advantage of creating the banners in photoshop is that you can easily export: backup JPGs, animated GIFs or PNGs, which most publications ask for. You can also easily import a layered PSD into Adobe Animate, to ensure that your design animation looks exactly like your mockup.

TIP1: One thing we learned over the years is to create design mockups as close to final designs as possible, before going to the animation phase. Then have the client sign-off on the storyboard. This way they won’t be surprised when things don’t look the way they imagined.

TIP2: However, even with Tip 1 in mind, we like for the storyboard to leave some room for interpretation of animation transitions. This way we are not locked into something that may not work in the animation phase. We also like to break each element up into multiple elements, so we have the option to animate as much as possible. For example, if we were to animate a flower we will bring in all the pedals, leaves and steam and not just one big flower.

Animation

Once the designs are approved, we start preparing the file for animation. This means, making sure all your artwork is at the correct size. Banner publications usually don’t except files larger than 200k so it’s important to watch what images you’re using.

Using Adobe Animate we would just import that layered file into the application to ensure consistency and prep all the element as movie clips or graphics, so we can start animating.

Most of the time, we never create just one banner ad. There can be as little as 3 different sizes to 12 or more sizes. We always allow more time to create the initial banner ad. This is were we develop the animation style such as transitions, typography animations and button style. Once the initial banner is complete and approved we move on, creating the other sizes needed.

TIP: Before you move onto the animation phase you may want to let the client know or put in the proposal that any additional changes to the design would be an additional cost.

TIP2: Complete one banner first and use that as a template for all other banners needed.

TIP3: Not everything has to be obvious. Sometimes very small details and subtle movements will go a long way to making your animations exceptional.

Preparation for Publications

From working on these banners for so many years we know a few facts about them.

• Ads usually need to be 15 seconds or under
• They can only loop 1-3 times
• Banners have to have a ClickTag on the banner
• they have to be smaller than 200k zipped

TIP4: Before starting any animation ask for the publications specifications. This could save you a lot of time and headache

Once all the banners are approved, we then go into the HTML and add a few lines of code for the ClickTag. This is used for the publications to track the click-thru of the banners, as well as execute any additional code, such as looping. There is a way to place an invisible layer in the animation and make that a button, but from our experience that adds a little bit of file size that we would rather use on the animation.

Some publications such as DoubleClick may require you to add some code in the HTML so they can track it as well. You will find that every publication is slightly different.

WHAT CAN YOU DO?

Lastly, I would like to show you just some amazing things you can to with banner ads and HTML5 animations. Below are a few examples that we created for our clients. Hope the article has helped you to start thinking about your banner ads. Please don’t hesitate to contact us with any questions. Animate everything!

A Guide to Great Animation, a 5 part series

If you’re dying to know more about animation stay tuned for the rest of our 5 part series about animation.

Part 1. Animation Overview
Part 2. How to Create HTML5 Banner Ad Animations 
Part 3. How to Create Interactive HTML5 Animations
Part 4. How to Create Explainer Video Animations
Part 5. How to Create AR/VR Animations