Google Ads

Learn HTML5 Ads Before It's Too Late

AdStage Team 3 minute read

If you are still using Flash ads, you have three more months until Google cuts you off. Starting June 30th , 2016 Google will no longer allow Flash in AdWords or DoubleClick. By January 2nd, 2017 Flash will cease to run on their networks.

I've collected a few quick and easy resources to get started with rich media ads today.

This ad format has some significant advantages. Your ads will run on desktop, mobile, and tablets. They can be built as responsive, formatting to the width of the device. And since they are responsive you only have to build them once for all devices & screen sizes.

Ads should be designed for mobile first. We are close t0 the point where mobile has completely overtaken desktop with use and screen time. According to a recent GlobalWebIndex study, Smartphones are becoming the primary devices for accessing the Internet. In Asia, the Middle East and Africa, smartphone adoption has already overtaken desktop.

Mobile Device Importance

"If you're not able to reach your audience through mobile search or display, or you're not providing a satisfactory mobile experience you will miss out compared to competitors who are." - Danyl Bosomworth , smartinsights.com

Rich Media Guidelines

HTML5 ads are unique in that they're built from many files to serve dynamic content, much like a web page. IAB (Interactive Advertising Bureau) has published guidance for designing HTML5 ads. You can find the documentation on their website at http:/www.iab.com .

Google has also published best practice guidelines you can follow. This ensures that you provide viewers with the best experience possible.

Google outlines those as:

  1. Build ads in HTML5
  2. Design ads with device in mind
  3. Design for both mobile web and mobile applications
  4. Keep broadband speeds in mind when using mobile video

Not only do they provide a great framework for building rich media ads, they also provide all the tools.

Flash to HTML5 Converter

If you already have Flash ads and would like to convert them to HTML5 ads, you can use Swiffy. Upload your files (below 1MB) and Swiffy will convert them for you.

https://developers.google.com/swiffy/convert/upload

There's also a google-swiffy tag on Stack Overflow. More than likely you will find that someone has already answered your conversion questions.

Build 'Em Yourself

It's easy to build HTML5 ads. There are a few apps that allow you to create ads, but Google Web Designer (GWD) is the easiest and cheapest (free) to use.

Google Web Designer Screenshot

Web Designer provides a comprehensive library of ad templates.  The desktop app consists of a simple linear timeline editor and drag and drop editing. You can also access the HTML & CSS to add extra customization.

One of the best features of Web Designer is that you can publish to DoubleClick or AdMob with a single click.

If you are building an animated ad, make sure to follow Google's policies to ensure your ad gets published.

  • Animation is less than 30 seconds
  • Ads must take up the entire space of the image size
  • Don't get fancy with upside down or sideways ads
  • Image ads must be relevant to your site or app
  • No strobing or flashing ads!
  • Don't mimic content, new articles, or text ads
  • All ads must be G-rated and family safe

There can be severe consequences for breaking the rules. Your domain risks suspension from Google's search results. Or worse you may no longer be allowed to advertise with Google.

Rich Media HTML5 Starter Files

Google provides a starter file generator located on this site. http://bit.ly/1RBkgzp

You can choose your ad format, the size, and open the starter file in GWD with the click of a button. The ad preview is also a cool feature, providing you with an idea of the finished ad.

HTML5 Starter File Screenshot

Buy a Template

Often you may find yourself if need of an ad and you don't have the time to spend creating one from scratch. Luckily there are many free & paid templates that you can use as a canvas to build your ad.

Codecanyon.net, an Envato Market site, has an entire category of HTML5 ad templates . Most of the templates will cost you $10.00. That seems like an attractive price to time savings ratio to me. Each ad template also includes multiple sizes and is compatible with Google Web Designer, making it easy to change the ad colors, photos, and CTA's.

CodeCanyon HTML5 Ads

Regardless if you are ready to tackle designing Rich Media ads yourself or want to start with pre-made templates, you should be preparing to switch both Flash and static image ads to responsive HTML5 ads before it's too late.

AdStage Team