 All right, thanks for coming. Thanks for braving the ad talk. I was surprised to get picked to give this talk. Before I get into ads, I just want to give you guys a little bit of a story about how I got into ads. Last year, I spent pretty much the whole year becoming better and better at working on ads at TenUp. Unfortunately, with a lot of big publishers as our clients, ads is a fact of life for us as developers at the company. And I got better and better at it, figuring out why certain ads weren't working, the continual problems that came up with our clients' sites. And I was working on a huge website, a website that had three to five million visitors per day. And they had a very important advertiser that had bought a really expensive ad on their site. And this ad was one of those lovely ads that pops up and takes over your whole screen and starts playing a video as soon as you visit the website. Really, not great, but something that was supposed to be amazing and something that just wasn't working on their site. It was working on all the other sites that the ad had been placed on. But for some reason, on this particular website, it just wouldn't load at all. And I spent a lot of time digging into it and using all my debugging tools to finally figure out the code that was being delivered to run the ad. And when I finally got into the bottom of the problem, I found out that the code running the ad was 10,000 lines of JavaScript. And that was when I had to realize that I hate ads. And I had to tell my colleagues that I just hated them. And then I realized maybe I don't hate all ads. Maybe there's some good in the world. Maybe ads don't have to be so awful. And that's kind of a little bit about what this talk is about. And also, hopefully give you some tools to make your experience of working with ads not so awful. So I realized I hate web ads. I don't hate ads. There's a lot of good ads out in the world that just aren't on the web. And I also realized that everyone hates web ads. The visitors to your website hate them. They're all installing ad blockers. They don't see the ads. They're blind to them. Also, designers hate ads because they build these beautiful designs. They work really hard to make them well balanced, have a great look. And then somewhere in the process, the ads come in. And who knows what's going to happen? The colors are going to be mismatched, the fonts. Things are flashing at you. It takes a nice design and makes it awful. Also, developers hate ads. I'm a developer. I hate working with ads. They're a black box. They come into the website. You put a little script on the site. And the ads come in from some mysterious place. And when they don't work, you have no idea why. And it's very difficult to have any clue as to how to even figure out what could be going wrong. Also, publishers, the people who have the big websites where they put the ads, they hate the ads as well. They come from a world where advertising is their bread and butter. They're making a huge amount of money. They have a lot of control over where the ads go and how they look. And now they basically just have to sell these slots on their site. They're making a lot less money. And they don't really get to choose how the ads work. So they're stuck in this model that they're basically forced into, and they're not very happy with it. And even the advertisers hate web ads. They have a hard time with ads now because they don't have the kind of control they used to have. They can't really decide where their ads are gonna go. They wind up bidding in an open marketplace and the highest bidder gets the slots. So for advertisers, the web ad experience is also a very subpar compared to what they used to be able to do. But ads don't always have to be awful. Like, look at this beautiful old ad for these colas with this yummy food. It just makes me hungry just seeing the ad. And it makes me wanna have a party, you know? It's just a simple ad, but it's just a reminder that ads don't always have to be awful. And it's easy to think of ads that are good. In the United States, we all line up for the Super Bowl ads to see what the next exciting, hilarious ad that some company's gonna come out with. Very creative agencies putting a huge amount of work into coming up with something that takes 30 seconds to view and is gonna entertain you and capture your imagination. And print ads are still really great. I mean, if you look through magazines, people are spending time creating beautiful artwork for advertising. I mean, just think of these absolute ads. I think they're still running this series, but I had no trouble finding beautiful ads in print. They're just everywhere. So why aren't we doing this kind of thing on the web? Here's an ad that the country of Peru ran. It was a whole series of them with animals. Just beautiful artwork, very creative and lovely to look at. Easy to flip past if you're not interested. Why does it have to be so awful on the web? I kept asking myself, here's another ad. You can see how happy these people are in their car. You just know it's a great car. Look how happy they are. Remember these ads? I mean, they didn't even have any words on them. Now Apple ran these for years advertising their iPods and it just evokes a mood. What about great web ads? I couldn't think of any. I had a hard time coming up with this, so I just did this crazy, this is what we think of with web ads, right? It's just this big thing, it's in your face and then oh yeah, there's a little X at the top so you can close it. That's kind of the level of advertising we're at now on the web. Awful web ads, let's start there. What are some awful experiences on the web? First of all, the full screen popover, the OOP, that's my first technical word for you, that stands for out of page. Those are the ads that pop up and take over your whole screen. Really a bad idea. I mean, advertisers maybe want them because they think people can't ignore them but believe me, people will find the X very, very quickly. Often there's like a delay, you can't close this ad for five seconds. It's just creating awful experiences for your users. Anything that hijacks the scroll experience, especially on mobile, we all know this, you're scrolling down trying to read an article and then suddenly the content jumps up or it jumps down because some ad has loaded and your scrolling is hijacked. They're awful. The ones at the top that push the content down, it's the same experience for your users. That's the push down ad. The clickbait ads, that's the grid of so-called related content that you see when you're visiting a site. It's not really related, it's just something about weight loss or some crazy thing that you didn't know. It's just clickbait and there really, people throw them on their sites because they think they're gonna bring them revenue but all they're really doing is detracting from the content of the website. And similarly wallpaper ads, those are the ones that take over the background of the site or the interstitials, those are the ones that show up before you can visit the site or the autoplay video ones where you're on a page and suddenly a video starts playing, you're just looking for the pause button or turn your volume down so you can skip past that. Those are the awful ones. Oh, also time-based refresh, this is where you're on a site and suddenly all the ads refresh. This is just like a trick that publishers are using to try to inflate their impressions, their ad impressions and it's not really going to deliver any meaningful result for the advertiser. So let's, I did find a few examples of not-so-awful web ads. I did a little research, consulted with some of our people at TANUP who specialize on ads and I found a few companies that are making what I consider to be really nice formatted ads. Yieldmo makes a really slick unobtrusive mobile ad format that comes in a lot of different designs. I'm going to show you a couple of them in a second. Teeds is a really nice video ad format. If you're doing video advertising, it does autoplay when you scroll into view. It doesn't activate sound until you interact with it, hovering over or clicking it on mobile and then if you scroll out of view it stops playing so it's not just consuming bandwidth endlessly for people who aren't even looking at it. And then native ads. These are the ads where I think really as designers and developers need to be kind of pushing more for. These are ads that are just consistent essentially text and an image. The advertisers provide some text fields that you can define, maybe a title and a subtitle and maybe a thumbnail image. And then it's up to you as a designer or developer to decide how and where those ads are going to be displayed on your website. And I'm going to give you some examples of those as well. So this is the yield mode kind of control panel. You can go to their site. I picked a few that I think are really cool. This one's called the hyper scroller. As you're scrolling down the page, the ad has some kind of interaction where you see a little bit of activity. I really like this one. This is the window ad. So as you're scrolling, it's sort of showing you through as if you're looking at something behind the scroll. And this one is also really kind of cool. It just sort of flips like a slideshow as you scroll past it. You've probably seen these. They kind of catch your eye. They do not interfere with your scroll experience. They don't interact like, they don't interfere with you in any way, basically. They're just sort of noticeable because they are responding to your action. And they have a whole bunch of other ones that are kind of a little fancier. But I think they offer a really nice format for mobile ads. This is the teeds ads that I mentioned. Their format, again, the video that's gonna come into view. It starts to play as soon as it comes into view. And then when you interact with the video, it'll start to provide audio. So it's very unobtrusive. It's already there, but it doesn't play while it's not on your screen. It's not consuming bandwidth. And it's a great ad. And then native ads. So this is an example of a site we're building now with an audio player. This is pinned to the bottom of the site. And you probably can't notice the ad. It's over here. It's just a small sponsored message. It's just a simple text ad. A great way to build brand. This is something people are gonna interact with over and over again on the site. It's the main feature of the site. Another example of a native ad is just a simple sponsored content block in the sidebar along with other content from the website. It says it's sponsored. That's really the only thing indicating that it's an ad. Other than that, it looks just like the rest of the content on the site. Again, the advertisers just provided an image and some text, and then the CSS and design of the ad is actually up to the website. Here's another example of native ads. Again, just in the sidebar, just a series of ads going down the side. It looks just like normal content on the site, but it just says, you know, from our advertisers. And one more example, this is a more full page experience, but again, it's just showing sponsored content within the site as kind of a normal part of the content. Here's another one up here. You can see in the little scroller at the top of the New York Times, they have a little paid post, and when you click on that, it takes you to sort of a full page experience of the advertiser. Native just basically means it becomes part of the website. It looks like it's part of the website. It's not something that's gonna come in. So I just wanna go through some ad basics so that you have a little bit of technical knowledge. I found that working on ads, there were a lot of words that the ad ops, the ad tech people would use, and I didn't understand what they were talking about. There are some of the same words that we use in web development, but they don't necessarily mean the same thing. So I wanted to give you a little sort of glossary and give you a technical summary of how ads are implemented. Basically with ads, we put a script up at the top of the page, that's the GPT ad script, and we put tags in the body for our ad code. That's pretty much a basic ad implementation. If you've ever done ads, you probably have done this. So what happens is, between that script loading in the top of your page and the ads actually being delivered, Google or DFB is gonna run an auction and decide who the highest bidder is for the slots on your page. And those ads come in when the page, when they're finally ready, you'll often see some kind of delay. You'll often notice that your site is slower when it's running these ads, in part because this auction has to happen. And the ads that get delivered can be ads that you've sold directly as a publisher to your advertisers, or they can be ads that are just coming from the network, so called remnant ads. So you might just put these, if you have traffic, you might not be selling ads at all, you might just be selling ads off of the network, or you might have some that you've sold directly. An important thing to remember is that ads are actually not just images or videos, they're actually scripts that are running on your site. And there are some great, some recent examples where ad scripts actually introduce security vulnerabilities to your website visitors. So it's important to remember that if you go to my site at the end of this talk, I'll have the link, I've linked to some examples of this. Ads are not just images, they're actually scripts, sometimes very large scripts. You'll often hear this referred to in terms of targeting, key value. These are just simple values that you're passing from your website to the ad server when you're requesting the ads. For example, it might be the category of the page that you're on, or the tags that are on the page. And these values are used by the ad traffickers to decide which ads. So you might sell an ad to a specific advertiser and say every time someone visits our website and the page is on this category, your ad will appear. That's key value targeting. Another common way of targeting is master companion or roadblock. This is where all of the ads on the page are determined by the first ad that's delivered. So you basically as an ad trafficker, you just target the first ad and then the rest of the ads will follow through. You'll see this a lot where you visit a site and every ad on the page all comes from one advertiser. And it's a really easy way for ad ops to deliver that experience to the advertisers and to sort of guarantee that all of the ads will come from that advertiser on that particular page. The correlator value is sort of a mysterious value that Google assigns to your ads. It basically represents a page view. So all the ads that you request on a page will tend to have the same correlator value. However, that value will change if 30 seconds elapses. So if you have the kind of experience, say, where you're scrolling and you're lazy loading content and additional ads are loading, you can expect that at some time that correlator value will change. And what that means for your targeting is that you can't guarantee that the master companion relationship will continue and you may get other advertisers ads showing on the same page, creating a problem. Another term that's frequently used is single request or batch mode. This is simply referring to requesting all of the ads at once. And what we do, we do this as a way to make the page load faster, essentially, is the big thing. So in the header of the page, even before we get to the content part of the page, we'll request all the ads that we're gonna need on the page. Then that gets sent off to Google. The rest of the page is still loading. Eventually, the page loads. Google comes back with all of the ads at once or we can display those as we need them. That's called single request or batch mode. You can also have multiple batches. So if you have a lazy loading experience where you're loading additional content in, you can request a new batch of ads. Or if people are opening a gallery and there's new ads in there, you can request those as a batch. Asynchronous ads, that just refers to the ads that are gonna come later on in the process. They're gonna be loaded asynchronously at different times. Usually the best thing is in response to some user action. So people open a gallery, that's when you wanna request the ads that are gonna be in that gallery. And then I mentioned this before, DirectSold versus Programmatic. DirectSold ads are the ones that you sold directly to your advertisers. The Programmatic or real-time bidding ads are the ads that are coming in over the network that you have very little control over. This is just to remind us that the world is still okay. We don't all have to talk about ads all the time. So here's a nice picture of where I live in Colorado. So I'm gonna talk a little bit about best practices for ads. This is sort of what I've come up with in terms of what I think, how we should be implementing ads on our websites and hopefully make that a little bit of a better experience for us as developers and designers and website owners and even maybe for our visitors. Number one is try to preserve the user experience. So this is an important thing. And I'm talking about all the things that I said not to do. And as designers, we should be fighting hard for those things. We should be telling our clients that it's really not a good idea to put ads on the site that are gonna degrade the way their site looks. We've worked so hard to come up with a site that performs well, that looks beautiful. Why do they want to mess that up with awful ads? And this is something that we have to keep saying over and over again because there's, on the other side of the equation, there's all the money that they're getting, it's all coming from their advertisers. So it's a little bit of a balancing act between money and the best experience. Another part of this is fewer, more valuable ads. There was definitely a tendency for a while and some sites still do this, just throwing more and more ads on the page. Like the more ads you have, you're getting money for impressions, somehow you're going to get more money from that. It doesn't actually work that way. You have too many ads on your site, you drive away your visitors, your page views go down, you make less money. It's a far better idea to have fewer, more strategically placed ads with very consistent layouts, so the same ads on every page. And through that provide a better experience for your users, better relationship to your content, and a better, just overall site. Again, I mentioned batch requests. This is the idea of requesting all the ads as quickly as you can, early on in the process, so that they're all available to you when you need them. And then simple, consistent ad layouts is sort of the same point as earlier, just trying to keep the ad layouts the same instead of having various layouts. This makes your job easier to trying to figure out why things may or may not be working. And then also in terms of targeting, I prefer to use the key value system for targeting versus trying to use master companion because of the problems that you run into with master companion not working in certain circumstances. And then finally, Google is now offering responsive DFP ad tags. These are ad tags that will let you provide a series of different ad sizes for different device sizes, the same way we use CSS media targeting. So you can tell Google I want these specific ads for these specific sizes, you send them all out at once and then they deliver the correct ad size based on the screen size. So a couple of ad tools that I recommend people use. Yeah, I'm gonna finish up. Getting yourself a DFP account, which is if you've never been in there, it's kind of a horrible experience, but having your own test account and understanding how the ad traffickers actually work is really valuable. Charles Proxy is a great tool for debugging advertising requests. I've got a great tutorial of how to set that up on my website. It takes a little bit of work to set it up, but once you set it up, it will give you the tools you need to actually debug how the ads are working. Ghostry is a browser extension that will not only block ads, but will also tell you all the different scripts that are loading on your page. And then also Google provides ad extensions for Chrome that will tell you how the ads are or are not working on your site. You can also add Google FC to any URL to see that same console. So a couple of other things to get you towards great. Get the ads in your designs early. Even your mocks put ads in there so you can see how your website's gonna look with ads. And use real ads. Don't just use fake things. Use different sizes, different colors. Try to get convey to your clients that the ads are gonna influence what the design actually winds up looking like. And stand firm on bad user experiences. Make sure that you prioritize a good experience for your users. And think about creative solutions for native ads on your site. It's not always immediately obvious where or how those can be placed. But if you start to think about that, the sidebars, different promoted elements, if you come up with those ideas, it's often something that a publisher will go for and can be really valuable as an advertising. And then just remember, ads involve compromises. There's no way you're gonna get everything you want. You're not going to get a fast, beautiful site with tons of ads. You're not gonna get great viewability and fast loading. You have to make compromises. So it's a process of working with the client to try to come up with a solution that everyone will be happy with. So a couple of technical tricks and then I'm done. The ad testing mode is something we add to sites now. It's a, you add a string to your URL and it will put your site into a test mode where you get ads delivered from your test DFP account. It's a great way to traffic specific ads even to your production site just by adding a string to the URL. We also do a debug ads mode and this is where by adding a string to the URL you will get the script that's actually running to display the ad, displayed below each ad so that you can easily see without going into a console or anything exactly what script is being run on the site. And then finally leveraging WordPress filters. We're all using WordPress. So the idea here is that instead of code all over your theme or plug-in modifying the ads you're using the filters that we use internally to change the configuration for the ads. And that allows you to kind of change it from all over. My website is tunedin.net. I've got a whole bunch of technical details there. I'm happy to answer your ad related questions at any time. I'll be around all weekend. Thank you very much.