Designing & Coding an Animated Banner Ad With No Images? No Problem.


By / / Charged with producing a banner ad for placement in Codepen, a code prototype and community platform for developers, Campaign Monitor came up with this nifty solution: instead of designing a static banner ad, code the entire banner, animation and all, without using images. Below is an animated GIF showing the finished banner in action: How did they come up with this solution? In their own words:

Before thinking about animation or sinking our teeth into the complexity of the task ahead, we started by tackling the messaging and design. Canvas is an intuitive drag and drop tool to design emails that work everywhere, so we wanted to reflect those qualities in the ad itself. The “works everywhere” aspect was the main point we wanted to get across, so showing an email being built and displayed in various devices was the concept we landed on.
The rest of Campaign Monitor’s process is detailed on their blog and makes for an interesting read. It serves as a great reminder that any challenge or endeavor worthy of our time and energy can be fun, and it really does come down to the little things… Read more about it here.