Delivered at Respond Conference 2015:
Responsive Web Design is why we're all here, but most of us still need to pay the mortgage. That means advertising. And unfortunately, advertisers and ad networks aren't quite there yet. We've been trying to solve the problem of responsive ads for years, so... what's the big hold up? Kris Howard will walk through the obstacles facing the industry and what we can do to help resolve them.
42. “If you want IAB creative, go for it.
But it doesn’t perform particularly
well and it’s not the best way to get
your brand voice out to the people
you want to see it. That’s why we’re
exploring new ad product designs.
- TED IRVINE, VOX
MEDIA
Source: http://typecast.com/blog/design-qa-ted-irvine-of-the-verge-polygon-and-sbnation
A funny thing happened when this talk got announced. I got a load of tweets and emails from people going, “You’re going to talk about responsive ads? Check this out.
We build a high-impact takeover unit that automatically repurposes all the elements on the fly to best fit the user's screen and...”
Whoa. I had to stop them right there. You see, that’s actually not what I’m going to talk about. Don't get me wrong - I appreciate the enthusiasm, because honestly, I don't expect most technical or creative people to get excited about ads. Hey, I’m just thrilled most of you are still in your seats. But let’s be honest here:
Building them isn't the problem. We all know that. Responsive web design isn't a black art. There are books about it, conferences like today, workshops like the one Andrew's doing tomorrow, online classes, tutorials, blogs, you name it. The technical stuff - that's a solved problem. We can argue about which techniques are best - the most accessible, the most performant - but those are just implementation details. I'm not here to talk about that.
I'm going to talk about the harder stuff. You know how we talk about accrued tech debt? This is like that, but it's industry debt. Business model debt. As a publishing medium the Internet's only been around a short period of time, but we've very quickly built this infrastructure that's locked us into a particular way of doing business. And it's very hard to dismantle.
My goal for this talk is to hopefully give you guys - the creative people, the technical people - an understanding of 1) why the business model is lagging behind - what some of the specific problems are and why they exist, and 2) hopefully some realistic options for what you can do about it.
Actually let’s start by going back and inserting a point zero. Why do we care about responsive ads at all?
Maybe you don’t. Maybe you build sites for the government or something like that. More power to ya. But for just about all of the rest of us, ads pay the bills. So for the rest of us:
• From a publisher’s standpoint, responsive ads are going to look better on our sites and offer a better user experience for our visitors. We can avoid big areas of unintended whitespace. We can modify calls to action to be specific for the user’s device (like adding click to call).
• From a salesperson's standpoint, responsive ads also offer a way to more effectively monetise mobile traffic, which is often just thrown in as a value-add on a desktop media purchase. The sales team can instead sell cross-platform packages as opposed to device-specific.
• From an advertiser’s standpoint, if you want to run a cross-platform campaign, it can be costly to produce creative to suit all the different screen sizes it can be seen on. Not to mention if you need to make a change to it - you’ve got to change them individually.
So those are the nice things we want. That’s what we’re trying to get to. Why can’t we have the nice things yet?
Now we’re back to point 1 - the challenges that we as an industry are going to have to address first. We hold these truths to be self evident:
- Right now, ad units are fixed, standard sizes. There’s a list of standards for desktop, a separate list of standards for mobile, and a separate list for video.
- Ads are commissioned and sold on the basis of those standard ad units and their position on a page.
- Rich ads can break out of their pixel borders - they don’t necessarily stay in your lovely grid. And they can do things with Javascript that can really break your page.
- Maximising revenue can mean using multiple 3rd party networks, which can further introduce quality control issues.
- Responsive ads are more expensive to produce.
- Depending which ad server you use, it may not handle responsive ads very well.
- Advertisers don’t target mobile because their own sites aren’t responsive.
The best way to dive into those challenges is to explain how we got here in the first place. I'm willing to bet that for some of the younger people in this room, you can't remember a time when the Internet didn't have ads on it.
So let's gather 'round for a short history lesson.
At first, nobody really knew how we were going to make money online. Back in the late 80’s and early 90's, the web browser hadn't even been invented yet. One of the earliest and easiest ways to make money was to charge people to get online. One of those pioneering ISPs in the US was Prodigy. Prodigy’s big advantage was that they were one of the first services to offer a GUI while many of the competition were text-based. Coincidentally, one of Prodigy’s parent companies was Sears, a major American catalogue-based retailer. They worked out pretty quickly that one thing GUIs were good for was displaying ads, and that offered an additional potential revenue stream.
Here’s an early example from Christmas Day, 1992. (Lucky kid.) So this is pretty much the proto banner ad, baked in from the very beginning. (Also first Ad Blocker: piece of plastic taped to the screen.)
In 1994, Netscape Navigator ushered in the era of the web browser proper. People started to be unwilling to pay to access your walled garden when there was this amazing world of WEB PAGES out there. How could we make money with those? There was no easy way to collect micropayments or institute a paywall back then. So the early content providers again turned to advertising. After all, it had worked for print for more than a hundred years, right? It also fit in nicely with one of the rallying cries of those early years - information wants to be free. Advertising was a way to make that happen.
So here’s a date that, depending on your point of view, should be commemorated either as the dawning of a new age or a date that will live in infamy: October 27th, 1994. On this day, Wired Magazine’s website “Hotwired” launched with a handful of what it dubbed “banner ads”. The AT&T one was the most famous. Ready for it?
Mindblowing, right? No really, I’m being serious. This was HIGH-IMPACT in 1994. First of all, those rainbow colours. Most of the web back then was just black text on grey background. That thing stood OUT. Also, note that it doesn’t even have the AT&T logo on it. The designers didn’t want it to feel like an ad. They didn’t want to sell something. They wanted it to be a sponsored content experience, something that actually rewarded the user for clicking. And notice that they even had to tell the user what to do. Banner ads were so new that their affordance was hidden, so users had to be taught. And when they did click...
They saw this. See? Black on grey. Told ya. Incidentally, that “You Will” catchphrase was from a really popular TV campaign with commercials voiced by Tom Selleck, talking about all the cool futuristic stuff AT&T was inventing. They were trying to bring that campaign online, showing that the magical future really was here right now. There were three links, of which the first was the reward:
a map of the world with links to online art galleries and museums. Pretty cool.
Does anyone happen to know what the click through rate was for this campaign?
44%. (By contrast, most banner ads these days hover around 0.1%.)
As you might imagine, this effectively kicked off a gold rush. The Internet was taking off in a big way, and everybody was trying to grab as much market share and revenue as possible. This immediately introduced the problem of scale. The Hotwired approach to banner ads was innovative, but it required a direct 1:1 relationship between the advertiser and the publisher, to craft that message, tie it into the offline marketing, and create the whole experience around it. Who had time for that? The priorities became SPEED and LOW-COST. Not to mention the fact that back then, the pool of talented web designers and developers was much smaller than it is now. The demand for people to create bespoke online ads quickly exceeded the supply. Luckily in 1995 the first ad server was released,
and that quickly led to the rise of ad networks. Ad networks meant that the same simple creative could be used on multiple sites. They allowed publishers to maximise their inventory, and advertisers to spread their message as far as possible without rework.
But there was one last hurdle to the full commoditisation of online advertising - the lack of standards.
In 1996 the Interactive Advertising Bureau was set up as a not-for-profit trade organisation to propose standards for online advertising. They estimated at the time that there were over 250 different banner ad sizes in use across the most popular sites. Instead the IAB put forward a recommendation for 8 standards. And here they are...
I know they don’t look very exciting, but this was huge. Standards meant you could compare apples to apples, both in terms of ad cost and ad performance. It meant that creative could be repurposed from one site to another. It made it very, very easy for salespeople - who weren’t necessarily very technical - to sell these placements. There’s a template with some ad slots in it, and a list of ads. You could effectively create a catalog. You want an A unit on B site in the C placement? That’ll be X dollars. And establishing standards also meant that if my site’s sales team hadn’t sold an ad on a page, my ad server could call out to other 3rd party providers to fill that inventory. Nowadays that process can even involve real-time bidding to maximise revenue.
So this - this is like our mitochondrial DNA. It’s the starting point from which twenty years later - which is practically eons in Internet time - you get the display ad industry we have today. There have been some changes
There have been some changes - most infamously with formats like the now deprecated popover and popunder, and I don’t even know what’s going on with that weird 88 x 31 micro button - and the IAB has been busy introducing subsequent standards for video and mobile advertising as well. And as click through rates have plummeted since that original 44%,
advertisers have resorted to ever more intrusive ways to get our attention: auto play videos, page takeovers, things that expand and collapse when you mouse over them. Nowadays with behavioural retargeting, ads can even seem to follow you from website to website across the Internet. But the whole industry is built upon the bedrock of the ad server and the IAB ad standards.
So let’s look at that list of problems again:
- Ad units are fixed, standard sizes. We put these standards in place because they solved particular problems, but as websites evolve the restrictions are starting to chafe and limit our creativity.
- They are commissioned and sold on the basis of those standard sizes and their position on a page. Changing that involves educating salespeople and clients and completely changing existing workflows. That’s not something you can do overnight.
- Rich ads can break out of their pixel borders - they don’t necessarily stay in your lovely grid. And they can do things with Javascript that can really break your page. This is because in our race to make ads as interchangeable as possible, we’ve… made them as interchangeable as possible. Advertisers are therefore always going to try to stand out if they can.
- Maximising revenue can mean using multiple 3rd party networks, which can further introduce quality control issues. Try debugging a bad ad when there literally dozens of third party intermediaries that could be involved.
- Responsive ads are more expensive to produce. I’ll actually qualify that with “for now.” Given that there’s currently no standard for fully responsive ads, they're so outside the normal workflow that most companies aren’t set up to deal with them. More on this in a minute.
- Existing display ad servers aren't set up to serve responsive ads. As it is, most publishers end up using separate ad servers, because some work better with desktop, video, apps, or mobile. That means sales, billing, and reporting workflows are all separated, and there’s no easy way to suddenly convert to one platform that handles all devices.
- Advertisers don’t target mobile because their own sites aren’t responsive. This is a big one. At an event like this, it’s easy to forget that
according to Akamai in November last year - less than 20% of the top 10,000 websites are responsive. What’s more, the more traffic a site gets, the LESS likely it is to be responsive. Until they have a site that works well across all devices, advertisers are going to resist our efforts to extend their campaigns to all devices. Ruling out those advertisers could mean turning down a lot of revenue.
Interestingly, since I wrote that I’ve had direct experience with this problem. My team built an iOS app and our commercial team lined up someone to sponsor it. So yay, we’re all happy, many high-fives, and then the sales guy goes, Oh, their site doesn’t work on mobile. Is that a problem? It looks like we’re going to have to point to their Facebook page, because at least that works.
So now we’re at my second big point - what are the real-world options here? Assuming you have to generate some revenue of course. You could always tear up the existing model and try something new:
You can put up a paywall. Not for everybody, but some of them are making a go of it.
You can go native. Native advertising is big at the moment, and it sounds fancy but all it really means is sponsored content. Sometimes it’s the content you would’ve seen anyway, “Brought to you by” [insert sponsor here]. Other times it’s specially commissioned content, more like advertorial - something that hopefully ties in with both the advertiser and the website. Sometimes it’s advertisers posting their own content and then paying to promote it so more people will see it.
Tolerance for native seems to vary, and I suspect that we’re rapidly reaching the saturation point on some platforms. Anybody else’s Instagram starting to look like this?
For most of us though, display ads aren’t going anywhere. So assuming you have to have ads on your responsive site, what are your options?
The simplest one - and the one the designers seem to like best - is to stick with the standard ad sizes that work well across all devices, and adapt your designs to suit those. Don’t go near the big obtrusive formats. Med Recs work pretty well, and that’s basically the approach that Scott and his team took
for the Boston Globe. You eliminate the variable of different ad sizes as much as possible, so then you’re able to sell just based on the position. You’ve still got the problems of 3rd party advertising and advertisers who don’t have mobile-friendly sites, but it can be done. (Of course, it helps if you’ve got a subscription option so ads aren’t the sole revenue source for the site.)
The approach that most responsive sites are taking is one that I’ve seen called the “swap method” or “Adaptive Advertising". In this approach you keep all the existing infrastructure: the sales approach, the standard ad sizes, the workflows, and the ad server; but you try make the whole system smarter, make it fit a little better. When a user loads your responsive site, you detect the device they’re on or their screen size and change the ad calls on the fly to ones best suited for it.
Depending on the layout, you may even need to try to move the calls to a different position in the DOM. It’s tricky, but not impossible. It’ll probably not fit in great at all the breakpoints. There will definitely be some ad sizes and types you won’t be able to accommodate at all, which is annoying for your salespeople. (You can’t really have side skins, for example, if your site expands to fill the viewport.)
Again, you’ve still got the risk of 3rd party ads breaking your site. Your inventory forecasting probably gets a little more complicated. But really, this approach is about maintaining the status quo for a little while longer while we wait and hope that somebody else will solve the problem: maybe the IAB can introduce a responsive ad standard? There are rumours Google’s working on “something” here - maybe they’ll ride to the rescue?
For those who aren’t comfortable with the status quo, they can take it a step further. Why not roll your own responsive ad units? Here’s a little case study for you. My team did this last year for a site in partnership with our Creative Studios and commercial teams, as a proof of concept. We took the time to find an advertiser with a mobile-friendly site and convince them this was a good idea. Rather than buying placements based on ad unit and position, we convinced them to just sponsor the whole site. That’s a harder sell for a client, but it was a lot easier for us to implement. Then we had to build the ad units themselves. Not a problem, but it definitely took longer than dropping some javascript tags onto the page. We also went through several rounds of feedback and client approvals. And of course, we couldn’t serve the ads from our ad server, so we had to host them all ourselves. That meant we were outside of the normal sales, billing, and reporting workflow. More headaches. The end result was something that looked beautiful but, as you might imagine, involved a lot more expense and overhead than normal. We worked out that it ended up costing us
more than 4x as much as it does to create a non-responsive campaign. And since at the time we only had one responsive site to use it on, we weren’t able to get the volume of traffic to justify the effort. The lack of scale just killed us. The upshot is that one-off proof of concept has remained just that - a one-off.
Other companies have introduced some stunning responsive ad placements. A few months ago the Guardian introduced a “responsive ad takeover” that was used in a Google Android campaign, the first campaign to be booked across all their live sites. It involved a full-width responsive banner - which I showed on my very first slide - a full-width expandable mid-stream unit shown here on desktop and mobile, and
a cut-out or “parallax” med rec that changed as the user scrolled the page to reveal more of the brand creative. (They affectionately call it the escalator.) But when they don’t have a big campaign like that? They fall back to the adaptive/swap method as we saw before.
Another company that’s innovating in this space is Vox Media, which runs sites like SB Nation and The Verge. They’ve introduced new formats such as full-screen responsive interstitials, that the user can move past like a full-page ad in a magazine. The designers have worked closely with the sales team to sell these as a premium ad experience on par with the content and design of the sites. But they still haven’t gone all in.
Ted Irvine, Vox’s director of design, said "Agencies like IAB standards because they know what they have to make. They can make one ad and give it to us, ESPN, and so on across the board. We’re saying that’s fine. If you want IAB creative, go for it. But it doesn’t perform particularly well and it’s not the best way to get your brand voice out to the people you want to see it. That’s why we’re exploring new ad product designs.”
And here's what I love about this approach
it’s going back to the spirit of that first AT&T banner ad. The companies innovating in this space have actually come full circle, and they’re back to creating a bespoke experience for the user that actually rewards them for their attention. Now we just have to wait and see if users and advertisers like what they see.
So to bring this to a conclusion: Hopefully I’ve given you a better understanding of why the current display ad model works the way it does, and what problems we face when trying to integrate ads into a responsive site. We’ve spent decades building this infrastructure, putting in place standards and efficiencies that allowed online advertising to massively scale, but now we’re locked in. The standard display ad formats aren’t going away anytime soon - and let me emphasise that, because it’s probably the key takeway -
they’re not going away anytime soon - so you’re either going to have to adaptively swap them depending on the user’s device, or limit yourself the ad formats that work best across all devices.
Fortunately it’s not all doom and gloom - some companies are at the vanguard, trying to find new ways to create responsive campaigns that delight publisher, advertisers, and users. We need to support these efforts, as well as continue to design and build sites that work across devices. The more responsive sites we build, the less of a problem we’ll have with scale and return on investment.
Then maybe someday soon we’ll be able to actually have the nice things instead of just talk about them.