Live Adobe MAX – The Creativity Conference
Learn from the best in the creative industry.
Watch now
Harmony Dark Sky Star Party

HTML5 animation, web advertisement

Preview the actual HTML5 animations here:

Learned some new tools throughout the course of this project.

I generate web advertising images all year long, both standard brand ads and event-specific ads. They're generally static images out of necessity: with a 2-3 person marketing team, one creative person needs to spend time on all sorts of projects.

This time, we needed a package of several web ads for our Harmony Dark Sky Star Party. This is an after-hours festival celebrating the natural darkness of the night sky. In many places, only the brightest stars are visible due to light pollution. Bok Tower Gardens is a short drive away from Kissimmee State Park, Florida's first official Dark Sky Place.

My total workload was a little lighter, so I had an idea... to animate a rotating starry night in the background of this ad. I tried a few other processes, like frame-by-frame animation in Photoshop to export a GIF. After creating a few frames, I did a sample export and confirmed my suspicions. The file would be exponentially too large for the ad platform. The artwork had to be under 80KB. Unless it used HTML5 animation, then it could be up to 150KB.

So, necessity being the mother of all invention, I began learning everything I could about HTML5 animations. This project was the result of a few hours of web searching, Adobe tutorials, some trial and error, and voila. A functional animated ad, within filesize budget, and with validated HTML5 syntax.
.
Digital half-page: 300x600px
Mobile banner: 320x50px
Digital billboard: 970x250px
Medium rectangle: 300x250px