Adobe

decor

Web Platform Team Blog

Making the web awesome

Using HTML for Rich Media Advertising

As web technologies like SVG, WebGL, and Canvas continue to get richer, more expressive, and better supported, it makes sense to start turning to them more frequently for common rich media solutions like advertising. That’s why, when the Adobe Web Platform team got the opportunity to sponsor CodePen for February, we decided to make a self-referential ad that uses SVG technology to promote SVG technology. Here’s what we came up with:

Specifically, the ad promotes a project called Snap.svg, a relatively new open-source SVG JavaScript library (think of it as a super lightweight version of jQuery, but for creating, animating, manipulating, and querying SVG content). And, of course, all the animations in the ad are done with Snap.

While creating the ad, we were happy to find that the designer/developer workflow was really smooth since we were able to maintain a vector workflow throughout. Designing the storyboard and artwork in Illustrator not only allowed us to maintain a clear vision of what the end result would be, but it also allowed us to generate vectors that could be used directly by Snap. The final step was to integrate Snap for animating and manipulating the SVG, resulting in the final creative.

Another big advantage of SVG is that we essentially got responsiveness for free. The ad can be served in any size iframe and it will automatically scale and look perfect. That gives the publisher (in this case, CodePen) maximum freedom when it comes to displaying the ad, and it means that the creative looks (and works) great in both desktop and mobile browsers.

If you’re doing rich media work on the web, I highly recommend that you go check out Snap.svg. And if you want to learn more about how the ad was put together, feel free to check out the source code.

2 Comments

  1. February 20, 2014 at 7:40 pm, Serkan Tubay said:

    Thanks for this. I will be trying this for the next parallax project.

  2. February 23, 2014 at 8:42 am, Šime Vidas said:

    There seem to be performance issues in Firefox/Windows. During the ad’s playback, only a few frames are shown and the entire browser is unresponsive.