They say that content is king. And indeed, high quality, relevant content is what keeps users coming back to their favorite and most trusted sites time and time again. But there’s more to the story than this.
You might have the best content out there, but if your users are having a difficult time accessing it, or are having a bad experience on your site, you can guarantee they’ll be going elsewhere—probably straight to your competitor’s site.
User Experience
But hey, you already know that User Experience is of the utmost importance.
That’s why you have a whole frontend team dedicated to making sure your visitors can easily and comfortably access your content.
Design, layout, UI, color scheme—your team is on the ball. Your site is responsive and looks great on any device.
Everything under your control is in tip-top shape. But are you perhaps overlooking something?
What about what’s not totally under your control?
Don’t forget that your website is full of advertisements that have been conceptualized, designed, and coded outside of your company. That means a significant percentage of what your visitors see and interact with is not completely in your control.
But don’t think that a clash to your color scheme is your big problem here—poorly designed ads can have a huge negative impact on your site and UX.
The problem goes much deeper than aesthetics.
If the ads on your site are not well designed and coded correctly, they can cause major problems that can lead to higher bounce rates, a nosedive in traffic, lower CPM, and ultimately a decrease in revenue.
So in this article, we’ll look at a few of these dangers in greater detail, and then cover how the IAB guidelines for HTML 5 advertisements can help prevent them.
The Dangers of Poorly Designed Ads
The slow ad
The number one and most significant danger of a poorly built ad is ad latency.
An ad that doesn’t load fast enough not only is less effective in and of itself but can actually slow down your entire site. Nothing frustrates the modern user like a site that doesn’t load fast enough.
There are two major issues that lead to latent ads, the first being the technology with which the ad was created.
Remember Flash?
If you’re trying not to I can understand—it was a clumsy technology whose remnants are still floating around the web to this day.
But you’d be surprised how many people are still using it to create their ads, which will almost certainly have latency issues.
Here’s why.
The internet runs on HTML—it is the underlying structure of every single webpage you visit.
As such, web browsers are designed to process and display it, and each new generation of browsers does so more quickly.
So if you add a Flash-based advertisement to an HTML site, it is almost certain that the page will load faster than the ad causing the latency which is so harmful to UX.
So making sure the ads you publish are in HTML 5 instead of Flash is the obvious first step and the first recommendation of the IAB guidelines for HTML 5 ads. But even poorly built HTML 5 ads can still give you major latency issues.
The second reason for ad latency is the size of the file or files of the ad, or in other words how heavy it is.
Many ad designers coming from Flash may not have the awareness that HTML 5 ads need to be lightweight to ensure fast load times. This can be difficult to do, especially for modern rich-media ads that feature videos or complex user interactions.
Unfortunately, often the most engaging and effective ads are those most likely to suffer from latency issues due to file size.
The Broken Ad
Another problem that can arise in HTML5 ads is a broken element.
As the ads being published across the web continue to become more advanced with new features being used, the chances of an ad having a technical issue increases.
An HTML 5 ad with a broken element may not display properly and could lead to a negative user experience. Nobody wants to see a 404 error on the page and it reflects poorly on the site’s brand image.
And of course, a broken ad is one that probably can’t be clicked on—a big loss for all parties involved.
Battle of the Browser
A related problem is browser compatibility.
The use of these new features mentioned above carries another risk.
If the customer designing the ad isn’t up to speed on browser compatibility, they very well may use HTML or CSS features that work differently across browsers, or worse, are unsupported by particular browsers. This is a great way to get a broken ad on your site.
Desktop vs Mobile
Last, we all know the ads you publish need to be suitable for any device your visitors may be using.
But is the ad’s designer aware that they may need to provide the publisher with two different versions of the ad?
Having separate files for desktop and mobile may be an inconvenience for the designer, but it may be necessary to ensure ad quality and positive UX.
Meeting the IAB Guidelines for HTML 5 Ads
Now that we’ve covered the dangers of poorly designed ads, let’s look at a few of the major points of the IAB’s guidelines. Even though the IAB guidelines for HTML 5 are intended for ad designers, they are also very relevant for publishers as well. Buy making sure the ads you publish meet the criteria, you’ll ensure higher quality ads and better overall user experience, leading to increased CPM and greater revenue.
First Steps
As stated above, the first thing to check for is that the ad is coded in HTML 5 and not in Flash.
At this point in time chances are low that a Flash-based ad would be advantageous.
Next, make sure the ads you publish are suitable for both desktop and mobile. If separate versions are necessary then make sure the ad designer provides them.
New Features and Fallbacks
You’ll need to make sure all the HTML 5 and CSS features used in the ad will function properly across all browsers—or will at least have a fallback.
This means that if a feature like geolocation isn’t available, the ad will ‘fallback’ to an alternative functionality. In this case a field for typing in a zip code or city.
Webfonts
As we said before, the weight of the ad has a major impact on latency.
One way to reduce weight is to make sure that web fonts are being used for the text, instead of older technologies like images or SVG.
Along with reduced ad weight, and use of web fonts also gives you better readability, better preservation of look and layout, greater typographic control, and more.
Be sure to check for this.
Animations
Animations are an important and complex part of HTML 5 ads.
The basics of what you need to know are that nearly all animations are through CSS or JavaScript—each with advantages and disadvantages.
In general, CSS will run smoother but JavaScript will have better support. This is a broad generalization though and it’s worth reading more about this topic in the guidelines themselves.
We’ve only scratched the surface here and other areas covered in the guideline include: interactions and click-through, video, audio, packaging and testing, and more. So with so many concerns, how is the average publisher supposed to check their ads? Besides giving clear instructions to your advertisers, there are a few things you can do.
First, there are several HTML 5 validators, some of which are general while others are specifically dedicated to ads. Check out these resources from W3C, HTML5 Validator, and Google. These are a good place to start but will require some work on your end.
GeoEdge Services
One thing you can do is take advantage of the ad quality monitoring services offered by GeoEdge.
Along with protection from malware in video ads, auto redirects, phishing, pre and post-click downloads, this excellent service provides monitoring for latent ads. Publishers will be able to view and understand the lifecycle of the HTML5 ad, including all of its specs, such as the creative file size breakdown. And GeoEdge’s media scanner will check for slow ads and many other operational ad quality issues.
In today’s competitive digital market, ads are crucial—they can be the deciding factor that makes or breaks a product or campaign, and optimizing them can substantially increase revenue. By making sure ads on your site meet the IAB Guidelines for HTML 5 ads, and by using cutting-edge services like those offered by GeoEdge, you’ll be on your way to a big improvement in UX and an increase in ad revenue.
