HTML5 Designer Tips and Tricks

September 14, 2015 mogoarts

September 1, 2015 marked a day many marketers will come to know as “Flashageddon” – the day Google stopped supporting the auto-play of flash-animated banners and videos in its Chrome browser. Basically, a big, intimidating “play” button will remain over the ad until a click is initiated.

While Flash animation has been around for years and has allowed advertisers, including arts marketers, to engage their patrons and audiences with moving images, it hasn’t been favored in the industry for quite some time. While “flashy” – no pun intended – Flash-animated ad units and other media can negatively impact both browser speed and battery life.

Apple’s iOS and Firefox have also discouraged this media format for awhile, and both companies have taken steps to ensure that Flash will no longer be the standard – so, don’t blame Google – they’re merely doing what everyone already is. However, Google doing this might increase the impact, since Chrome accounts for nearly 30% share of browser use.

So what’s replacing it? HTML5. These interesting ad units work better across different devices and platforms that Flash.  Unfortunately though, HTML5 is new to many designers, and can be very complex. Don’t miss marketing to your patrons, though! If you’re working with a designer to replace your Flash creative, or want to start using HTML5 but don’t know where to start, you can start with checking in with your designer about these quick and easy HTML5 design-related tips and tricks.

1. Use Google Web Designer 

Ok, so Google recommends it because it’s their product, but let’s focus on the facts. Google Web Designer:

  • Is free to use
  • Offers certifications to designers (ask your designer to get certified)
  • Gives designers best practices for building ad creative in HTML5

Here’s more information about Google Web Designer


2. Reduce your file size

Make sure your designer is aware of the different methods to reduce file size. There are different file types that normally have smaller file sizes than others, including vector files, CSS3, and using icon fonts instead of images. You can also compress your image files.


3. Don’t code creative for specific browsers

Designers don’t need to code for any other devices or browsers other than the ones specified, because they won’t be supported. Here’s what Google Doubleclick has to say about browser and device support for Doubleclick Studio, a very common and useful ad creative publishing tool.


And there you have it! Hopefully you’ll continue to keep your patrons engaged all season long with exciting moving images using HTML5. If not, there are always backups, including animated .gifs and simple static creatives.

No matter how you reach your patrons, anything is better than a big ugly play button on your ads.