HTML5 isn’t perfect: Why creatives need to put UX first

But here’s the rub: the creative possibilities require more resources to execute, leading to mushrooming file size and spiraling load times. HTML5 requires a substantially larger number of server calls. This not only impacts site performance but also opens the door to malware insertion. These are significant challenges in an era when “consumer first” thinking is on the rise, driven by the widespread adoption of ad blockers.  A great ad hardly matters if no one is going to see it.

We talked to top digital creatives about how to keep the focus squarely on the user experience when designing digital ads. Here are their tips:

Lose the bloat

HTML5, by nature, requires lighter content. But cutting the fat can help focus creative and improve the user experience by default.

“Designing a banner in a manner that’s not as ‘fully featured’ as a Flash banner is not necessarily a bad thing,” said Steven Louie, creative director at Flightpath. “Where did all these heavy banners get us to before? They got us to the point of ad blockers.” Louie’s advice? Cut to the chase. “With the advent of all this reaction against advertising and ad blocks you’re trying to be conscious of being more lightweight with what you put out there,” Louie said. “Being lightweight and making sure you don’t go overboard makes a big difference.”

With video, less is more

Creatives need to practice restraint in this new environment. Being too liberal with animation, for instance, will quickly weigh down the final product. Likewise, since video delivered via HTML5 isn’t compressed the way it is in Flash–HTML5 uses GZIP compression for HTML, JS and CSS files while Flash used LZMA or Deflate for SWF files meaning video is uncompressed and therefore weightier– you have to be “smart about the type of imagery you use or the way you animate things,” says Dave Tupper, creative director at Huge, which has created ads in HTML5 for Chrysler Fiat. Cinemagraphs, a still image with a minor repeated movement, can be a “really nice way to add motion without presenting a full video, which can slow things down.” If video is necessary, cut it down – way down. Ideally, you should find five seconds that tell the same story as a longer video spot.  “You have to be very smart about video and very smart about imagery and use content that doesn’t necessarily clog things up.”

Conserve where you can

There are ways to cut corners–and file sizes– that are invisible to users. Be aware of font size as some fonts take up more space than others, says Yoni Levy of Digitaland. Control your use of fonts: use system fonts already hosted on the browser level or optimize custom fonts by only downloading the characters required for the ad.

Go deep

Be flexible. If larger-size files are essential to the creative, keep it light on display ads. If necessary, only include heavier content on websites users reach via a click through to a landing page, says Christian Fanslau, associate creative director at Organic. For a recent ad for a connected car, Organic used light animation on display ads “just enough to get people interested,” and then incorporated more interactive, heavier creative on a landing page. “Once (users) have a bit of a commitment to consume more of your content, they won’t be as bothered by long loading times and stuff like that.”

Take the time to test

Compared to Flash, HTML5 is a new frontier for creatives. It can adapt to different platforms, from mobile to desktop, but that means more ways things could go wrong. So in these early days testing every component is a must.

“HTML5 is more based in the development community, so it’s a bit harder to prototype in terms of what a designer would normally do in Flash,” said Robert Hegeman, digital creative director at Siegelgale. Complicating matters, the tests that a designer would typically perform to make sure that things are clear and useable and foolproof are easier to do in Flash compared to HTML5. So it may take more time, but it’s time well spent to ensure the creative performs as intended.

To better manage the challenges of the HTML5 transition organizations like the IAB and The Media Trust created performance measurement tools and standards helping the industry to gauge the impact of this new tool on user experience.  

Creative wins

In the end, if the creative idea is strong enough, it can adapt to any restrictions needed to create a strong user experience, creatives say.

“You can stick out a little bit using really good creative,” Fanslau says. “You don’t have to use rich media and videos all the time. People appreciate static as well.” It boils down to a great idea will generate just as much interest regardless of the format.

“From our creative standpoint we rarely get limited by HTML5,” adds Francesco Bertelli, Design Director, Ogilvy & Mather. “We try to create a bold idea that works. And then if it’s a video we’ll adapt. … If we can’t do traditional videos, we’ll do GIFs on Instagram. It’s all about opportunities.”

Putting the consumer first starts with quality creative

While HTML5 opens the door to creative possibilities unheard of in the Flash era, it could also be the key to a Pandora’s Box of user experience challenges affecting performance, security and privacy. With the threat of ad blockers looming creatives would be well served to remember the maxim put forward by Steven Louie.

“It’s not what you put in, it’s what you take out. We’re trying to be really smart with creative, to not have all the bells and whistles and being smart about it.”