Bannersnack vs. Google Web designer

In 2016, Google discontinued Flash format ads that were used in animated display campaigns, Google announced that animated display banners will only be accepted in HTML 5 format. Much before this announcement, Google had already launched a beta version of an HTML 5 animation software called Google Web Designer in 2013. The software was not too complicated to use but it was full of bugs. Over the last 5 years, the development team has significantly improved its performance and now it’s no longer in beta mode. It’s fully functional HTML 5 animator.

In 2016, A web site called Bannersnack.com launched a whole new version of their UI/UX with enhanced features to create HTML 5 animated ads. The website has user interface has features to create HTML 5 ads and also many different types of advertisements using a single interface. Bannersnack is one of the most preferred choices of online marketers these days as it’s not so expensive and easy to use.

We will try to compare both the tools to understand their pros and cons.

The best way to look at this comparison is to first understand who is the end user and how much creative a user wants to go with banner ads creation. When it comes to animation or motion design, what matters first is ‘Design’.

Bannersnack is a tool that comes loaded with prebuilt buttons, templates and we can say it’s a single platform to create ads for multiple online marketing platforms.

On the other hand, Google Web Designer is specifically built to create HTML 5 ads or HTML 5 Animation. We will see this comparison only in the light of HTML 5 animation as otherwise Bannersnack can also be compared with many other platforms that help us make creatives for digital space, just like Canva.

Google Web Designer is a tool that can be used by a non-coder or someone who has limited knowledge of front end technologies, at the same time it opens doors to unlimited possibilities for pro javascript and CSS animators. 

Bannersnack

Bannersnack is built to help marketers that are looking to create ads fast with generic motion design. Quality of ads is very good but there is a limit to what you can do in terms of animation. The Pros of Bannersnack are:

1. You can create a single banner and then export it in multiple formats (MP4/AMP/HTML 5)

bannersnack1

This fantastic feature gives users a flexibility to export ad in any format they wish to, so this feature gives tough competition to almost all the drag and drop multimedia software available online. Especially a feature to export Ad as AMP Ad is the need of an hour for the Google ads marketers.

2. Share the link of a banner to get approval from the client

bannersnack2

If you are an agency or working with a big team, taking feedback and approval can be the best thing to improve the design, satisfy the client and increase ROI. A single link to share the banner ads so that anyone can view and share the feedback is a big plus to use Bannersnack

3. Lots of templates, stock images, and shapes to use.

bannersnack3

Feature to use pre-existing templates, stock images and shapes is a delight for non-designers who have a good taste for design but cannot come up with new ideas. This feature allows you to add prebuilt shapes, stock images, templates, and buttons.

4. Animate as you wish using timeline.

bannersnack5

You can use the timeline to set up the entry and exit of any element with respect to time, for example, if you want to make the title appear at 2 seconds and then make the product image appear at 3 seconds then you can not only setup time but also the transition effect for entry and exit.

5. Embed a banner on the website

bannersnack6

So you want to use the banner you designed on your own website? You can simply do this by embedding the iframe or HTML script code on your website. You can also control the placement and appearance of the banner on the website. So if you want to show it on the top, pop up or bottom right, then just a single click to choose the option will do all the changes in the code.

6. Check banner analytics and heat map.

bannersnack7

If you have used the banner on your own website then Bannersnack also provides the clicks, impressions, and heat map data for the ad. This helps you monitor the performance of your banner and make changes accordingly. Although this feature is not useful if you are exporting the banner and using it on any other platform like Google or Appnexus.

Cons:

1. Cannot create dynamic remarketing ads

Bannersnack is limited to creating banner ads for generic campaigns, so it’s not ideal for large size e-commerce marketers who extensively use Dynamic remarketing and need high-quality HTML 5 ads for the same. 

2. No access to the code of banner to make changes while editing

There is an option to add a click tag to the banner but you cannot go to the code of the banner to make changes in it if you are creating ads for HTML 5 usage.

3. Limited animation capabilities

You can’t import libraries like GSAP, or make multiple animations on a single element on timeline. A simple entry and exit of an element is what happens mostly.

4. Not ready for advanced banner development, eg: Expanding, Swirl or Augmented Reality features are missing.

Bannersnack is built to create banners with simple animation, if you want features like 3D, Augmented reality and Swirl then it’s not possible with Bannersnack.

Google Web Designer

As mentioned above, Google Web Designer is more powerful as an HTML 5 animation software as it is primarily built to create HTML 5 Display ads or HTML 5 documents. Here are some Pros of Google Web Designer:

1. A timeline that comes in Quick and Advanced mode

googlewebdesigner1
googlewebdesigner2

GWD gives flexibility to both advanced users and beginners to shift from quick to advanced mode with a single click. Quick mode helps in the frame by frame animation, on the other hand, keyframes can be used in advanced mode for step by step keyframe animation.

2. A Huge set of components that adds capabilities to display ads

googlewebdesigner3

If you want to add galleries, 3D shapes or videos or want to add features like add to the calendar then it all happens through pre-built components in Google web designer.

3. Easy ways to change CSS easings in animation in the advanced and quick mode of timeline

If you want to change the way transition or effect is appearing, then the easings feature of CSS is just a click away, for example, you can change the easings to ‘ease in’ from ‘linear’ if you want the animation to appear in a more smooth fashion.

4. Easy to edit CSS of elements using CSS panel

Quickly edit CSS of elements through CSS panel, to edit CSS of specific components you can go to the external CSS file of the respective component.

5. Wide variety of Events and Actions

googlewebdesigner5

That’s the superpower to Google Web Designer, an event is like a ‘happening’ which includes events like mouseover, mouseout, ad reaching a certain point of time. Actions are the desired activities we want to program in the ad with respect to that event. For example:

If we want a car to move on mouseover then we can use mouseover as event and CSS transform property action.

6. Flexibility to choose Ad environment, for ex: from Google Ads to Display & Video 360

googlewebdesigner6

In between if you realize that you forgot selecting the ad environment as ‘Display and Video 360’  then you can quickly select the ad network by going into ‘File’ menu and then selecting ‘Ad Environment’.

7. Latest features like 3D component for Swirl Ad

As Google Web Designer is a Google first software, it has all the updated and advanced features that are required to create ads in the latest formats accepted by Google products like Google Ads, Display & Video 360 and Admob. For instance, Google recently launched swirl ad format which can be implemented in the Google Web Designer using the 3D component.

8. Good no. of templates ranging from formats like Dynamic remarketing, Ad mob, Parallax and interstitial etc.

googlewebdesigner7

Google web designer doesn’t have ready templates like Bannersnack but it has templates that are required for dynamic ads, In addition to that, it has templates for other formats like parallax or interstitial too. These templates are very raw and someone with decent experience with the software can customize them according to the brand.

9. Publish Ad directly to Studio or Locally

In case you can you want to directly publish your ad then you can either publish it directly to Studio or locally in your computer. GWD publishes a standard zip that can be uploaded on the Google ads platform or studio, depending on the platform you have built for.

10. Decent SVG animation features

You can create SVG shapes and animate them up to a good extent, these shapes also help us in keeping the size of the banner small.

11. We can import JS libraries and animate accordingly

googlewebdesigner8

If you want to go a step ahead and use javascript animation in your ads then you might need to use libraries like Greensock or Anime.js, in that case, you can easily do that in Google web designer, in fact, it provides an inbuilt feature to import the Greensock JS library.

Cons

1. At times there are bugs in the code of GWD which break the template.

Even after 6 years, GWD still has some bugs that reflect at times of banner creation. Although you can notify the same to the team in GWD community and they will ensure to remove the bug in future releases or updates of the software  

2. There is no way to share a link or a banner ad to get the approval of ad from client

This is the worst part, GWD does not give us a preview link to share with clients or teammates, However, you can directly publish an ad to studio and share links for the same with the client but it’s not possible if you are making ads for Google Ads.

3. Copying and pasting between AMP and non-AMP documents are not allowed.

If you make an HTML 5 banner and then you realize that you were supposed to make it in AMP HTML then you will have to create AMPHTML ad from scratch as copy-pasting between AMP and HTML 5 is not allowed in GWD.

Both Bannersnack and Google Web Designer are powerful tools to create Banners, one key quality that makes Bannersnack a quick choice for any marketer or designer is the presence of so many templates, especially when you want to create ads for various platforms like facebook, google Instagram, etc. What makes Google web designer a choice for a designer is its unending possibilities to create HTML 5 animation.