Innovation in Ad Design: An HTML5 Thought Experiment

Marius Veltman is the founder and CEO of Artis Universalis, a creative design agency based in the Netherlands. An expert in rich media, HTML5, and motion graphics design, he was one of the first beta users of Google Web Designer. Below, he discusses his experience navigating the Wild West of cross-screen advertising and the things he’s learned in the experimentation process.

I believe the only way you truly learn is by failing. When something goes wrong, you work to identify the problem and apply that knowledge the next time around. The experimentation process, in my mind, is crucial to developing new ideas and pushing the creative envelope.

Unfortunately, most marketers don’t feel this way. They’re content using traditional methods to develop and execute their campaigns. They’re hesitant to break new ground or averse to risk taking. But rapid changes in technology and consumer behavior can’t be ignored. And if we, as brand ambassadors, want to capture people’s interests and hearts, we need to step up and embrace the challenges and opportunities that innovation brings.

The arrival of HTML5 a few years ago was a big moment for creative agencies. It was one of those opportunities to move forward. My shop, like many others, worked with Flash, but once we saw what HTML5 could do, there was no turning back. As someone who dabbles in all kinds of media—from sketching to 3D modeling to installations involving video, lighting and sculpture—I appreciate the creative freedom a tool such as HTML5 allows.

Because of my work with rich media and motion graphics, Google approached me a while back to provide feedback on its then-new product, Google Web Designer. Even as an early beta tester, I saw its potential to take HTML5—and digital creative as a whole—to a new level. In this article, I’ll share some of the challenges creatives face in digital advertising and how a willingness to embrace technology and innovation (although it is sometimes scary) can lead to success.

Mobile is ripe for HTML5

If we want to reach today’s connected consumers, we need to meet them where they are—and that means on their mobile devices. People are increasingly using their smartphones and tablets in new ways. Most marketers know they need to get their stories out to people across devices, but they still struggle to make this happen.

This struggle is due in part to a lack of understanding of the technology and techniques required to implement successful mobile campaigns. For many, HTML5 remains a mystery. Simply put, it’s a markup language used to build interactive online content that works seamlessly across browsers, operating systems and devices. But it’s the “across devices” part that should have all marketers drooling. After all, most of today’s ad campaigns are still built using Flash, which doesn’t work on smartphones or tablets.

HTML5 has streamlined my workflow, helping me to create high-quality interactive mobile animations without depending on publishers or coders. Last year, for example, I used it to build a splashy ad unit for an entertainment client. It would have taken me much longer to build that same creative in Java. Now, with HTML5 and improved content creation tools, I can create a mobile ad in just a few hours, test it within a mobile environment and push it live—all in less time than it would have taken to code it pre-HTML5.

Why multi-screen advertising is a challenge

Even with all the power HTML5 affords, creatives still face a variety of challenges as we try to build ads that work seamlessly across screens:

Consistent connection quality across mobile devices. We’ve got 3G and 4G networks out there as well as WiFi. That means we must design intelligently to work around the limitations of mobile operators. If an ad creative contains video, for instance, there should be different file sizes available so smaller files can be served to consumers on slower network connections, preserving the intended ad experience.

Changing screen sizes. Designers need to consider how their brand’s assets and stories will play across a large desktop, medium-size tablet and small smartphone. We need to ensure a consistent and engaging message across screens.

Lack of technical skills. HTML5 requires a different set of skills than coding Flash does. That’s one reason creative developers hesitate to transition from Flash to HTML5. With more intuitive and easy-to-use HTML5 tools starting to hit the market, it's up to them to enhance their skill sets.

Experimenting with HTML5 and design

Google Web Designer addresses each of these challenges. It’s a free, easy-to-use tool that allows designers to build robust HTML5 content. Bottom line: It helps us tell consistent stories across screens with some really cool, robust components.

Recently, when the team at Google reached out to me for feedback for a product refresh, the focus was mobile experimentation and inspiration. They asked me to come up with a concept for an ad unit that would show marketers how to build engaging brand campaigns—even on the smallest screens.

For my subject, I chose the Google Cultural Institute, which uses Street View imagery and high-resolution photographs to deliver the world’s treasures—artworks, landmarks, heritage sites and more—to online viewers. I thought it would be a great example of a brand that might be interested in building a cross-device campaign to promote its message: that people can explore the amazing wonders of the world from anywhere.

I incorporated some of the collection’s photos into the ad creative and used some really cool features in Google Web Designer, which I detail below, to deliver an immersive experience. I created a standard mobile unit—a 300-by-250 expandable—to ensure the experience would work on smartphones, tablets and desktops.

Have a look:

(Ad best viewed on your iOS or Android mobile device.)

[[content-callout-1]]

Making waves in mobile

I wanted to start the experience above water and then move below. Using Google Web Designer’s timeline I was able to stitch together multiple photographs and animate them in sequence, as if the viewers were diving into the water.

Once underwater, I wanted them to feel that they could really explore. To do so, I made full use of the advantages that Google Web Designer provides with the 3D stage, and I included the new Tech Lab Motion Sensor component (coming soon to the Rich Media Gallery), which takes advantage of the gyroscope and motion sensor built into Android and iOS mobile devices and makes them cross device and cross browser compatible. The imagery shifts as viewers tilt their phone, so they are controlling the experience. Creating ads that mirror the way people are interacting with their device makes the experience feel more natural. I then used 3D effects and interactive elements to bring the shark and school of fish from the photographs to life.

Innovation through experimentation

Looking at the ad, you’d never guess all of this can be done with a free tool—one that doesn’t even require coding. The result is an awesome ad unit that tells a compelling story, works across devices (nuanced specifically to the particular display) and, most importantly, delivers on the brand’s goals.

Marketers now have the technology to meet the challenges of mobile and build truly inspiring creative that can work across screens. But, advertisers and designers must be willing to step out of their comfort zone. Tools such as HTML5 and Google Web Designer make it easier to get started. It just takes experimentation (and a willingness to fail) to achieve success.

Check out this video for a glimpse into Marius’s creative design process for this prototype ad unit and his evolution as a designer.

Download Google Web Designer at google.com/webdesigner.

• 
  Marius Veltman Founder and CEO, Artis Universalis