How we’re improving the user experience by building better ads
“Give them quality. That’s the best kind of advertising.”
— Milton Hershey
In the last year, the IAB and the Coalition for Better Ads released their first passes at standards to improve advertising on the web. The IAB’s draft spec, LEAN, emphasized encryption, performance, and limiting intrusiveness. The Initial Better Ads Standards sought to research and document how readers respond to different types of ads, and which formats advertisers should avoid.
These are great ideas. If we could implement their underlying principles, we could deliver a faster site, a better reader experience, and a more effective vehicle for our advertisers that presents their message.
But as we learned from our HTTPS transition, the industry takes a long time to adopt big changes. Any new technology or requirement has to trickle through hundreds of agencies and technology companies before we see it make a meaningful impact on the overall user experience.
We realized that the technical implementation didn’t have to be all that complicated. What makes advertising good, both as a branding/sales tool and as a reader experience, isn’t in the technology: it’s the storytelling.
We asked whether we could provide good storytelling with efficient code, in layouts that were made for a phenomenal user experience. Rather than wait for the industry to adapt, we could start rolling out our own ad products, and advance the state of the art in a way that’s good for everyone.
Lean, mean, and practical
Ad code doesn’t need to be complicated: each ad is just an html document inside an iframe. You need a little styling and a click-handler or two for any interactive behavior.
What got the industry into trouble was tooling. WYSIWYG ad editors let nontechnical designers hammer out creatives, but it’s nearly impossible to design a drag-and-drop tool that’s both flexible and technically efficient. For agencies that do have developers building their templates, they rarely think about how their code will behave on long feature stories with lots of ads spaced throughout.
As a result, we can make a lot of improvements with nothing more than meticulous attention to detail.
Our first production ad, the Impact+ HD, is a video unit. Video is inherently heavy, but we can still make it as efficient as possible. I spent hours tinkering with compression settings (ffmpeg) to find the perfect balance between quality and weight. On mobile, I managed to squeeze it all the way down to 600kb — half of the weight the IAB considers acceptable.
We’re hosting all our external assets on our own CDN and serving them over HTTP2 with far-future cache headers. This means the browser will download and cache the assets once the first time you see it. Any additional time it appears on the same device, the browser will serve the assets from the cache instantly without having to redownload anything. Many traditional, WYSIWYG-generated ads don’t cache assets at all. This makes it easy for them to update the code, but causes the browser to re-download files each time the reader sees the ad.
We made our ads aware of when they’re in view by tapping into the ad code’s existing API’s. This let’s us efficiently trigger subtle animations when the ad comes into view, or ensure a video is never wasting the reader’s battery and CPU by playing when they can’t even see it.
The House Advantage
To be fair, we have an advantage over ad agencies: we control the ad, the code that serves it, and the page it serves to, meaning we can make assumptions about how it will appear and what’s possible in those spots that a third party can’t, including how to apply responsive design.
Third-party ads usually run across a variety of sites with no advanced knowledge of their container, so they have to be designed defensively. By making ads bespoke to our site, we’re free from many of those limitations. We can explore complex fluid and full bleed ads, and design them to look amazing in the exact context they’ll run in.
There’s technical advantages to controlling the whole system as well. We can skip an extra domain lookup while downloading assets from our own servers, take advantage of HTTP2 multiplexing, and if I want to use a common library on our site — an email signup API to promote one of our newsletters, for example — I can tap into our own APIs from the parent page.
These are all small optimizations, but with multiple ads on a page, they pile up quickly.
We know from our reader feedback that a lot of people are concerned about privacy. We get it. We do need some form of measurement to count how many people see the ads, how fast they load so we can optimize them later, and filter out the robots, but that’s really it.
We built a lightweight analytics script using Keen.io, which phones home less than a kilobyte of data to report on the number interactions. The only information it records about the user is the device type.
What’s more interesting to me is recording rendering metrics using the browser’s builtin performance API’s. These will allow us to make our ad products, and by extension, our whole site, faster over time.
It’s obvious why this is great for readers. For advertisers, faster ads perform better. Early results show a 13% increase in completion rates and significantly higher engagement compared to similar video units.
Because we have complete control, we can continue to optimize the designs over time.
One Small Step for a Website
Are there improvements to make? Sure. But right off the bat, the Impact+ HD is significantly lighter than other video ads, loads in the blink of an eye, and according to our readers, is visually interesting without being intrusive.
This is what digital advertising should be.
As more Impact+ HD units roll into production, we’re actively exploring the other original formats that could benefit from our design and development expertise, and invite others in the industry to follow our lead as we make the web lighter, faster, sleeker, and more secure. If it works, we’ll deliver a better product for our readers and advertisers.